Android ViewPager2，前后item變暗處理

Question

如上圖所示，我想使ViewPager2中的上一個和下一個項目變暗。

setPageTransformer(object : ViewPager2.PageTransformer {
            override fun transformPage(page: View, position: Float) {
                page.translationX = -pageTranslationX * position
                page.scaleY = 1 - (0.15f * abs(position))
            }
        })

我正在使用上面的代碼片段顯示預覽，但我找不到使它變暗的方法。

有好的解決辦法嗎？

Answer 1

您可以利用映射到頁面當前 position 的position參數來獲取基於頁面 position 的色度； 這也將有助於在最暗和最亮的 colors 之間對 colors 進行分級，以便顏色逐漸變化：

• 為變亮顏色和變暗顏色創建兩個顏色資源 colors
• 使用ColorUtils.blendARGB()獲取基於 position 百分比的顏色。
• 將新背景顏色設置為page的根視圖

setPageTransformer(object : ViewPager2.PageTransformer {
        override fun transformPage(page: View, position: Float) {
            page.translationX = -pageTranslationX * position
            page.scaleY = 1 - (0.15f * abs(position))
            
            val startColor = ContextCompat.getColor(this, R.color.light_blue)
            val endColor = ContextCompat.getColor(this, R.color.dark_blue)
            val color = ColorUtils.blendARGB(startColor, endColor, abs(position))
            val view = page.findViewById<LinearLayout>(R.id.page_root) //  this is the page fragment root view (make sure to set its id)
            view?.setBackgroundColor(color)
            
        }
    })

結果：