在 Horizontal RecyclerView 上相对于中心设置 Item Alpha

Question

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

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

Horrible mockup here

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

非常感谢:)

Answer 1

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

但是在 drawable 中创建复杂的渐变并不容易 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) -->

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

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

<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 替换为一侧项目 + 中心项目占据的 space，中心的 space 将保持透明，因为它不会有渐变。
在 XML 中的 RecyclerView 的 android:foreground="" 属性中设置这两个渐变可绘制对象之一，看看它是否有效。

程序化方法意味着在 RecyclerView 中设置 OnScrollListener 或创建覆盖 scrollHorizontallyBy() 的自定义 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();
}

在 Horizontal RecyclerView 上相对于中心设置 Item Alpha

Set Item Alpha relative to center on Horizontal RecyclerView

android

android-animation

android-recyclerview

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

Set Item Alpha relative to center on Horizontal RecyclerView

android

android-animation

android-recyclerview

在 Horizontal RecyclerView 上相对于中心设置 Item Alpha