Github: https://github.com/youth5201314/banner
一、轮播组件进行图片的显示(常用)
概述:轮播图片
1、创建布局
<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="181dp"
android:layout_marginHorizontal="11dp"
android:layout_marginTop="10dp"
//通过banner_radius属性来实现圆角
app:banner_radius="10dp" />
2、创建bean对象
class ImageBean(var imageStr: String?)
3、在activity中找到控件并进行操作
//使用com.kongzue.baseframework来进行快捷开发
@BindView(R.id.banner) //找到对应组件
//定义且添加对应的泛型,第一个为保存图片路径的类,第二个为自带的轮播适配器
lateinit var mBannerView : Banner<ImageBean, BannerImageAdapter<ImageBean>>
//绑定轮播图方法,传入图片链接数据
fun bindBannerData(homeBanner: MutableList<IndexData.Data.HomeBannerData>) {
//创建imgBean对象列表
val imageList = mutableListOf<ImageBean>()
//对列表进行装填
for (item in homeBanner) {
imageList.add(ImageBean(item.pic))
}
//通过setAdapter放置一个匿名内部类,在onBindView方法中通过Glide进行图片绑定
mBannerView.setAdapter(object : BannerImageAdapter<ImageBean>(imageList) {
override fun onBindView(
holder: BannerImageHolder?,
data: ImageBean?,
position: Int,
size: Int
) {
Glide.with(holder!!.itemView)
.load(data?.imageStr)
.apply(RequestOptions.bitmapTransform(RoundedCorners(30)))
.into(holder.imageView)
}
}//setIndicator可以设置轮播组件的指示器形状,这里是圆形。
).addBannerLifecycleObserver(this).setIndicator(CircleIndicator(me))
//设置轮播的点击事件
.setOnBannerListener(object : OnBannerListener<ImageBean> {
override fun OnBannerClick(data: ImageBean?, position: Int) {
when (position) {
0 -> {
// jump(ProductsExhibitionActivity::class.java)
}
1 -> {
// jump(ProductsExhibitionActivity::class.java)
}
}
}
}).start()
}
4、在页面进行请求数据时调用bindBannerData进行轮播数据的绑定操作。
二、轮播组件使用自定义布局进行显示
概述:轮播的是自己定义的布局,可以显示各种控件。
1、同样是创建布局
略
2、创建bean对象
//bean对象里的内容可以根据需求进行改变
class ProductDetailImgBean {
lateinit var img : String
constructor(img : String) {
this.img = img
}
}
3、创建自己的轮播适配器
class ProductDetailBannerAdapter : BannerAdapter<ProductDetailImgBean, ProductDetailBannerAdapter.BannerViewHolder> {
//定义属性来存放使用该组件的activity对象,因为可能会涉及到跳转等操作
lateinit var click : PackagedProductActivity
//构造方法
constructor(mDatas: MutableList<ProductDetailImgBean>, click: PackagedProductActivity) : super(mDatas) {
this.click = click
}
//返回一个viewHolder实例,构建根布局。
override fun onCreateHolder(parent: ViewGroup?, viewType: Int): BannerViewHolder {
//创建一个相对布局,使用代码编写布局。
var rl = RelativeLayout(parent?.context)
var lp = RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.MATCH_PARENT
)
rl.layoutParams = lp
return ProductDetailBannerAdapter.BannerViewHolder(rl)
}
//绑定对象方法,把Bean对象的数据绑定到viewHolder的根布局中。
override fun onBindView(
holder: BannerViewHolder?,
data: ProductDetailImgBean?,
position: Int,
size: Int
) {
//父布局relativeLayout
var parent = holder?.rlView
//将bean中的图片链接放入img然后填充满relativeLayout
var imgView = ImageView(parent?.context)
var lp = ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT
)
imgView.layoutParams = lp
imgView.scaleType = ImageView.ScaleType.FIT_XY
//放入图片
Glide.with(click).load(data?.img).into(imgView)
parent?.addView(imgView)
//轮播第一张图片添加VR字样
if(position == 0){
var vr = TextView(parent?.context)
var lp = RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT
)
lp.addRule(RelativeLayout.CENTER_IN_PARENT) //设置为布局居中位置
vr.layoutParams = lp
vr.text = "VR"
vr.textSize = 50f
vr.setTextColor(Color.parseColor("#FFFFFFFF"))
//将子布局添加到父布局
parent?.addView(vr)
//且给第一个imgView添加点击事件。
imgView.setOnClickListener(View.OnClickListener {
click.jump(VRPageActivity::class.java, JumpParameter().put("url", click.currentDetail.vrUrl))
})
}
}
//内部类,创建一个viewHolder,内部可以定义自己想要的根布局,这里是一个相对布局。
class BannerViewHolder : RecyclerView.ViewHolder {
lateinit var rlView: RelativeLayout
constructor(rlView: RelativeLayout) : super(rlView) {
this.rlView = rlView
}
}
}
4、在activity中进行操作。
//绑定图片轮播
fun bindFunctionBannerData(wholeBannerList : MutableList<String>) {
//创建Bean对象列表
var imageList = mutableListOf<ProductDetailImgBean>()
for(item in wholeBannerList){
imageList.add(ProductDetailImgBean(item))
} //通过setAdapter放入自己写好的自定义适配器
banner.addBannerLifecycleObserver(this).setAdapter(ProductDetailBannerAdapter(imageList,this))
.setIndicator(RoundLinesIndicator(me),false).start()
}
网友评论