效果圖

• 上圖是天津地鐵APP的Banner也是本文要實(shí)現(xiàn)的效果

一、如何使用ViewPager2

• ①在app下的build.gradle文件中添加如下依賴

implementation "androidx.viewpager2:viewpager2:1.0.0"

• ②同步之后就可以在布局中使用啦

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/bannerVp"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    />

• ③圖中可以看出item布局需要圓角，實(shí)現(xiàn)方案有很多，這里選擇使用官方提供的ShapeableImageView實(shí)現(xiàn)它的圓角需要寫一個(gè)style

<style name="BannerStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">@dimen/_10dp</item>
</style>

布局中引用即可代碼如下

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/banner_image"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:scaleType="fitXY"
    app:shapeAppearance="@style/BannerStyle"
/>

• ④我們都知道ViewPager2的適配器和RecyclerView的使用一樣少辣，這里就不貼代碼了
• ⑤最后我們給ViewPager2設(shè)置上adapter即可

二、輪播圖左右無(wú)線滑動(dòng)

• 數(shù)據(jù)源的第一位add最后一張圖

val newList = arrayListOf<String>()
newList.add(pic[pic.size-1])

• 最后一位添加第一張圖

for (item in pic) {
    newList.add(item)
}
newList.add(pic[0])

• 當(dāng)ViewPager2滑動(dòng)到第0位和最后一位時(shí)的處理分別如下

• ViewPager2添加滑動(dòng)監(jiān)聽(tīng)代碼如下
  關(guān)鍵點(diǎn)在onPageScrollStateChanged方法

bannerVp.registerOnPageChangeCallback(object :
    ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        currentPosition = position
    }
    override fun onPageScrollStateChanged(state: Int) {
        //只有在空閑狀態(tài)，才讓自動(dòng)滾動(dòng)
        if (state == ViewPager2.SCROLL_STATE_IDLE) {
            if (currentPosition == 0) {
                bannerVp.setCurrentItem(adapter.itemCount - 2, false)
            } else if (currentPosition == adapter.itemCount - 1) {
                bannerVp.setCurrentItem(1, false)
            }
        }
    }
})

三、自動(dòng)滑動(dòng)

• 這里采用了view的postDelayed方法進(jìn)行實(shí)現(xiàn)

bannerVp.postDelayed(mLooper,1000)

• mLooper是我定義的Runnable魄缚，后面會(huì)講原因

private val mLooper = object : Runnable {
    override fun run() {
        bannerVp.currentItem = ++bannerVp.currentItem
        bannerVp.postDelayed(this,1000)
    }
}

• 滑動(dòng)實(shí)現(xiàn)了，但啟停時(shí)機(jī)也很重要
  所以這里選用onWindowFocusChanged因?yàn)樗诖绑w失去和獲得焦點(diǎn)的時(shí)候會(huì)通知我們

override fun onWindowFocusChanged(hasFocus: Boolean) {
    super.onWindowFocusChanged(hasFocus)
    if (hasFocus){
        bannerVp.postDelayed(counter,1000)
    }else{
    //失去焦點(diǎn)時(shí)移除
        bannerVp.removeCallbacks(counter)
    }
}

觸摸暫停滾動(dòng)

• 我們知道觸摸調(diào)用setOnTouchListener即可焚廊，但是給ViewPager2使用的時(shí)候你會(huì)發(fā)現(xiàn)不起作用冶匹。
• ViewPager2是一個(gè)視圖組，未調(diào)用setOnTouchListener是因?yàn)?code>recyclerview攔截事件并首先調(diào)用onTouchEvent
• bannerVp.getChildAt(0)給它設(shè)置監(jiān)聽(tīng)即可

bannerVp.getChildAt(0).setOnTouchListener { _, event ->
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
           bannerVp.removeCallbacks(mLooper)
        }
        MotionEvent.ACTION_UP -> {
            bannerVp.postDelayed(mLooper,1000)
        }
    }
    return@setOnTouchListener false
}

最后

寫作不易咆瘟，如果對(duì)你有一丟丟幫助或啟發(fā)徙硅，感謝點(diǎn)贊支持，有問(wèn)題也歡迎留言交流哦搞疗！