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

本文主要是介绍Android自定义控件-仿魅族Banner 自动轮播无限轮播，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

这是魅族应用里面的Banner效果图，看着很绚丽

传统Banner（素材是到别的博客里复制过来的，希望别介意！）

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

最终效果图

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

实现思路

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

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

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

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

<RelativeLayoutxmlns: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.ViewPagerandroid: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);

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

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

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

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

private Handler handler = new Handler() {@Overridepublic void handleMessage (Message msg) {super.handleMessage(msg);mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);}};@Overrideprotected 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() {@Overridepublic void run () {handler.sendEmptyMessage(0);}}, 1000, 1000 * 5);}/*** 初始化事件监听*/private void initListener () {mViewPager.setPageTransformer(true, new ViewPager.PageTransformer() {@Overridepublic 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.decfor (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;}@Overridepublic int getCount () {if (mDatas != null)
//            return mDatas.size();return Integer.MAX_VALUE;return 0;}@Overridepublic boolean isViewFromObject (View view, Object object) {return view == object;}@Overridepublic void destroyItem (ViewGroup container, int position, Object object) {Log.i("MainActivity", "destroyItem: " + position);container.removeView((View) object);}@Overridepublic 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;}
}