Android自定义控件-仿魅族Banner 自动轮播 无限轮播

自定义ViewPager实现魅族Banner效果

这个效果是在看过鸿洋老师的公众号文章后自己实现的效果。也推荐大家关注鸿洋公众号，每天都能学到新的知识，非常牛逼。

---

先贴出魅族应用的Banner看看效果

再看看传统的Banner效果

是不是一眼就能看出区别了呢，当然，这种效果喜不喜欢是因人而异的，感觉还是挺不错的。那么仿照这样的BannerView自己实现，看下最终效果图：

最终效果图

由于录制的原因看起来有点卡 ，真实效果肯定不会这样的。

实现思路

当我第一次看到的时候我也感觉这种效果不是那么简单实现的，可看完鸿洋老师的文章之后，真的是，当然也是因为鸿洋老师说的详细，自己还有很长的路要走^_^

魅族应用的这种BannerView与传统的Banner区别就在他能在一个页面显示多个页面的数据，关键就是要实现这样的效果.

ViewGroup中定义了一个clipChildren属性默认值为true，意思就是说子View的大小只能在父View规定的大小范围之内，多出的部分就会被裁剪。

理解了这个就简单了，只要将ViewPager的父控件的clipChildren的值为false就可以实现魅族BannerView的效果了：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layerType="hardware"
    android:clipChildren="false"
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
       />
</RelativeLayout>

我们观察到显示前后页面的图像大小要比当前页要小一点，这又是怎么实现的呢？

这里就需要用到ViewPager.PageTransformer接口：

这个接口是用于ViewPager页面的切换动画，他的功能很强大，他只有一个方法void transformPage(View page, float position);记录了ViewPager滑动过程中各个View的位置变化。
position的变化区间为：[-Infinity，1)、[-1，1]、(1，Infinity);

1. [-Infinity，1)：当前View在屏幕之外。
2. [-1，1]：这个区间是我们操作当前View的区间

3. (1，Infinity):已经在屏幕之外

   
   MIN_SCALF就是前后页面的显示的尺寸。

在测试过程中还发现了个问题，就是刚进入页面的时候会出现当前View的下一个页面不缩松比例的情况，设OffscreenPageLimit（缓存的页面数）为2以上就可以了。
setOffscreenPageLimit（int limit） ：设置ViewPager的前后缓存页面数。意思就是说你当前处在ViewPager的哪个页面，他会自动把之后的limit个页面的数据都缓存下来。也是为了增强用户体验。
官方设置limit的最小值为1。如果说不想用这个缓存功能，也就是实现Viewpager 的懒加载、这可能就要修改她的源码，而且还必须是要低版本的v4包才可以修改。

到这里就基本完成了功能了，加上了自动轮播，无限轮播。以下为全部代码：

    private Handler handler = new Handler() {
        @Override
        public void handleMessage (Message msg) {
            super.handleMessage(msg);
            mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);
        }
    };

    @Override
    protected void onCreate (Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);

        initData();
        initListener();
        startAutoPlay();
    }

    /**
     * 自动播放轮播图
     */
    private void startAutoPlay () {
       Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run () {
               handler.sendEmptyMessage(0);
            }
        }, 1000, 1000 * 5);
    }

    /**
     * 初始化事件监听
     */
    private void initListener () {
        mViewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
            @Override
            public void transformPage (View page, float position) {
                if (position < -1) {
                    page.setScaleY(MIN_SCALF);
                } else if (position <= 1) {
                    float scale = Math.max(MIN_SCALF, 1 - Math.abs(position));
                    page.setScaleY(scale);
                } else {
                    page.setScaleY(MIN_SCALF);
                }
            }
        }, View.LAYER_TYPE_NONE);
    }

    /**
     * 初始化图片信息
     */
    private void initImage () {
        imgs[0] = BitmapFactory.decodeResource(getResources(), R.drawable.home01);
        imgs[1] = BitmapFactory.decodeResource(getResources(), R.drawable.home02);
        imgs[2] = BitmapFactory.decodeResource(getResources(), R.drawable.home03);
        imgs[3] = BitmapFactory.decodeResource(getResources(), R.drawable.home04);
        imgs[4] = BitmapFactory.decodeResource(getResources(), R.drawable.home05);
        imgs[5] = BitmapFactory.decodeResource(getResources(), R.drawable.home06);
        imgs[6] = BitmapFactory.decodeResource(getResources(), R.drawable.home07);
        imgs[7] = BitmapFactory.decodeResource(getResources(), R.drawable.home08);
    }

    /**
     * 设置数据
     */
    private void initData () {
        initImage();
        datas = new ArrayList<>();
        //Bitmap bit = BitmapFactory.dec
        for (int i = 0; i < imgs.length; i++) {
            ImageView img = new ImageView(this);
            img.setImageBitmap(imgs[i]);
            img.setScaleType(ImageView.ScaleType.FIT_XY);
            datas.add(img);
        }
        mViewPager.setAdapter(new MyPagerAdapter(datas));
        //设置ViewPager的前后缓存页面数
        mViewPager.setOffscreenPageLimit(2);
        //设置起始位置
     mViewPager.setCurrentItem(1000 - 1000 % datas.size());
    }
}

public class MyPagerAdapter extends PagerAdapter {
    private List<ImageView> mDatas;

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

    @Override
    public int getCount () {
        if (mDatas != null)
//            return mDatas.size();
            return Integer.MAX_VALUE;
        return 0;
    }

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

    @Override
    public void destroyItem (ViewGroup container, int position, Object object) {
        Log.i("MainActivity", "destroyItem: " + position);
        container.removeView((View) object);
    }

    @Override
    public Object instantiateItem (ViewGroup container, int position) {
        Log.i("MainActivity", "instantiateItem: " + position);
        position = position%mDatas.size();
        ImageView img = mDatas.get(position);
        container.addView(img);
        return img;
    }
}

第一次写博客，写的不好请不要见怪^-^