android - 如何仅在侧面设置 View 阴影以进行高程 View

Question

我有一个具有各种 View 类型的 RecyclerView。每个 View 都有自己的背景，有顶部、底部或没有圆角。每个使用相同的 View 标高。 这是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>

当 View 彼此相邻布置且没有任何边距时，它看起来就像具有相同的背景。这是我创建动态卡片背景的方法。换句话说，我可以从 RecyclerView

中的多个项目创建单一外观的卡片

问题

正如您在下面看到的，当 2 个 View 彼此相邻放置时，即使角背景半径为 0，它们的阴影也会在角处相互重叠。

所以有人知道怎么解决吗？我只关心 API 21+，所以需要担心旧版本支持。提前致谢!

Answer 1

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

Android 提供了一个名为 ViewOutlineProvider 的类.您可以使用此类创建自己的影子。对于您的问题，您可以为底部 View 的阴影设置偏移量，以便重叠区域由顶部 View 的阴影绘制。

一些代码:

首先，我试图用这种布局来解决你的问题:

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

}

结果是:

比较两张图片，很明显重叠区域被消除了。