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

转载请注意：http://blog.csdn.net/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