Как я могу установить тень представления только по сторонам для просмотра с высотой

У меня есть RecyclerView с различными типами просмотров. Каждый вид имеет собственный фон с верхними, нижними или без закругленных углов. Каждый из них использует одинаковое возвышение. Это один из фонов в XML

Когда представления выкладываются рядом друг с другом без каких-либо ограничений, похоже, что они имеют одинаковый фон. Это мой способ создания динамического фона карты. Другими словами, я могу создать одноразовую карту из нескольких элементов в RecyclerView

Как вы можете видеть ниже, когда два вида выложены рядом друг с другом, их тени перекрываются друг с другом в углах, даже когда радиус фонового угла равен 0.

Так кто-нибудь знает, как это исправить? Я забочусь только об API 21+, поэтому вам нужно беспокоиться о поддержке старых версий. Спасибо заранее!

Ответы

Ответ 1

Я не пробовал с 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>

немного сложно распознать перекрывающиеся тени:

Теперь я добавляю произвольное у смещение по этому коду:

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

}

и результат:

По сравнению с двумя изображениями ясно, что перекрывающаяся область устранена.