顶视图和底视图的相同视图高度看起来不同

时间:2017-07-11 13:06:09

标签: android material-design views android-elevation

最近,我对一个问题感到惊讶。在我的Android手机上,列表中的元素或具有相同高程的滚动视图具有与其定位相关的不同阴影。例如,屏幕顶部的视图会有一个小的阴影,只要屏幕底部的视图有更多的阴影和阴影。以下是Google Keep应用程序的屏幕截图:

If you will look at first card view and last one, you will see different shadows

所以,我认为这是因为谷歌Keep应用程序。也许谷歌的人决定用阴影来做他们的应用。因此,我创建了一个示例应用程序。

我的布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        style="@style/AppButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Test"/>

    <TextView
        style="@style/AppButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Test"/>

    <TextView
        style="@style/AppButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Test"/>

    <TextView
        style="@style/AppButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Test"/>

    <TextView
        style="@style/AppButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Test"/>

    <TextView
        style="@style/AppButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Test"/>

    <TextView
        style="@style/AppButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Test"/>

</LinearLayout>

我的风格:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppButton">
        <item name="android:background">@color/colorAccent</item>
        <item name="android:elevation">4dp</item>
        <item name="android:gravity">center</item>
        <item name="android:padding">16dp</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

</resources>

输出结果为:

enter image description here

如你所见,我们有相同的效果(顶视图有一个小阴影,底视图有一个大阴影)。所以我的问题是:

  1. 我做错了什么?
  2. 如何为所有视图实现相同的阴影(根据位置不同)?
  3. 另外,我没有在文档中找到任何解释,所以我可以在哪里读到这个现象?
  4. 是在所有设备上发生还是仅在特定设备上发生?
  5. P.S。:我有 Nexus 5X,Android 7.1.2

    UPD: 重要提一下,从Android Studio Preview Window一切都很好。每个视图都与其他视图具有相同的阴影。但在真实设备上,您可以看到差异。

1 个答案:

答案 0 :(得分:6)

Elevation API生成的阴影位于3D空间中,这意味着每个阴影的外观不仅受其高程值的影响,还受到影子施法者在屏幕上的x和y位置的影响。它与现实世界非常相似 - 光源下方的物体比远处的物体投射出更短的阴影。

仔细查看您发布的第一张图片。左卡的左边缘和右卡的右边缘的阴影比水平中心的边缘长。

广告。没什么。它只是这样工作。

广告。 2.使用Elevation API是不可能的。你可以自己画阴影。

广告。不知道,抱歉。

广告。 4.所有设备。

广告。 UPD。编辑器中的阴影是静态的,因此您没有观察到任何影响。

enter image description here