ViewPager实现图片轮播，下方带小点显示当前位置

先来张效果图

还是从布局文件开始说，使用到的布局文件就一个content_main.xml，因为小点图片是覆盖在大图片的上面的，所以这里要用Framelayout，包含了两个linearLayout，一个放置大图片，一个放置小图片的，这里在代码中动态添加，具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main" tools:context=".MainActivity">

    <TextView
        android:id="@+id/test_hello"
        android:text="点击切换" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/newsHead_layout"/>
    <FrameLayout
        android:id="@+id/newsHead_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/view_pager_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        </LinearLayout>

        <LinearLayout
            android:id="@+id/news_headView_dot"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:layout_gravity="bottom|right"
            android:layout_marginRight="10dp"
            android:gravity="center"
            android:orientation="horizontal"></LinearLayout>
    </FrameLayout>
</RelativeLayout>

对应的类为MainActivity，具体代码如下：

public class MainActivity extends AppCompatActivity implements View.OnClickListener,
        ListView.OnItemClickListener{
    private ImageHandler handler = new ImageHandler(new WeakReference<MainActivity>(this));
    private ViewPager vp;
    private List<View> ivs;//大图集合
    private List<ImageView> dotIvs;//小点集合
    private int currentPosition = 0;// 记录当前图片的位置

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.content_main);
        ivs = new ArrayList<View>();
        dotIvs = new ArrayList<ImageView>();
        initHeadView();
        TextView tvHello = (TextView)findViewById(R.id.test_hello);
        tvHello.setOnClickListener(this);

    }
    private void initHeadView() {
        LinearLayout pagerLayout = (LinearLayout) findViewById(R.id.view_pager_content);
        vp = new ViewPager(this);
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        //设置viewpager的宽高，高是宽度的特定比例，我的手机宽是720的，做了下适配
        vp.setLayoutParams(new LinearLayout.LayoutParams(dm.widthPixels, dm.widthPixels * 462 / 720));
        pagerLayout.addView(vp);

        ivs.clear();
        dotIvs.clear();
        //这里有三张图片，所以i<3
        for (int i = 0; i < 3; i++) {
            ImageView iv = new ImageView(this);
            iv.setId(i);// 处理其点击事件
            iv.setOnClickListener(this);

            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            // manager.bindBitmap(iv, mainNews.get(i).getPicUrl());
            // iv.setBackgroundResource(R.id.main_logo);
            if (i == 0) {
                iv.setImageResource(R.drawable.rolling1);
            } else if (i == 1) {
                iv.setImageResource(R.drawable.rolling2);
            } else if (i == 2) {
                iv.setImageResource(R.drawable.rolling3);
            }
            ivs.add(iv);// 加入大图集合
            ImageView dotIv = new ImageView(this);
            dotIv.setImageResource(R.drawable.s_banner_unselect);
            dotIv.setPadding(5, 0, 5, 0);//设置小点的间距left top right bottom
            dotIvs.add(dotIv);// 加入小点集合
        }

        //小点所在的linearlayout
        LinearLayout dotsLl = (LinearLayout) findViewById(R.id.news_headView_dot);
        dotsLl.removeAllViews();

        for (int i = 0; i < dotIvs.size(); i++) {
            dotsLl.addView(dotIvs.get(i));
        }
        // TODO Auto-generated method stub
        if (ivs.size() == 0) {
            return;
        }
        vp.setAdapter(new FVpAdapter());
//        vp.setCurrentItem(Integer.MAX_VALUE/2);//默认在中间，使用户看不到边界
        //开始轮播效果
        handler.sendEmptyMessageDelayed(ImageHandler.MSG_UPDATE_IMAGE, ImageHandler.MSG_DELAY);
        vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                // TODO Auto-generated method stub
//				 Toast.makeText(MainSlidingMenuActivity.this, "这是第" + arg0 % dotIvs.size() + "张图片", Toast.LENGTH_SHORT).show();
                currentPosition = arg0;
                handler.sendMessage(Message.obtain(handler, ImageHandler.MSG_PAGE_CHANGED, arg0, 0));
                //
                selector(currentPosition);
            }
            //覆写该方法实现轮播效果的暂停和恢复
            @Override
            public void onPageScrollStateChanged(int arg0) {
                switch (arg0) {
                    case ViewPager.SCROLL_STATE_DRAGGING:
                        handler.sendEmptyMessage(ImageHandler.MSG_KEEP_SILENT);
                        break;
                    case ViewPager.SCROLL_STATE_IDLE:
                        handler.sendEmptyMessageDelayed(ImageHandler.MSG_UPDATE_IMAGE, ImageHandler.MSG_DELAY);
                        break;
                    default:
                        break;
                }

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

        });

        // 更改viewPager的属性
        try {
            Field mScroller;
            mScroller = ViewPager.class.getDeclaredField("mScroller");
            mScroller.setAccessible(true);

           FixedSpeedScroller scroller = new FixedSpeedScroller(
                    vp.getContext());// 调用这个构造方法即可
            // scroller.setFixedDuration(5000);
            mScroller.set(vp, scroller);
        } catch (NoSuchFieldException e) {
        } catch (IllegalArgumentException e) {
        } catch (IllegalAccessException e) {
        }

        vp.setCurrentItem(currentPosition);// 从这个位置开始前后都可以无限滑动
        vp.getNextFocusUpId();
        selector(currentPosition);

    }
    //选择小点的方法
    private void selector(int index) {
        if (dotIvs.size() == 0) {
            return;

        }
        index = index % dotIvs.size();
        int len = dotIvs.size();
        for (int i = 0; i < len; i++) {
            if (index == i) {
                dotIvs.get(i).setImageResource(R.drawable.s_banner_select);
            } else {
                dotIvs.get(i).setImageResource(R.drawable.s_banner_unselect);
            }
        }
    }


    @Override
    public void onClick(View v) {
            switch (v.getId()){
                case R.id.test_hello:
                    Toast.makeText(MainActivity.this, "hello", Toast.LENGTH_SHORT).show();
                    int count = ivs.size();
                    //设置点击切换，如果到头则重新开始
                    int item = currentPosition+1 == count? 0 : currentPosition+1;
                    vp.setCurrentItem(item,true);
                    break;
            }
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

    }

    class FVpAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            // return ivs.size();
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            // TODO Auto-generated method stub
            return arg0 == arg1;
        }

        @Override
        public void destroyItem(View arg0, int arg1, Object arg2) {
            // TODO Auto-generated method stub
        //不把划过去的View清空，否则再往回滑的话会变空白的View
			//((ViewPager) arg0).removeView(ivs.get(arg1 % ivs.size()));
        }

        @Override
        public Object instantiateItem(View arg0, int arg1) {
            // TODO Auto-generated method stub

            try {
                // ((ViewPager) arg0).addView(list.get(arg1),0);
//                ((ViewPager) arg0).removeView(ivs.get(arg1 % ivs.size()));
                ((ViewPager) arg0)
                        .addView(ivs.get(arg1 % ivs.size()));
            } catch (Exception e) {
                // TODO: handle exception
                e.printStackTrace();
            }

            return ivs.get(arg1 % ivs.size());

        }

    }
    // 自定义scroller更改viewPager默认的切换时间
    class FixedSpeedScroller extends Scroller {
        //切换一秒钟
        private int mDuration = 1000;

        public FixedSpeedScroller(Context context) {
            super(context);
        }

        public FixedSpeedScroller(Context context, Interpolator interpolator) {
            super(context, interpolator);
        }

        @Override
        public void startScroll(int startX, int startY, int dx, int dy,
                                int duration) {
            // Ignore received duration, use fixed one instead
            super.startScroll(startX, startY, dx, dy, mDuration);
        }

        @Override
        public void startScroll(int startX, int startY, int dx, int dy) {
            // Ignore received duration, use fixed one instead
            super.startScroll(startX, startY, dx, dy, mDuration);
        }
    }

    private static class ImageHandler extends Handler{
        /**
         * 请求更新显示的View。
         */
        protected static final int MSG_UPDATE_IMAGE  = 1;
        /**
         * 请求暂停轮播。
         */
        protected static final int MSG_KEEP_SILENT   = 2;
        /**
         * 请求恢复轮播。
         */
        protected static final int MSG_BREAK_SILENT  = 3;
        /**
         * 记录最新的页号，当用户手动滑动时需要记录新页号，否则会使轮播的页面出错。
         * 例如当前如果在第一页，本来准备播放的是第二页，而这时候用户滑动到了末页，
         * 则应该播放的是第一页，如果继续按照原来的第二页播放，则逻辑上有问题。
         */
        protected static final int MSG_PAGE_CHANGED  = 4;

        //轮播间隔时间
        protected static final long MSG_DELAY = 3000;

        //使用弱引用避免Handler泄露.这里的泛型参数可以不是Activity，也可以是Fragment等
        private WeakReference<MainActivity> weakReference;
        private int currentItem = 0;

        protected ImageHandler(WeakReference<MainActivity> wk){
            weakReference = wk;
        }

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            MainActivity activity = weakReference.get();
            if (activity==null){
                //Activity已经回收，无需再处理UI了
                return ;
            }
            //检查消息队列并移除未发送的消息，这主要是避免在复杂环境下消息出现重复等问题。
            if (activity.handler.hasMessages(MSG_UPDATE_IMAGE)){
                //次句不加，更换变得很不稳定
                activity.handler.removeMessages(MSG_UPDATE_IMAGE);
            }
            switch (msg.what) {
                case MSG_UPDATE_IMAGE:
                    currentItem++;
                    activity.vp.setCurrentItem(currentItem);
                    //准备下次播放
                    activity.handler.sendEmptyMessageDelayed(MSG_UPDATE_IMAGE, MSG_DELAY);
                    break;
                case MSG_KEEP_SILENT:
                    //只要不发送消息就暂停了
                    break;
                case MSG_BREAK_SILENT:
                    activity.handler.sendEmptyMessageDelayed(MSG_UPDATE_IMAGE, MSG_DELAY);
                    break;
                case MSG_PAGE_CHANGED:
                    //记录当前的页号，避免播放的时候页面显示不正确。
                    currentItem = msg.arg1;
                    break;
                default:
                    break;
            }
        }
    }


}

代码中注释已经很详细了，这里就不在说明，大家有问题的可以给我留言
源码下载