Android广告位循环轮播图的实现

这几天想要实现一个广告位的循环轮播图，遇到了一些问题，现在已经成功解决了，所以还是想分享一下。

首先，循环轮播图是通过定时切换ViewPager页实现的，但是如果按照常规的viewpager实现，则会遇到以下几个问题：

     1. 刚一打开界面的时候，ViewPager是不能向左滑动的。

   2.当从最后一页（假设只有四页）切换回第一页时，在视觉上会快速的向左划过第三页、第二页，最后回到第一页（这显然不是我们想看到的效果）。

下面我们来具体实现一下（需要注意的地方我就在代码中注释了）：

①首先是xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.tangao.test.activtiy.LunBoTuActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="180dp">

        <android.support.v4.view.ViewPager
            android:id="@+id/main_tranFragment_topViewPager"
            android:layout_width="match_parent"
            android:layout_height="180dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/main_tranF_topVP_point1"
                android:layout_width="13dp"
                android:layout_height="13dp"
                android:padding="5dp"
                android:background="@drawable/viewpager_point_selected" />

            <ImageView
                android:id="@+id/main_tranF_topVP_point2"
                android:layout_width="13dp"
                android:layout_height="13dp"
                android:padding="5dp"
                android:background="@drawable/viewpager_point" />

            <ImageView
                android:id="@+id/main_tranF_topVP_point3"
                android:layout_width="13dp"
                android:layout_height="13dp"
                android:padding="5dp"
                android:background="@drawable/viewpager_point" />

            <ImageView
                android:id="@+id/main_tranF_topVP_point4"
                android:layout_width="13dp"
                android:layout_height="13dp"
                android:padding="5dp"
                android:background="@drawable/viewpager_point" />
        </LinearLayout>

    </FrameLayout>

</LinearLayout>

②Adapter部分

public class MyViewPagerAdapter extends PagerAdapter {

    private Context context;
    private List<ImageView> imageViewList;

    public MyViewPagerAdapter(Context context, List<ImageView> imageViewList){
        this.context = context;
        this.imageViewList = imageViewList;
    }

    @Override
    public int getCount() {
        /**
         * 这个方法的返回值是ViewPager的页数，不能返回imageViewList.size(),
         * 而是应该返回一个很大的值，这里的Integer.MAX_VALUE说明这个viewpager一共有Integer.MAX_VALUE页
         * 而这Integer.MAX_VALUE页就是由imageView中的各页 循环排列 而成的，如下：
         * 0 1 2 3 0 1 2 3 0 1 2 3 ...
         */

        return Integer.MAX_VALUE;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        /**
         * position是viewpager的页下标，取值范围为 0~getCount(),
         * 所以要想根据position取imageViewList里的东西，必须先取模
         */
        int index = position % imageViewList.size();
        container.addView(imageViewList.get(index));
        return imageViewList.get(index);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        /**
         * position须取模，理由同上
         */
        container.removeView(imageViewList.get(position % imageViewList.size()));
    }



    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
}

③代码实现部分

public class LunBoTuActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager mViewPager;
    //viewpager显示的原图ID
    private int[] imageViewIds = {R.drawable.ic_launcher, R.drawable.qq_round,
            R.drawable.weixin_round, R.drawable.weibo_round};
    //要显示的viewpager页,图片转换而来的View们
    private List<ImageView> imageViewList = new ArrayList<ImageView>();
    //viewpager页对应的小圆点（view对象）
    private List<ImageView> dots = new ArrayList<ImageView>();

    //viewpager当前页的下标，千万别赋值为0！！！否则我们下面使用这个初值后，
    //出来的效果就是我们上面说到的第一个问题（不能向左滑）
    private int currentDotPosition = 400;//初始值还应该是imageViewList.size()的整数倍

    //用作定时触发
    private ScheduledExecutorService scheduleExecutorService;
    //    android.os中的Handler，注意！
    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            System.out.println("Handler!");
            super.handleMessage(msg);
            mViewPager.setCurrentItem(currentDotPosition);//currentDotPosition取值范围为0~getCount()
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_lun_bo_tu);

        initValues();
        initView();
    }

    private void initValues() {
        //添加要显示的viewpager页（view对象）
        for (int i = 0; i < imageViewIds.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(imageViewIds[i]);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageViewList.add(imageView);
        }

        //获取xml中的viewpager小圆点view对象
        dots.add((ImageView) findViewById(R.id.main_tranF_topVP_point1));
        dots.add((ImageView) findViewById(R.id.main_tranF_topVP_point2));
        dots.add((ImageView) findViewById(R.id.main_tranF_topVP_point3));
        dots.add((ImageView) findViewById(R.id.main_tranF_topVP_point4));

    }

    private void initView() {

        mViewPager = (ViewPager) findViewById(R.id.main_tranFragment_topViewPager);
        mViewPager.setAdapter(new MyViewPagerAdapter(this, imageViewList));//调用一次getCount()
        /**
         * 这里先要setCurrent一次，否则运行会有问题
         * 从这里可以看出，如果我们上面的currentDotPosition设置成0的话，运行后一开始便不能向左滑动
         * 如果设置成400,开始运行后就可以向左滑动400次（我还真试过！滑完了之后想，为什么我不先设置成10再试呢）
         */

        mViewPager.setCurrentItem(currentDotPosition);//调用一次getCount()
        mViewPager.addOnPageChangeListener(this);调用一次getCount()
    }


    @Override
    public void onStart() {
        /**
         * Activity呈现出来的时候，开始计时，触发
         */
        scheduleExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduleExecutorService.scheduleAtFixedRate(new Runnable() {
            @Override
            public void run() {
                currentDotPosition = currentDotPosition + 1;
                mHandler.obtainMessage().sendToTarget();//通过handler通知主UI更新界面
            }
        }, 1, 3, TimeUnit.SECONDS);//最开始延时1s，而后每3s触发一次
        super.onStart();
    }

    @Override
    public void onStop() {
        //Activity消失时，停止计时触发
        scheduleExecutorService.shutdown();
        super.onStop();

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    /**
     * 监听到页的切换后，改变小圆点的亮度
     *
     * @param position
     */
    @Override
    public void onPageSelected(int position) {
        //position与setCurrentItem()中的参数相等，且取值都在0~getCount()--(integer.MAX_VALUE);
        //改变小圆点亮度
        currentDotPosition = position;//用手拨动时，需要给currentDotPosition赋值
        for (int i = 0; i < dots.size(); i++) {
            if ((position % dots.size()) == i) {
                dots.get(i).setBackgroundResource(R.drawable.viewpager_point_selected);
            } else {
                dots.get(i).setBackgroundResource(R.drawable.viewpager_point);
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

如此便大功告成了，以上代码可直接拷贝运行看效果（图片什么的自己放吧）。