后使用快捷导航没有帐号？
查看: 112|回复: 0
android轮播图控件
自定义控件实现的循环广告位，图片轮播。
本帖子中包含更多资源
才可以下载或查看，没有帐号？
论坛资料为网友自由上传，与本论坛无关。
Powered by
关注一牛微信Android客户端实现图片轮播控件
作者：absfree
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了Android客户端实现图片轮播控件，并且和大家一起制作图片轮播控件，分享给大家，感兴趣的朋友可以参考一下
本文和大家一起写一个Android图片轮播控件，供大家参考，具体内容如下
1. 轮播控件的组成部分
&&& 我们以知乎日报Android客户端的轮播控件为例，分析一下轮播控件的主要组成：&&&
&&& 首先我们要有用来显示图片的View对象，根据上图中底部中央的5个点，我们知道需要5个ImageView来显示需要轮播的图片，另外还需要5个ImageView来显示5个点。现在考虑以下轮播组件应该具有的行为，首先需要每隔一定时间间隔切换到下一张图片，并且图片间切换的效果应该是平滑的，就像“翻书”一样。由此我们可以想到将5个图片当做ViewPager的Page，这样图片切换时自然会有平滑的效果。接下来，我们还要给底部的5个小点找一个父容器，由于它们是线性排列的，所以用LinearLayout是再合适不过了。然后，我们还要把ViewPager和容纳5个点的LinearLayout放入一个父容器中，这里我们选择使用垂直排列子View的LinearLayout。
&&& 这样一来，我们就得到了轮播控件的布局文件（carousel_layout.xml)：
&?xml version="1.0" encoding="utf-8"?&
&LinearLayout xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"&
&android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" /&
&LinearLayout
android:id="@+id/dots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:orientation="horizontal"
android:padding="8dp" &
&/LinearLayout&
&/LinearLayout&
&&& 通过对轮播控件的组成部分进行分析，我们已经确定了用什么“数据结构”来表示一个轮播组件，那么接下来，我们要做的就是实现轮播组件的”算法“，也就是业务逻辑。
2. 轮播组件的行为分析
&&& 轮播控件首先要具有的行为是自动播放，也就是每隔一定事件间隔（通常是3到5秒），便自动”翻到下一页“。为了实现这一点，我们可以维护一个currentItem变量来记录当前正在显示的图片，然后设置一个定时任务，调用ViewPager的setCurrentItem方法设置当前要显示的图片，并将currentItem设为下一张要显示的图片。有一点需要我们注意的便是播放到最后一张图片时，下一个被显示的应该是第一个图片，而且切换的效果也不再是平滑的。
&&& 轮播控件的还要能响应我们的滑动动作，也就是我们能够通过左右滑动来在不同的图片之间切换，这个行为ViewPager自动为我们提供了。另外还有一个轮播控件应该具备的行为是：当切换到指定图片时，相应的圆点应该以区别其他4个圆点的颜色显示，以便用户能够知道当前正在播放的是第几个图片。要实现这一点也不复杂，只需要为ViewPager添加一个OnPageChangeListener监听器，然后重写相应的回调方法即可，这样当用户选定了某个Page时，onPageSelected方法会被回调，系统会传入当前Page的索引，我们便可以根据这个索引设置相应的圆点颜色。
&3. 轮播控件的具体实现
&&& 经过以上的分析，我们已经清楚的了解了轮播组件的表示及业务逻辑，接下来只要我们用Java把这些描述出来就大功告成了。
（1）定时任务
&&& 我们需要定时执行“改变ViewPager当前Page为下一个Page”这一任务，这里我们采用Handler来实现，代码如下：
mHandler.postDelayed(task, DELAY);
private final Runnable task = new Runnable() {
public void run() {
if (isAutoPlay) {
currentItem = (currentItem + 1) % (mTopStories.size());
mVP.setCurrentItem(currentItem);
mHandler.postDelayed(task, DELAY);
mHandler.postDelayed(task, DELAY);
&&& 在以上代码中，DELAY代表我们设置的一个延迟常量（单位ms）。由于我们需要的是循环播放，因此第5张显示完毕后应该显示第一张，所以我们要想第6行那样进行一个模运算，这样currentItem就在0到4之间不停变化了。注意第5行有一个isAutoPlay变量，这个变量表示当前是否应该自动播放。那么什么时候不应该自动播放呢？我们知道当我们滑动手指切换图片时，图片会“跟随”着我们的手，就好比我们翻书页的时候，只有松开了手书页才能落下。所以我们正在“拖动”图片时，也就是我们的手还没松开时，轮播控件是不应该自动播放的。为了实现这一点，我们只需重写OnPageChangeListener中的onPageScrollStateChanged方法，在当前状态为“拖动”时设置isAutoPlay变量为false。从第10行我们可以知道，当autoPlay为false时，不会改变当前显示的图片，仅仅会等过了DELAY指定的时间后再执行下一次定时任务。&
（2）OnPageChangeListener
&&& 上面我们提到了要给ViewPager添加一个OnPageChangeListener监听器对象，来实现小圆点颜色的改变以及autoPlay变量的赋值。具体的实现请看以下代码，代码的含义都很直接：
class TopOnPageChangeListener implements ViewPager.OnPageChangeListener {
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
public void onPageSelected(int position) {
for (int i = 0; i & mDotsIV.size(); i++) {
if (i == position) {
mDotsIV.get(i).setImageResource(R.drawable.dot_focus);
mDotsIV.get(i).setImageResource(R.drawable.dot_blur);
public void onPageScrollStateChanged(int state) {
switch (state) {
//SCROLL_STATE_DRAGGING
isAutoPlay =
//SCROLL_STATE_SETTLING
isAutoPlay =
&&& 在以上代码的第10到16行，我们重写了onPageSelected方法，position参数表示当前Page的索引。这个方法中，我们设置当前图片对应的圆点图片为dot_focus，设置其他圆点的图片为dot_blur，这样用户就能知道当前的位置。在第21行到32行，我们重写了onPageScrollStateChanged方法，state参数代表了当前的“滚动状态，这个值为1表示当前用户正在”拖动“的过程中，因此要设置isAutoPlay为false；这个值为2表示用户松开了手，图片正在”滚动“中，这时我们就要把isAutoPlay设回默认值true，恢复自动播放。
&(3) 更进一步
&&& 有时候我们希望能够从最后一页直接“翻到”第一页，而这种行为默认不被PagerView所支持，要想实现这个行为，我们可以在PagerView中增加一些“辅助页”，并重写OnPageChangeLisener中的相关方法。然而我们在很多场景中只需要保持PagerView的默认行为就好，要注意增加任何功能都要考虑应用场景，避免画蛇添足。
以上就是本文的全部内容，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Android convinientbanner顶部广告轮播控件使用详解_网页漂亮网
您的位置： >
Android convinientbanner顶部广告轮播控件使用详解
字号：[ & & & & & &
本文实例为大家分享了convinientbanner顶部广告轮播控件的具体代码，供大家参考，具体内容如下
gradle中添加
compile 'com.bigkoo:convenientbanner:2.0.5'
&com.bigkoo.convenientbanner.ConvenientBanner
xmlns:app=&/apk/res-auto&
android:id=&@+id/convenientBanner&
android:layout_width=&match_parent&
android:layout_height=&200dp&
app:canLoop=&true&//是否循环
activity中
public class MainActivity extends AppCompatActivity {
private String[] images = {&http://img2./it/u=,&fm=21&gp=0.jpg&,
&//d/40.jpg&,
&/sqmy_.jpg&,
&//d/39.jpg&,
&/UploadFiles/659.jpg&,
&http://f./image/h%3D200/sign=a20cf0b4b0c/d058ccbf6ce5fdb479.jpg&,
&http://f./image/pic/item/09fa513df166c22dfba.jpg&
//轮播下面的小点
private int[] indicator={R.drawable.icon_selected,R.drawable.icon_unselected};
private ConvenientBanner convenientB
//图片加载地址的集合
private List&String&
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
convenientBanner = (ConvenientBanner) findViewById(R.id.convenientBanner);
bean= Arrays.asList(images);
convenientBanner.setPointViewVisible(true)
//设置小点
.setPageIndicator(indicator);
//允许手动轮播
convenientBanner.setManualPageable(true);
//设置自动轮播的时间
convenientBanner.startTurning(3000);
//设置点击事件
//泛型为具体实现类ImageLoaderHolder
convenientBanner.setPages(new CBViewHolderCreator&NetImageLoadHolder&() {
public NetImageLoadHolder createHolder() {
return new NetImageLoadHolder();
//设置每个pager的点击事件
convenientBanner.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(int position) {
Toast.makeText(MainActivity.this, &点击了&+convenientBanner.getCurrentItem(), Toast.LENGTH_SHORT).show();
* Created by Administrator on
* Holder的实现类,泛型为实体类
public class NetImageLoadHolder implements Holder&String&{
private ImageView image_
//可以是一个布局也可以是一个Imageview
public ImageView createView(Context context) {
image_lv=new ImageView(context);
image_lv.setScaleType(ImageView.ScaleType.FIT_XY);
return image_
public void UpdateUI(Context context, int position, String data) {
Glide.with(context).load(data).placeholder(R.mipmap.ic_launcher).into(image_lv);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持网页漂亮网。
本文移动端链接：
相关阅读：
本站已经安全运行:
创建百年品牌}