Android轮播（banner）组件的使用

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()
    }