一个简单好用的轮播图控件：Clip Banner View

一个简单好用的轮播图控件：Clip Banner View

代码已开到Github

https://github.com/Lyzon/clip-banner-view

效果图：

demo.gif

如何实现

• 这个轮播图控件是基于ViewPager的轻度封装，开启一个执行定时任务的子线程，实现轮播图自动播放。
• 轮播图的裁剪与切换动画的原理： android:clipChildren="false"
  和ViewPager.setPageTransformer
  详情请参考http://blog.csdn.net/lmj623565791/article/details/51339751
• 实现自定义PagerAdapter以载入布局、点击回调、与伪无限轮播：Integer.MAX_VALUE。

使用方法

使用真的非常简单，与banner的数据结构和图片加载框架等完全解耦。

 clipBannerView = (ClipBannerView) findViewById(R.id.banner_view);
                                                    
    clipBannerView.setAdapter(new ClipBannerAdapter(this,entityList.size(),this) {
        @Override
        public void setBannerContent(BannerItem item,int position){
            //need to override
            //load your image into   * item.bannerImage * ;
            //set text into   * item.bannerText * ;
            //simple : Glide.load(bannerList.get(position).imageUrl).into(item.bannerImage);
            //simple : item.bannerText.setText(bannerList.get(position).bannerTitle);
            //if banner didn't have title to show , you should do it : item.bannerText.setVisibility(View.GONE);
            Glide.with(MainActivity.this).load(entityList.get(position).imageUrl).into(item.bannerImage);
            item.bannerText.setText(entityList.get(position).bannerTitle);
            if(item.bannerText.getText().length() == 0)
                item.bannerText.setVisibility(View.GONE);
        }
    });
    clipBannerView.start();

只需要给ClipBannerView设置Adapter，然后覆写setBannerContent方法以填充内容就完成了。
看一下Adapter的构造函数：

ClipBannerAdapter(Context context,int size,OnBannerClickListener clickListener)

需传入Context、Banner的数量、点击回调的listener(可以为null)就可以了。

看一下需要覆写的填充内容的方法：

 public void setBannerContent(BannerItem item,int position)

只需要在这里正确的填充数据就完成了。比如：

        @Override
public void setBannerContent(BannerItem item,int position){
            //need to override
            //load your image into   * item.bannerImage * ;
            //set text into   * item.bannerText * ;
            //simple : Glide.load(bannerList.get(position).imageUrl).into(item.bannerImage);
            //simple : item.bannerText.setText(bannerList.get(position).bannerTitle);
            //if banner didn't have title to show , you should do it : item.bannerText.setVisibility(View.GONE);
            //加载图片，demo里用的是glide
            Glide.with(MainActivity.this).load(entityList.get(position).imageUrl).into(item.bannerImage);
            //设置标题 
            item.bannerText.setText(entityList.get(position).bannerTitle);
            if(item.bannerText.getText().length() == 0)
                item.bannerText.setVisibility(View.GONE);
}

把图片加载到item.bannerImage，把文字加载到item.bannerText ，如果没有文字，设置一下item.bannerText.setVisibility(View.GONE);

最后在点击回调中：

@Override
public void onBannerClick(int position){
    //DO WHAT YOU WANT！！
}

大功告成~~~~

一个简单好用的BannerView就完成了~