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)
            
        }
    })

结果：