如何在具有高程的视图上仅设置侧面阴影？

Question

如何在具有高程的视图上仅设置侧面阴影？

12

我有一个RecyclerView，其中有各种视图类型。每个视图都有自己的背景，具有顶部、底部或无圆角。它们都使用相同的视图高度。这是XML中的其中一种背景。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/card_background_pressed"
    tools:targetApi="lollipop">
    <item>
        <shape>
            <size
                android:width="1dp"
                android:height="1dp" />
            <solid android:color="@color/card_background_normal" />
        </shape>
    </item>
</ripple>

如果视图相互挨着排列而没有间距，它看起来像具有相同的背景。这是我创建动态卡片背景的方法。换句话说，我可以从 RecyclerView 中的多个项创建单个外观的卡片。

问题

如下所示，当2个视图相互挨着排列时，它们的阴影在角落处重叠，即使角落的背景半径为0。

那么，有谁知道如何修复它？我只关心 API 21+ ，因此不需要担心旧版本的支持。提前谢谢！

- Damian Petla

你的期望结果是什么？是没有重叠但仍然相连的阴影吗？ - Rod_Algonquin

@Rod_Algonquin 没错，我需要连接的阴影，这样它看起来就像一张单独的卡片。 - Damian Petla

然后将阴影设置到回收视图上，而不是每个视图上。 - Rod_Algonquin

@Rod_Algonquin 我不行，RecyclerView中的所有项目都会创建更多的卡片，这取决于数据。而且如果我这样做，当用户滚动时，RecyclerView的卡片将保持在原位，这会给人带来糟糕的外观和感觉。 - Damian Petla

材料规格中并没有关于将卡片堆放在一起的描述，我猜测这就是预期的行为。你把它拆分成了太多部分。为什么不能将两个文本视图和图像放入一个回收视图项中？ - headsvk

显示剩余7条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user5703518 · Accepted Answer

我没有尝试过使用 RippleDrawable，但我认为想法是相同的。那么让我们从一个简单的案例开始：

Android 提供了一个名为 ViewOutlineProvider 的类。你可以使用这个类来创建自己的阴影。对于你的问题，你可以设置底部视图的阴影偏移量，使得上面视图的阴影绘制在重叠区域。

请看下面的代码：

首先，我将使用以下布局创建您的问题：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


        <LinearLayout
            android:layout_width="300dp"
            android:layout_height="400dp"
            android:layout_centerInParent="true"
            android:orientation="vertical">

            <TextView
                android:id="@+id/top"
                android:layout_width="100dp"
                android:layout_height="50dp"
                android:layout_marginLeft="50dp"
                android:layout_marginTop="50dp"
                android:background="@android:color/holo_blue_dark"
                android:elevation="25dp"
                android:gravity="center"
                android:text="Top" />

            <TextView
                android:id="@+id/bottom"
                android:layout_width="100dp"
                android:layout_height="50dp"
                android:layout_below="@id/top"
                android:layout_marginLeft="50dp"
                android:layout_marginTop="2dp"
                android:background="@android:color/holo_orange_light"
                android:elevation="25dp"
                android:gravity="center"
                android:text="Bottom" />
        </LinearLayout>
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

识别重叠的阴影有点困难：

现在，通过这段代码，我增加了一些任意的y偏移：

public class MainActivity extends AppCompatActivity {

    TextView mTopTv,mBottomTv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mTopTv = (TextView)findViewById(R.id.top);
        mBottomTv = (TextView)findViewById(R.id.bottom);
        mBottomTv.setOutlineProvider(new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setRect(0, 50, view.getWidth(), view.getHeight());
            }
        });
    }

}

结果如下：

通过对比两张图片可以清楚地看到重叠区域已经被消除。