ViewPager实现图片无限轮播（下）

上一篇写的是如何实现viewPager无限轮播效果（手动滑动）
以及解释了ViewPager在进行显示View时容易出现的Bug

在最后演示了

1.底部指示器效果
2.自动轮播效果

这一篇就来写写上面的两个功能是如何实现的

添加底部指示器效果
这个效果是当图片滑动的时候底部的小圆圈也会随着滑动而改变

1.设置指示器布局

在ViewPager的底部设置一个线性布局，线性布局中添加三个ImageView，就是三个小圆圈的样子

<RelativeLayout        android:layout_width="match_parent"        android:layout_height="140dp">        <android.support.v4.view.ViewPager            android:layout_width="match_parent"            android:layout_height="140dp"            android:id="@+id/main_view_pager"            ></android.support.v4.view.ViewPager>        <!--图片轮播指示器-->        <LinearLayout            android:id="@+id/main_ll"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:orientation="horizontal"            android:layout_alignParentBottom="true"            android:layout_centerHorizontal="true"            android:layout_marginBottom="20dp"            ></LinearLayout>        </RelativeLayout>>

ViewPager和线性布局的指示器是重合的，所以两个的根布局为 RelativeLayout
因为也许我们并不知道我们的轮播器中需要轮播几张图片，所以线性布局的小圆圈是需要动态添加的

但是可以先将小圆圈的样子做出来（这个圆圈是自己画出来的）

<?xml version="1.0" encoding="utf-8"?><ImageView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="10dp" android:layout_height="10dp"    android:background="@drawable/banner_point"    android:layout_margin="10dp"    ></ImageView>

上面是向线性布局动态添加的小圆圈的样子，是一个ImageView

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_selected="true">    <shape android:shape="oval">        <solid            android:color="@android:color/holo_red_light"/>        <stroke            android:width="1px"            android:color="@android:color/black"            />    </shape></item>    <item android:state_selected="false">        <shape android:shape="oval">            <solid                android:color="@android:color/white"/>            <stroke                android:width="1px"                android:color="@android:color/black"                />        </shape>    </item></selector>

select是我对小圆圈样子的绘制，不懂select的可以直接将这些复制到drawable目录下，我取名为
banner_point.xml

这样指示器的位置和小圆圈显示的样子就写完了

2.将小圆圈动态添加到线性布局当中

private void initPointData() {        //images是一个数组，放置轮播的图片资源地址        int len = images.length;        //判断一共几个数据就添加几个小圆点        for (int i = 0; i < len; i++) {        //得到小圆点对象            ImageView imageView = (ImageView) LayoutInflater.from(SecondActivity.this).inflate(R.layout.view_banner_point, null);            imageView.setImageResource(R.drawable.banner_point);            //设置添加ImageView的宽高(像素) 在xml文件中虽然定义过但是不出现效果，需要在java文件中重新定义            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(20, 20);            //设置每个小圆圈的左右间距，会更加美观            lp.leftMargin = 10;            lp.rightMargin = 10;            imageView.setLayoutParams(lp);            //将这个小圆圈View添加到线性布局当中（ll为线性布局的对象）            ll.addView(imageView);        }    }

布局添加完了，下面就要添加对ViewPager滑动改变的监听，并改变小圆圈的颜色

3.根据滑动的改变，改变小圆圈的颜色

根据当前显示的position,改变小圆圈颜色的方法

//选中某一个指示器    private void setPoint(int position) {        int len = images.length;        for (int i = 0; i < len; i++) {            //选择线性布局中第i个小圆圈            ImageView imageView = (ImageView) ll.getChildAt(i);            //如果选择的小圆圈和当前显示的View的position是吻合的            if (i ==position) {                //将第i个圆圈设成被选中状态                imageView.setSelected(true);            } else {                imageView.setSelected(false);            }        }    }

在ViewPager的页面监听事件中，根据页面的切换，更改小圆圈的颜色

//viewPager的监听事件    private void initEvent() {        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            //页面在滚动，页面的滑动信息            //positionOffset 滑动的百分比  positionOffsetPixels滑动的像素点            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                //修改小圆点显示的位置                setPoint(position % images.length);            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }

通过上面的步骤就可以实现手动滑动ViewPager时，指示器的改变

自动轮播图片效果

实现每两秒钟图片自动切换

1.开启子线程，睡眠时间为两秒，两秒之后切换ViewPager
2.实例化一个Handler，在handler中更新UI

1.开启子线程，每隔两秒钟通知handler更新UI

//两秒钟切换一次界面    private class TimerThread extends Thread{        @Override        public void run() {            super.run();            //判断此界面是否存在            while (isAlive){                try {                    Thread.sleep(1000*2);                    if (isAlive) {                    //判断线程是否停止工作                        if (isWorking) {                            handler.sendEmptyMessage(1);                        }                    }                } catch (InterruptedException e) {                    e.printStackTrace();                }            }        }    }

2.实例化Handler 更新UI

private Handler handler=new Handler(){        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            if (msg.what==1){                //切换到下一页                viewPager.setCurrentItem(viewPager.getCurrentItem()+1);            }        }    };

开启线程

new TimerThread().start();

上面有两个变量

isAlive
因为此子线程是一个无限自动轮播，无限循环，当退出此界面时，为了防止内存泄漏，要将此线程中的while无限循环结束
isWorking
当手指进行滑动的时候线程的自动轮播要停止，防止出现手指滑动距离小（不足以翻页时），子线程就将ViewPager自动轮播到下一页

下面是当程序退出时，while循环也要关闭，子线程停止操作

@Override    protected void onDestroy() {        super.onDestroy();        isAlive=false;    }

下面是ViewPager监听事件（initEvent()方法）中的判断用户点击状态的事件

@Override            public void onPageScrollStateChanged(int state) {                //处于空闲状态，线程工作                if(state==ViewPager.SCROLL_STATE_IDLE){                    isWorking=true;                    //手动进行拖拽状态                }else if(state==ViewPager.SCROLL_STATE_DRAGGING){                    //线程停止轮播（并没有将线程杀死）                    isWorking=false;                }

最终实现效果

最后放上此工程的源码地址

https://github.com/XuDaHaoRen/ViewPagerDemo