Android輪播(banner)組件的使用

Github: https://github.com/youth5201314/banner

一突琳、輪播組件進(jìn)行圖片的顯示(常用)

概述:輪播圖片
1蝉仇、創(chuàng)建布局

<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屬性來實(shí)現(xiàn)圓角
app:banner_radius="10dp" />

2媳瞪、創(chuàng)建bean對象

class ImageBean(var imageStr: String?)

3、在activity中找到控件并進(jìn)行操作

//使用com.kongzue.baseframework來進(jìn)行快捷開發(fā)
@BindView(R.id.banner)  //找到對應(yīng)組件
//定義且添加對應(yīng)的泛型,第一個為保存圖片路徑的類,第二個為自帶的輪播適配器
lateinit var mBannerView : Banner<ImageBean, BannerImageAdapter<ImageBean>>

//綁定輪播圖方法,傳入圖片鏈接數(shù)據(jù)
fun bindBannerData(homeBanner: MutableList<IndexData.Data.HomeBannerData>) {
        //創(chuàng)建imgBean對象列表
        val imageList = mutableListOf<ImageBean>()
        //對列表進(jìn)行裝填
        for (item in homeBanner) {
            imageList.add(ImageBean(item.pic))
        }
        //通過setAdapter放置一個匿名內(nèi)部類,在onBindView方法中通過Glide進(jìn)行圖片綁定
        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可以設(shè)置輪播組件的指示器形狀,這里是圓形。
        ).addBannerLifecycleObserver(this).setIndicator(CircleIndicator(me))
          //設(shè)置輪播的點(diǎn)擊事件
          .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蚊逢、在頁面進(jìn)行請求數(shù)據(jù)時調(diào)用bindBannerData進(jìn)行輪播數(shù)據(jù)的綁定操作。

二靴庆、輪播組件使用自定義布局進(jìn)行顯示

概述:輪播的是自己定義的布局时捌,可以顯示各種控件。
1炉抒、同樣是創(chuàng)建布局

2奢讨、創(chuàng)建bean對象

//bean對象里的內(nèi)容可以根據(jù)需求進(jìn)行改變
class ProductDetailImgBean {
    lateinit var img : String

    constructor(img : String) {
        this.img = img
    }
}

3、創(chuàng)建自己的輪播適配器

class ProductDetailBannerAdapter : BannerAdapter<ProductDetailImgBean, ProductDetailBannerAdapter.BannerViewHolder> {

    //定義屬性來存放使用該組件的activity對象,因?yàn)榭赡軙婕暗教D(zhuǎn)等操作
    lateinit var click : PackagedProductActivity

    //構(gòu)造方法
    constructor(mDatas: MutableList<ProductDetailImgBean>, click: PackagedProductActivity) : super(mDatas) {
        this.click = click
    }

    //返回一個viewHolder實(shí)例,構(gòu)建根布局焰薄。
    override fun onCreateHolder(parent: ViewGroup?, viewType: Int): BannerViewHolder {
        //創(chuàng)建一個相對布局,使用代碼編寫布局拿诸。
        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對象的數(shù)據(jù)綁定到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)        //設(shè)置為布局居中位置
            vr.layoutParams = lp
            vr.text = "VR"
            vr.textSize = 50f
            vr.setTextColor(Color.parseColor("#FFFFFFFF"))
            //將子布局添加到父布局
            parent?.addView(vr)
            //且給第一個imgView添加點(diǎn)擊事件塞茅。
            imgView.setOnClickListener(View.OnClickListener {
                click.jump(VRPageActivity::class.java, JumpParameter().put("url", click.currentDetail.vrUrl))
            })
        }
    }

    //內(nèi)部類,創(chuàng)建一個viewHolder,內(nèi)部可以定義自己想要的根布局,這里是一個相對布局亩码。
    class BannerViewHolder : RecyclerView.ViewHolder {

        lateinit var rlView: RelativeLayout

        constructor(rlView: RelativeLayout) : super(rlView) {
            this.rlView = rlView
        }

    }
}

4、在activity中進(jìn)行操作野瘦。

    //綁定圖片輪播
    fun bindFunctionBannerData(wholeBannerList : MutableList<String>) {
        //創(chuàng)建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()
    }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末描沟,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子鞭光,更是在濱河造成了極大的恐慌吏廉,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件惰许,死亡現(xiàn)場離奇詭異席覆,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)汹买,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進(jìn)店門佩伤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人晦毙,你說我怎么就攤上這事生巡。” “怎么了见妒?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵孤荣,是天一觀的道長。 經(jīng)常有香客問我,道長垃环,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任返敬,我火速辦了婚禮遂庄,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘劲赠。我一直安慰自己涛目,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布凛澎。 她就那樣靜靜地躺著霹肝,像睡著了一般。 火紅的嫁衣襯著肌膚如雪塑煎。 梳的紋絲不亂的頭發(fā)上沫换,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天,我揣著相機(jī)與錄音最铁,去河邊找鬼讯赏。 笑死,一個胖子當(dāng)著我的面吹牛冷尉,可吹牛的內(nèi)容都是我干的漱挎。 我是一名探鬼主播,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼雀哨,長吁一口氣:“原來是場噩夢啊……” “哼磕谅!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起雾棺,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤膊夹,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后垢村,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體割疾,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年嘉栓,在試婚紗的時候發(fā)現(xiàn)自己被綠了宏榕。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡侵佃,死狀恐怖麻昼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情馋辈,我是刑警寧澤抚芦,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響叉抡,放射性物質(zhì)發(fā)生泄漏尔崔。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一褥民、第九天 我趴在偏房一處隱蔽的房頂上張望季春。 院中可真熱鬧,春花似錦消返、人聲如沸载弄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽宇攻。三九已至,卻和暖如春倡勇,著一層夾襖步出監(jiān)牢的瞬間逞刷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工译隘, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留亲桥,地道東北人。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓固耘,卻偏偏與公主長得像题篷,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子厅目,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評論 2 355

推薦閱讀更多精彩內(nèi)容