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

自定义ViewPager实现魅族Banner效果

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

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

再看看传统的Banner效果

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

最终效果图

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

实现思路

4000

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

魅族应用的这种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);

[-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() {
@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;
}
}

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