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 参数，根据页面位置获得颜色阴影；这也有助于在最暗和最亮的颜色之间对颜色进行分级，以便颜色逐渐变化：

• 为亮色和暗色创建两个颜色资源
• 使用ColorUtils.blendARGB()获得基于位置百分比的颜色。
• 将新背景颜色设置为 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)
            
        }
    })

结果：