android - 在 Horizo​​ntal RecyclerView 上相对于中心设置 Item Alpha

Question

我作为一名初级开发人员正在从事一个 Android 项目，并且还在不断学习，我遇到了一些设计问题，想知道是否有人可以启发我。

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

Horrible mockup here

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

非常感谢:)

Answer 1

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

但是在可绘制的 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) -->

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

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

<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" 是每个渐变端与 View 的相对边界之间的距离。简而言之，如果将 200dp 替换为一个边项 + 中心项占用的空间，则中心的空间将保持透明，因为上面没有渐变。
在 XML 中的 RecyclerView 的 android:foreground="" 属性中设置这两个渐变可绘制对象之一，看看它是否有效。

编程方法意味着在 RecyclerView 中设置一个 OnScrollListener 或创建一个覆盖 scrollHorizo​​ntallyBy() 的自定义 LinearLayoutManager ，像这样:

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