首页轮播Banner

昨天逛了一下达哥的博客，发现了篇好文章：

手把手教你用ViewPager自定义实现Banner轮播

那么为什么还要写这篇文章呢，是因为达哥这篇只是实现了轮播的核心功能，并没有添加小圆点指示器，为了让你们能更早下班，所以…

先说一下小圆点的实现方式：

• 布局文件使用水平方向的LinearLayout 根据接口轮播数据添加小圆点.
• 创建小圆点背景selector，通过state_enabled设置不同颜色.
• 添加滑动监听器，更改小圆点的enabled实现背景切换.

代码主要看一下接口获取到数据后怎么操作，Demo直接使用假数据替代一下：

private void loadBannerData() {
    // 假数据测试
    List<String> list = new ArrayList<>();
    list.add("http://pic2.ooopic.com/11/73/27/94bOOOPIC7c_1024.jpg");
    list.add("http://img6.pplive.cn/2012/05/22/16095665041.jpg");
    list.add("http://img.dgtle.com/portal/201305/17/132941q00zl0ar66t10n65.jpg");
    list.add("http://img.zcool.cn/community/01b0ed555b4bef0000009af0b778ab.jpg");
    list.add("http://pic.58pic.com/58pic/13/57/38/52k58PICGqB_1024.jpg");

    // 设置LayoutParams是为了添加外边距.
    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT,
            ViewGroup.LayoutParams.WRAP_CONTENT);
    lp.rightMargin = 10;

    // 我这里写这行是多余的，但是如果你们多次调用接口不清除就会出现许多小圆点
    // 例如首页是列表，banner只是个header，多次刷新就会出现，或者接口调用写在onResume里面，等等。
    indicatorLay.removeAllViews();

    // for循环添加小圆点。
    for (int i = 0; i < list.size(); i++) {
        ImageView imageView = new ImageView(this);
        imageView.setBackgroundResource(R.drawable.dot_bg_selector);
        imageView.setEnabled(false);
        imageView.setLayoutParams(lp);
        indicatorLay.addView(imageView);
    }
    // 默认选中第一个小圆点
    View view = indicatorLay.getChildAt(0);
    if (view != null)
        view.setEnabled(true);

    pagerListener.setDotChangeData(list, indicatorLay);
    bannerAdapter.addUrlList(list);
    // 开启轮播
    autoViewPager.start();
}

最后一定要记得在onDestroy()停止轮播。

@Override protected void onDestroy() {
    super.onDestroy();
    // 停止轮播
    autoViewPager.stop();
}

demo以简单可套用为主，相信加标题什么的对于你们来说也是小菜一碟的啦，最后给出demo的效果图和 github地址：

完成了，收工(⊜‿⊜)