一个简单好用的轮播图控件:Clip Banner View
代码已开到Github
https://github.com/Lyzon/clip-banner-view
效果图:
如何实现
- 这个轮播图控件是基于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就完成了~