Android-自定义banner实现

惯例先上图：

可以看到这是一个轮播图，只不过我们以前在用的时候一般都是用ViewPager，用正常的ViewPager有几点坏处：

• 不能无限循环
• 不能控制自动播放

所以这就需要自己封装一个了，其实还是用的ViewPager，只不过更改了他的触摸事件并且设置了自动轮播的时间，然后自己写了一个PagerAdapter来实现无限轮播，最后下面的指示器和ViewPager、PagerAdapter封装到了一起，所以使用的时候很简单。只需要继承自BannerPagerAdapter，重写构造和setView()方法。然后在使用的时候调用方法即可，基本代码如下：

List<Integer> data = new ArrayList<>();
data.add(R.mipmap.a1);
data.add(R.mipmap.a2);
data.add(R.mipmap.a3);
data.add(R.mipmap.a4);


AdapterDemo ad = new AdapterDemo(this, data);

Banner banner = (Banner) findViewById(R.id.banner);

/**
 * 关于这里的设置参数问题,是需要这样使用的
 * 在设置了小圆点之后才能设置适配器
 * 因为只有在适配器里才会根据一共多少条数据来适配
 * 最后需要调用开始轮播
 * 个人建议在onPause()/onDestroy()方法中来停止 -- stopAutoPlay()
 */
banner.setDot(R.drawable.no_selected_dot, R.drawable.selected_dot).
    setDotGravity(Banner.CENTER).
    setAdapter(ad).
    setOnItemClickListener(new BannerPagerAdapter.onItemClickListener() {
        @Override
        public void onClick(int position) {
            Toast.makeText(MainActivity.this, "" + position, Toast.LENGTH_SHORT).show();
        }
    }).
    startAutoPlay(); 

下面是AdapterDemo的代码：

public class AdapterDemo extends BannerPagerAdapter {

    private Context mContext;
    private List<Integer> data;

    public AdapterDemo(Context context, List data) {
        super(context, data);
        mContext = context;
        this.data = data;
    }

    /**
     * 只需要重写构造和这个方法即可
     * 在这里可以设置自己的View,使用自己的图片加载库
     */
    @Override
    public View setView(int position) {
        View v = LayoutInflater.from(mContext).inflate(R.layout.test, null);
        ImageView iv = (ImageView) v.findViewById(R.id.iv);
        iv.setImageResource(data.get(position));
        return v;
    }
}

可以看的出来这里给调用者很大的空间来进行自己的操作，在setView中直接可以根据position来设置自己的View和数据，并且使用自己的图片加载库。

如果感兴趣的可以移步GitHub

---

下面开始说如何写

首先我们要确定一下这个banner有几个需要注意的点：

1. 无限轮播
2. 点击事件
3. 指示器
4. 指示器的滑动效果

无限轮播、点击事件

关于无限轮播，我参照的是任玉刚大神的博客，所以我也希望各位去看这个博客，也算是涨点人气，我这里就不写到底如何实现的了，各位可以查看我的代码

循环广告位组件的实现 -- 任玉刚

指示器、滑动效果

其实我写的时候有好多坑，但是写这篇文章的时候感觉都不是特别难的点（技术太菜）

关于指示器，其实现在大部分都是小圆点，这里我实现的思路是创建一个FrameLayout来添加ViewPager和指示器

但是可以看到，这里的指示器会有一个随着页面滑动而滑动的效果，这里就需要两层了，一个是包含未选中的，一个是包含了选中和未选中的（Group）

代码如下：

private void init() {
    mPager = new BannerViewPager(mContext);
    addView(mPager);
    /**
     * 实例化两个Group
     */
    mFrameLayout = new FrameLayout(mContext);
    mDotGroup = new LinearLayout(mContext);
    /**
     * 设置小圆点Group的方向为水平
     */
    mDotGroup.setOrientation(LinearLayout.HORIZONTAL);
    /**
     * 如果不设置则小圆点在中间
     */
    mDotGroup.setGravity(CENTER | Gravity.BOTTOM);
    /**
     * 两个Group的大小都为match_parent
     */
    LinearLayout.LayoutParams params =
            new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT);
    /**
     * 首先添加小圆点的Group
     */
    mFrameLayout.addView(mDotGroup, params);
    /**
     * 然后添加包含的Group（f**k,表达能力有限）
     */
    addView(mFrameLayout, params);

    /**
     * 添加到任务栈,当前所有任务完事之后添加已经选中的那个小圆点
     */
    post(new Runnable() {
        @Override
        public void run() {
            ImageView iv = new ImageView(mContext);
            iv.setImageDrawable(mContext.getResources().getDrawable(mDot[1]));
            FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            /**
             * 设置选中小圆点的左边距
             */
            params.leftMargin = (int) mDotGroup.getChildAt(0).getX();
            params.gravity = Gravity.BOTTOM;
            mFrameLayout.addView(iv, params);
            mSelectedDot = mFrameLayout.getChildAt(1);
        }
    });
    mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            /**
             * 获取到当前position
             */
            position %= mAdapter.size;
            /**
             * 判断如果当前的position不是最后一个,那么就设置偏移量来实现被选中小圆点的滑动效果
             */
            if (mSelectedDot != null && position != mAdapter.size -1) {
                float dx = mDotGroup.getChildAt(1).getX() - mDotGroup.getChildAt(0).getX();
                mSelectedDot.setTranslationX((position * dx) + positionOffset * dx);
            }
        }

        @Override
        public void onPageSelected(int position) {
            position %= mAdapter.size;
            /**
             * 如果已经是最后一个,那么则直接把小圆点定位到那,不然滑动效果会出错
             */
            if (mSelectedDot != null && position == mAdapter.size - 1) {
                float dx = mDotGroup.getChildAt(1).getX() - mDotGroup.getChildAt(0).getX();
                mSelectedDot.setTranslationX(position * dx);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

}

可以看到我们首先添加了ViewPager，然后我们添加了未选中指示器的Group，之后我们才添加的选中的指示器。在添加选中指示器的时候用了一个post，这个方法是把runnable里的代码添加到任务栈，前面的任务结束了这个任务才会执行，所以我们可以获取到第一个未选中小圆点的坐标，然后把选中指示器覆盖上去，后来我们移动的时候就直接移动选中的指示器就好了。

关于滑动指示器，其实就是用了一个setTranslationX()方法，这个方法可以虽然移动View的位置，但是没有真正的移动该View，所以我们在移动的时候根据position来计算，但是当移动到最后一个的时候就不应该用这个方法了，如果还用的话就会造成一种『出界』了的感觉，所以这里在最后一个的时候不进入方法。

有人应该会想到『在第一页的时候』，这里我们大家可以自己测试一下，当手指向右滑的时候，就已经是size-1页了，所以我们直接就用一个判断就够了

额，写的乱七八糟，但是代码会说话的~

还是那句话，感兴趣的请移步GitHub哟~

---

最后

爱生活，爱小丽，爱Android