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

Question

我作为初级开发人员在Android项目上工作，我仍在学习，我有一些设计问题，并且想知道是否有人可以启发我。

我必须在水平列表上显示项目，我已经使用RecyclerView完成了这项工作，我一次只能在屏幕上显示三个项目（一个居中，两个部分可见）我永远都是通过LinearSnapHelper保持一个在中心。我遇到的问题是侧面的物品需要比中间的物品低一些（0.5对1）。理想情况下，当我滚动的用户时，我想让它们逐渐淡出并逐渐消失，但我完全不知道我应该在哪里这样做。

Horrible mockup here

有干净的方法吗？

非常感谢：）

Answer 1

如果您的RecyclerView背景是纯色，即默认活动背景颜色或白色，一个非常简单的方法是将回收器覆盖半透明渐变可绘制褪色~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 drawable中创建多个渐变的唯一方法。 android:right="200dp"和android:left="200dp"是每个渐变结束与视图相对边框之间的距离。简而言之，如果将200dp替换为一个侧面项目+中心项目所占用的空间，则中心的空间将保持透明，因为它上面没有渐变。 在XML中的RecyclerView＆lt; android:foreground=""属性中设置这两个渐变可绘制中的一个并查看它是否有效。

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