相对于 Horizo​​ntal RecyclerView 的中心设置 Item Alpha

Question

我正在以初级开发人员的身份从事 Android 项目，并且仍在学习中，我遇到了一些设计问题，想知道是否有人可以启发我。

我必须在水平列表上显示项目，我已经使用 RecyclerView 这样做了，我一次只能在屏幕上显示三个项目（一个居中，两个部分可见）并且我总是将一个项目保留在中心感谢一个 LinearSnapHelper。我遇到的问题是侧面的项目需要比中间的项目具有更低的 alpha（0.5 vs 1）。理想情况下，我想让它们在用户滚动时逐渐淡出和淡入，但我完全不知道应该在哪里执行此操作。

可怕的模型在这里

有没有干净的方法来做到这一点？

非常感谢 ：）

Answer 1

如果您RecyclerView的背景是​​纯色，即默认的 Activity 背景色或白色，一个非常简单的方法是用半透明渐变可绘制渐变覆盖回收器，从侧面的~50% 不透明度明亮颜色渐变到完全透明一个在中间。这会给人一种错觉，当您移动它们时，这些项目实际上正在褪色。

然而，在可绘制的 XML 中创建复杂的渐变并不容易：你可以只创建一个水平的 3 色渐变

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#55FFFFFF"
        android:centerColor="#00FFFFFF"
        android:endColor="#55FFFFFF"/>
</shape>
<!-- replace FFFFFF with the actual background color
     and adjust the first two hexadecimal digits for the
     overlay transparency (00 is transparent -> FF is opaque) -->

但可能这个渐变会覆盖太多的中心元素并且会很烦人。

在中心部分，覆盖层必须完全透明，渐变应该从中心视图占据的空间之外开始。这可以通过叠加两个渐变来实现：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:gravity="left"
        android:right="200dp">
        <shape android:shape="rectangle">
            <gradient
                android:type="linear"
                android:startColor="#55FFFFFF"
                android:endColor="#00FFFFFF"/>
        </shape>
    </item>
    <item
        android:left="200dp"
        android:gravity="right">
        <shape android:shape="rectangle">
            <gradient
                android:type="linear"
                android:startColor="#55FFFFFF"
                android:endColor="#AAFFFFFF"/>
        </shape>
    </item>
</layer-list>

图层列表是在 Android 可绘制对象中创建多个渐变的唯一方法。android:right="200dp"和android:left="200dp"是每个渐变末端和视图的相对边界之间的距离。简而言之，如果您将 200dp 替换为一侧项目 + 中心项目占用的空间，则中心的空间将保持透明，因为它不会有渐变。在 XML 的's属性中
设置这两个渐变可绘制对象之一，看看它是否有效。 RecyclerViewandroid:foreground=""

编程方法意味着设置一个OnScrollListenerinRecyclerView或创建一个LinearLayoutManager覆盖的自定义scrollHorizontallyBy()，如下所示：

public void updateChildrenAlpha() {
    for (int i = 0; i < getChildCount(); i++) {
        View child = getChildAt(i);
        float maxDist = /* distance where alpha is min */;
        float right = getDecoratedRight(child);
        float left = getDecoratedLeft(child);
        float childCenter = left + (right - left) / 2; // Get item center position
        float center = getWidth() / 2; // Get RecyclerView's center position
        child.setAlpha((Math.abs(center - childCenter) -  maxDist) / maxDist);
        // Map between 0f and 1f the abs value of the distance
        // between the center of item and center of the RecyclerView
        // and set it as alpha
    }
}

@Override
public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State state) {
    updateChildrenAlpha();
    return super.scrollHorizontallyBy(dx, recycler, state);
}

@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
    super.onLayoutChildren(recycler, state);
    updateChildrenAlpha();
}