Android从零开搞系列：自定义View（11）使用ViewPager打造轮播广告条

转载请注意：http://blog.youkuaiyun.com/wjzj000/article/details/70215014

本菜开源的一个自己写的Demo，希望能给Androider们有所帮助，水平有限，见谅见谅…
https://github.com/zhiaixinyang/PersonalCollect （拆解GitHub上的优秀框架于一体，全部拆离不含任何额外的库导入）
https://github.com/zhiaixinyang/MyFirstApp（Retrofit+RxJava+MVP）

写在前面

最近非常的内疚以及深深的自责，时隔数个星期也没有更新一篇博客。之前信誓旦旦的立下的誓言，到如今啪啪的打…啪啪，啪啪啪，春天到了，在这片一望无际的非洲大草原上，又到了动物交配的季节。
最近刚刚忙完手头上的工作，必须要妥妥的写一篇博客。那么接下来，起床，写博客！我总是躲在梦与季节的深处，听花与黑夜唱尽梦魇，唱尽繁华，唱断所有记忆的来路。

先看一下本次博客的效果：

先剧透：效果实现原理比较低端，不涉及自定义View直接通过使用ViewPager以及动态添加View的效果来实现效果。

开始

先上布局效果，我相信贴出布局代码，各位看客就会豁然开朗….这么简单无聊的原理。到底是道德的沦丧还是人性的扭曲才能写出这么无聊的东西…莫慌，继续，继续下去你会发现后边的更无聊。

布局效果：

布局代码：

    <android.support.v4.view.ViewPager
        android:layout_below="@+id/tv_text"
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="210dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/viewPager"
        android:background="#55000000"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:padding="5dp">
        <TextView
            android:id="@+id/tv_text_ad"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="这里是广告标题"
            android:textColor="#ffffff"
            android:textSize="16sp"/>
        <!-- 动态添加小圆点，用一个水平的线性布局 -->
        <LinearLayout
            android:id="@+id/ll_dots"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/round_black"
            android:orientation="horizontal"/>
    </LinearLayout>

很简单，就是一个ViewPager底部加一条LinearLayout作为广告条的布局。

初始化圆点以及一些数据

        //对应每个页面的广告内容
        titles = new String[]{"广告描述1", "广告描述2", "广告描述3", "广告描述4", "广告描述5"};
        //用于显示广告图片
        imageViewList = new ArrayList<>();
        //模拟广告资源
        int imgIds[] = {R.drawable.pintu, R.drawable.pintu, R.drawable.pintu,
                R.drawable.pintu, R.drawable.pintu};
        ImageView iv;
        View dotView;

        for (int i = 0; i < imgIds.length; i++) {
            iv = new ImageView(App.getInstance().getContext());
            iv.setBackgroundResource(imgIds[i]);
            imageViewList.add(iv);
            //准备小圆点的数据
            dotView = new View(App.getInstance().getContext());
            dotView.setBackgroundResource(R.drawable.selector_dot);
            //设置小圆点的宽和高
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(DpUtils.dp2px(10), DpUtils.dp2px(10));
            //设置每个小圆点之间距离
            if (i != 0) {
                params.leftMargin = DpUtils.dp2px(10);
            }
            dotView.setLayoutParams(params);
            //设置小圆点默认状态
            dotView.setEnabled(false);
            //把dotview加入到线性布局中
            llDots.addView(dotView);
        }
        LinearLayout.LayoutParams paramsllDots = new LinearLayout.LayoutParams(DpUtils.dp2px(10)*11, DpUtils.dp2px(18));
        llDots.setLayoutParams(paramsllDots);
        llDots.setGravity(Gravity.CENTER);`

接下来的内容是为ViewPager写Adapter；当然，这些都是套路性的东西。实现接口，按照需求重写方法。这里我们需要重点关注的是怎么做到无限轮播的效果。

Adapter

public class AdViewPagerAdapter  extends PagerAdapter {
    private List<ImageView> datas;

    public AdViewPagerAdapter(List<ImageView> datas) {
        this.datas = datas;
    }

    @Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }

    //是否复用当前view对象
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    //初始化每个条目要显示的内容
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //拿着position位置 % 集合.size（无限轮播）
        int newposition = position % datas.size();
        //获取到条目要显示的内容imageview
        ImageView iv = datas.get(newposition);
        //要把 iv加入到 container 中
        container.addView(iv);
        return iv;
    }

    //销毁条目
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //移除条目
        container.removeView((View) object);
    }
}

初始化

首先我们实现ViewPager.OnPageChangeListener接口，重写里边的方法。这里我们需要的是点击效果，一次要重点关注onPageSelected方法。

        viewPager.setAdapter(new AdViewPagerAdapter(imageViewList));
        viewPager.setPageTransformer(true,new ZoomTransformation());
        //设置当前viewpager要显示第几个条目
        int item = Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % imageViewList.size());
        viewPager.setCurrentItem(item);

        //把第一个小圆点设置为白色，显示第一个textview内容
        llDots.getChildAt(previousPosition).setEnabled(true);
        tvTextAd.setText(titles[previousPosition]);
        //设置viewpager滑动的监听事件
        viewPager.addOnPageChangeListener(this);

onPageSelected(int position)

    //当新的页面被选中的时候调用
    @Override
    public void onPageSelected(int position) {
        //拿着position位置 % 集合.size
        int newposition = position % imageViewList.size();
        //取出postion位置的小圆点 设置为true
        llDots.getChildAt(newposition).setEnabled(true);
        //把一个小圆点设置为false
        llDots.getChildAt(previousPosition).setEnabled(false);
        tvTextAd.setText(titles[newposition]);
        previousPosition = newposition;
    }

OK,但这里。一个可以滑动的广告轮播条就实现了。当然我们希望它可以自动轮播。也很简单，这里我们是一个男人看了会沉默，女人看了会流泪的方式：Thread+Handler。

自动轮播

    //实现自动切换的功能
    new Thread() {
        public void run() {
            while (!isSwitchPager) {
                SystemClock.sleep(3000);
                //拿着我们创建的handler 发消息
                handler.sendEmptyMessage(0);
            }
        }
    }.start();

    //通过Handler实现自动轮播
    private Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            //更新当前viewpager的 要显示的当前条目
            viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
        }
    };

在沉默中流完泪我们必须要说这么一个广告轮播条的效果就完成了。没错，真的就是这样….

尾声

这篇博客的实现原理的确非常的简单，没有什么特别的用法。不过简单正是它最大的武器，因为好理解，所以我们可以省下大量的时间去观摩日语初级教程，摇杆驱动教程等这种蕴含着人类起源这种至高无上的哲学问题。

最后推荐俩个开源项目：老铁们，让我们一个孜然一个微辣，来瓶雪花，勇闯天涯！

希望各位看官可以star我的GitHub，三叩九拜，满地打滚求star：
https://github.com/zhiaixinyang/PersonalCollect
https://github.com/zhiaixinyang/MyFirstApp