Android高程-相同的值不同的阴影 [英] Android elevation - same values different shadow

问题描述

在回收站视图中为项目设置高程时遇到了一个奇怪的错误。适配器中有两种项目类型，第一种是具有三个 cardview 复杂布局的仪表板。第二个是数据列表的经典项目，其中每个项目都以 cardview 作为根。两种布局中的每个卡片视图的定义如下

I encountered a strange error while setting elevations to items in recycler-view. I have two item types in adapter, first is a kind of dashboard with complex layout with three cardviews. Second one is classic item for data list where each item has cardview as root. each cardview in both layouts is defined as follows

第一项类型：

<LinearLayout
        android:id="@+id/root"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginBottom="8dp"
            app:cardCornerRadius="2dp"
            app:cardElevation="3dp"
            >

        ....

    </android.support.v7.widget.CardView>

    ....

</LinearLayout>

第二项类型：

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:cardCornerRadius="2dp"
        app:cardElevation="3dp"
        >

    ....

</android.support.v7.widget.CardView>

如您所见，两个 cardview 都设置了相同的海拔高度，但是当我部署此布局时，它们会有不同的阴影，您知道这可能是什么原因吗？

As you can see both cardviews have same elevation set but when i deploy this layout they have different shadows, any idea what could be the reason for this ?

我切割了一部分屏幕并将切割位置彼此相邻，这样您就可以看到问题...

I cut a part of screen and placed the cuts next to each other so you can see the problem ...

EDIT

第一个项目的布局非常复杂，但是该项目类型中的所有三个 cardview 都有相同的阴影（上图中的左侧）。第二种类型的Root cardview在图像的右侧具有阴影。

Layout for first item is pretty complex, but all three cardviews in this item type have same shadow (the one on the left in image above). Root cardview of second item type has the shadow that's on the right in the image.

default_elevation = 3dp 
default_corner_radius = 2dp
margins are 16dp, 8dp, 4dp etc ...

第一项类型：

<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:id="@+id/root"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_and_half"
            android:layout_marginLeft="@dimen/default_padding"/>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_quarter"
            android:layout_marginLeft="@dimen/margin_half"
            android:layout_marginRight="@dimen/margin_half"
            android:layout_marginBottom="@dimen/margin_half"
            app:cardCornerRadius="@dimen/default_corner_radius"
            app:cardElevation="@dimen/default_elevation"
            >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingLeft="@dimen/default_padding"
                android:paddingRight="@dimen/default_padding"
                android:paddingTop="@dimen/margin_and_half"
                android:paddingBottom="@dimen/margin_and_half"
                android:gravity="center_vertical">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="bottom"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/black"
                        android:textSize="48sp"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/black"
                        android:textSize="24sp"/>

                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/default_padding"
                    android:gravity="center">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingRight="@dimen/margin_half"
                        android:textColor="@color/green"
                        />

                    <ImageView
                        android:layout_width="@dimen/default_size"
                        android:layout_height="@dimen/default_size"/>

                </LinearLayout>

            </LinearLayout>

        </android.support.v7.widget.CardView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/default_padding"
            android:layout_marginLeft="@dimen/default_padding"
            android:layout_marginBottom="@dimen/margin_quarter"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_weight="0.5"
                android:layout_height="wrap_content"/>

            <TextView
                android:layout_width="0dp"
                android:layout_weight="0.5"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/margin_quarter"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/margin_half"
            android:paddingRight="@dimen/margin_half"
            android:paddingBottom="@dimen/margin_default"
            android:clipChildren="false"
            android:clipToPadding="false"
            android:orientation="horizontal">

            <android.support.v7.widget.CardView
                android:layout_width="0dp"
                android:layout_weight="0.5"
                android:layout_height="wrap_content"
                android:layout_marginRight="@dimen/margin_quarter"
                app:cardCornerRadius="@dimen/default_corner_radius"
                app:cardElevation="@dimen/default_elevation">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingTop="@dimen/margin_double"
                        android:paddingBottom="@dimen/margin_double"
                        android:layout_centerInParent="true"/>

                </RelativeLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="0dp"
                android:layout_weight="0.5"
                android:layout_height="wrap_content"
                app:cardCornerRadius="@dimen/default_corner_radius"
                app:cardElevation="@dimen/default_elevation">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingTop="@dimen/margin_double"
                        android:paddingBottom="@dimen/margin_double"
                        android:layout_centerInParent="true"/>

                </RelativeLayout>

            </android.support.v7.widget.CardView>

        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_half"
            android:layout_marginLeft="@dimen/default_padding"
            android:layout_marginBottom="@dimen/margin_quarter"/>

    </LinearLayout>

</layout>

第二项类型：

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.CardView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_marginLeft="@dimen/margin_half"
        android:layout_marginRight="@dimen/margin_half"
        android:layout_marginBottom="@dimen/margin_half"
        app:cardCornerRadius="@dimen/default_corner_radius"
        app:cardElevation="@dimen/default_elevation"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="@dimen/default_padding">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="@dimen/margin_quarter"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/textview1"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"/>

                <TextView
                    android:id="@+id/textview2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAllCaps="true"/>

            </LinearLayout>

            <TextView
                android:id="@+id/textview3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@color/black"
                android:textAppearance="..(Too Long)"/>
        </LinearLayout>
    </android.support.v7.widget.CardView>
</layout>

推荐答案

在进行了进一步的调查后，遇到了同样的问题留在这里：

Had the same Problem, after some further investigation wanted to leave this here:

在我看来，海拔高度更着眼于提供深度感，而不仅仅是简单地投射阴影。因此，根据视图在屏幕上的位置，光线会有所不同，阴影的投射方式也会有所不同，阴影也取决于视图的轮廓。

It seems to me, that the elevation is more focused on giving a feeling of depth than just "simply" casting a shadow. So, depending on where your view is located on the screen, the lighting is different and the shadow is casted differently, also the shadow is depending on the view's outline.

关于这个问题，我建议以下博客文章：
https://blog.usejournal.com/playing-with-elevation-in-android-91af4f3be596

I recommend the following blog post in regard of this problem: https://blog.usejournal.com/playing-with-elevation-in-android-91af4f3be596

博客文章中提到的海拔测试仪应用程序也很有帮助： https://play.google.com/store/apps/details?id=me.seebrock3r.elevationtester&rdid=me.seebrock3r.elevationtester

Also very helpful is the elevation-tester-app mentioned in the blog post: https://play.google.com/store/apps/details?id=me.seebrock3r.elevationtester&rdid=me.seebrock3r.elevationtester

但是总之，我仍然无法创建基于高程的阴影，该阴影对于每个视图都是一致的，而不管屏幕上的位置如何：（

But in conclusion I was not yet able to create an elevation based shadow which is consistent for every view regardless of on-screen-position :(

这篇关于Android高程-相同的值不同的阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！