圖片來源:CCC創作集

簡介

大家平常應該很常看到一些app首頁上方會有一些廣告，用圖片輪播的方式來展示，
我們統稱banner。

今天用的套件叫做bannerViewpager，是個github大大寫的好用banner輪播套件，這裡介紹的是他寫的3.1.5版本。這裡附上他的github連結。
支援手指滑動換頁、特定頁面點擊事件、內建的下方indicator滑塊與其他許多實用功能。
不過今天我們banner下方的綠色滑塊是自己另外寫的就是了。
以下說明食用方法。

0. Gradle dependency

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

implementation 'com.zhpan.library:bannerview:2.4.3.1'

1.HomePageData.kt

先寫假資料

class HomePageData{

    data class Banner(
        val img:Int
    )

    fun setBannerData():MutableList<Banner>{
        val list = mutableListOf<Banner>(
            Banner(R.drawable.bn_1),
            Banner(R.drawable.bn_2),
            Banner(R.drawable.bn_3),
            Banner(R.drawable.bn_4),
            Banner(R.drawable.bn_5)
        )
        return list

    }
}

2.viewHolder_banner.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/vg_banner">

    <ImageView
        android:id="@+id/imgv_banner"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

3.BannerAdapter.kt

需要設定adapter

class BannerAdapter() : BaseBannerAdapter<HomePageData.Banner?, BannerAdapter.BannerViewholder>() {

    inner class BannerViewholder(itemView: View) : BaseViewHolder<HomePageData.Banner?>(itemView) {

        lateinit var vgBanner: ConstraintLayout
        lateinit var imgBanner: ImageView

        init {
            imgBanner = itemView.findViewById(com.tcb.official.R.id.imgv_banner)
        }

        override fun bindData(data: HomePageData.Banner?, position: Int, pageSize: Int) {
            imgBanner.setImageResource(data!!.img)

        }
    }

    override fun onBind(
        holder: BannerViewholder,
        data: HomePageData.Banner?,
        position: Int,
        pageSize: Int
    ) {
        holder.bindData(data, position, pageSize)
    }

    override fun createViewHolder(itemView: View, viewType: Int): BannerViewholder {
        return BannerViewholder(itemView)
    }

    override fun getLayoutId(viewType: Int): Int {
        return R.layout.viewholder_banner
    }


}

4.sl_banner_light.xml

寫一個selector，設定activated狀態，當狀態被觸發時變綠色。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="false"  android:drawable="@color/color1A000000"/>
<item android:state_activated="true" android:drawable="@color/color64C1BE"/>
</selector>

5.activity_main.xml

放入BannerViewPager與自定義綠色滑塊

<com.zhpan.bannerview.BannerViewPager
                android:id="@+id/banner_viewpager"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                app:layout_constraintDimensionRatio="2:1"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

</com.zhpan.bannerview.BannerViewPager>

<!-- banner下方的5個綠色滑塊 -->
<androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout4"
                android:layout_width="match_parent"
                android:layout_height="34dp"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/banner_viewpager">

                <View
                    android:id="@+id/v1"
                    android:layout_width="0dp"
                    android:layout_height="2dp"
                    android:layout_marginEnd="4dp"
                    android:background="@drawable/sl_banner_light"
                    android:gravity="center"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@id/v2"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <View
                    android:id="@+id/v2"
                    android:layout_width="0dp"
                    android:layout_height="2dp"
                    android:layout_marginStart="4dp"
                    android:layout_marginEnd="4dp"
                    android:background="@drawable/sl_banner_light"
                    android:gravity="center"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@id/v3"
                    app:layout_constraintStart_toEndOf="@id/v1"
                    app:layout_constraintTop_toTopOf="parent" />

                <View
                    android:id="@+id/v3"
                    android:layout_width="0dp"
                    android:layout_height="2dp"
                    android:layout_marginStart="4dp"
                    android:layout_marginEnd="4dp"
                    android:background="@drawable/sl_banner_light"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@id/v4"
                    app:layout_constraintStart_toEndOf="@id/v2"
                    app:layout_constraintTop_toTopOf="parent" />

                <View
                    android:id="@+id/v4"
                    android:layout_width="0dp"
                    android:layout_height="2dp"
                    android:layout_marginStart="4dp"
                    android:layout_marginEnd="4dp"
                    android:background="@drawable/sl_banner_light"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@id/v5"
                    app:layout_constraintStart_toEndOf="@id/v3"
                    app:layout_constraintTop_toTopOf="parent" />

                <View
                    android:id="@+id/v5"
                    android:layout_width="0dp"
                    android:layout_height="2dp"
                    android:layout_marginStart="4dp"
                    android:background="@drawable/sl_banner_light"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@id/v4"
                    app:layout_constraintTop_toTopOf="parent" />
            </androidx.constraintlayout.widget.ConstraintLayout>

6.MainActivity

class MainActivity : AppCompatActivity() {


    lateinit var bannerViewpager :BannerViewPager<HomePageData.Banner?, BannerAdapter.BannerViewholder>
    lateinit var list: MutableList<HomePageData.Banner>
    val homePageData = HomePageData()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        list = homePageData.setBannerData()
        bannerViewpager = findViewById(R.id.banner_viewpager)
        setupViewPager()

    }
    
    
    private fun setupViewPager() {

            bannerViewpager.apply {
                adapter = BannerAdapter()
                setAutoPlay(true)
                setLifecycleRegistry(lifecycle)
                setIndicatorVisibility(View.INVISIBLE)
                
                //設定頁面點擊事件
                setOnPageClickListener (object :BannerViewPager.OnPageClickListener{
                    override fun onPageClick(position: Int) {
                        when(position){
                            0->{}
                            1->{}
                            //.......do something
                        }
                    }
                })
                
                //監聽banner換頁 設定底下的綠色長條indicator
                registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
                    override fun onPageSelected(position: Int) {
                        BannerUtils.log("position:$position")
                        when(position){
                            0-> {
                                v2.isActivated = false
                                v1.isActivated = true
                                v5.isActivated = false
                            }
                            1-> {
                                v1.isActivated = false
                                v2.isActivated = true
                                v3.isActivated = false
                            }
                            2-> {
                                v2.isActivated = false
                                v3.isActivated = true
                                v4.isActivated = false
                            }
                            3-> {
                                v3.isActivated = false
                                v4.isActivated = true
                                v5.isActivated = false
                            }
                            4->{
                                v4.isActivated = false
                                v5.isActivated = true
                                v1.isActivated = false
                            }
                        }
                    }
                })
            }.create(list as List<HomePageData.Banner?>?)
   }



}

完成喇