【问题标题】:Android View shadowAndroid 视图阴影
【发布时间】:2014-02-08 07:35:45
【问题描述】:

我四处寻找,但找不到合适的方法。我想对我的观点产生以下阴影效果:

说实话,我不知道第二个是不是通过应用阴影效果来完成的。有什么想法吗?

【问题讨论】:

标签: android shadow dropshadow


【解决方案1】:

我知道这个问题已经得到解答,但我想让你知道我在Android Studio 上找到了一个drawable,它与你在问题中的图片非常相似: 看看这个:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

看起来像这样:

希望对你有帮助

编辑

以上选项适用于旧版本的Android Studio,因此您可能找不到它。对于较新的版本:

android:background="@android:drawable/dialog_holo_light_frame"

另外,如果你想拥有自己的自定义形状,我建议使用像Photoshop这样的绘图软件来绘制它。

不要忘记将其保存为.9.png 文件(例如:my_background.9.png

阅读文档:Draw 9-patch

编辑 2

一个更好、更省力的解决方案是使用CardView 并设置app:cardPreventCornerOverlap="false" 以防止视图重叠边界:

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="0dp">

    <!-- your layout stuff here -->

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

还要确保在build.gradle 中包含最新版本,当前为

compile 'com.android.support:cardview-v7:26.0.0'

【讨论】:

  • 谢谢,实际上,它看起来非常相似。我还找到了适用于 android 的“google card layout”,它们非常酷!
  • 太棒了。仅供未来观众参考,位于/&lt;sdk-path&gt;/extras/android/support
  • 如何使用cardView
【解决方案2】:

我使用的是 Android Studio 0.8.6,但我找不到:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

所以我发现了这个:

android:background="@android:drawable/dialog_holo_light_frame"

它看起来像这样:

【讨论】:

  • 但是我们不能用它添加圆角半径?!
【解决方案3】:

@android:drawable/dialog_holo_light_frame的背景,会产生阴影,但你不能改变背景颜色和边框样式,所以最好从它的阴影中受益,同时仍然可以通过图层列表放置背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="0dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">

    </item>

    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <!--whatever you want in the background, here i preferred solid white -->
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />

        </shape>
    </item>
</layer-list>

把它保存在shadow.xml下的drawable文件夹中

要将其分配给视图,请在 xml 布局文件中设置它的背景

android:background="@drawable/shadow"

【讨论】:

  • 你检查它是否有效吗?第二个 不做任何事情。我无法将其更改为透明或圆角。
  • 在我尝试过的所有方法中,这是唯一有效的方法,谢谢。
  • 很棒的解决方案
【解决方案4】:

在 res/drawable 文件夹中创建 card_background.xml,代码如下:

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

<item>
    <shape android:shape="rectangle">
        <solid android:color="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

然后将以下代码添加到您想要卡片布局的元素中

android:background="@drawable/card_background"

下面一行定义了卡片阴影的颜色

<solid android:color="#BDBDBD"/>

【讨论】:

  • 这并不是真正的阴影——因为它不会褪色。它更像是两侧的边框。
  • 它不是影子
【解决方案5】:

使用高度属性来实现阴影效果:

<View ...
    android:elevation="2dp"/>

这只能在 v21 之后使用,请查看此链接:http://developer.android.com/training/material/shadows-clipping.html

【讨论】:

    【解决方案6】:

    CardView 在 android 5+ 中为您提供 true 影子,并且它有一个支持库。只需用它包裹你的视图,你就完成了。

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

    它需要下一个依赖项。

    dependencies {
        ...
        compile 'com.android.support:cardview-v7:21.0.+'
    }
    

    【讨论】:

    • 这是唯一正确的答案,因为只有CardView 在兼容模式下针对不同高度也有不同的阴影级别。
    • 我推荐 MaterialCardView,因为它更清晰,功能更多。
    【解决方案7】:

    这可能已经晚了,但对于那些仍在寻找答案的人,我在 git hub 上找到了一个项目,这是唯一真正满足我需求的项目。 android-materialshadowninepatch

    只需将此行添加到您的 build.gradle 依赖项中

    compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'
    

    干杯。为创作者点赞! 快乐的编码

    【讨论】:

    • 嘿@ralphgabb,这对您是否仍然有效,或者您对棒棒糖设备有更好的解决方案?
    • @Swapnil 不确定 AndroidX 是否支持现在我不再支持预棉花糖设备。
    【解决方案8】:

    我知道这很愚蠢,
    但是如果你想在 v21 下支持,这里是我的成就。

    rectangle_with_10dp_radius_white_bg_and_shadow.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        <!-- Shadow layers -->
        <item
            android:left="1dp"
            android:right="1dp"
            android:top="3dp">
            <shape>
                <corners android:radius="10dp" />
                <padding
                    android:bottom="1.8dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp" />
                <solid android:color="@color/shadow_hack_level_1" />
            </shape>
        </item>
        <item
            android:left="1dp"
            android:right="1dp"
            android:top="3dp">
            <shape>
                <corners android:radius="10dp" />
                <padding
                    android:bottom="1.8dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp" />
                <solid android:color="@color/shadow_hack_level_2" />
            </shape>
        </item>
        <item
            android:left="1dp"
            android:right="1dp"
            android:top="3dp">
            <shape>
                <corners android:radius="10dp" />
                <padding
                    android:bottom="1.8dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp" />
                <solid android:color="@color/shadow_hack_level_3" />
            </shape>
        </item>
        <item
            android:left="1dp"
            android:right="1dp"
            android:top="3dp">
            <shape>
                <corners android:radius="10dp" />
                <padding
                    android:bottom="1.8dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp" />
                <solid android:color="@color/shadow_hack_level_4" />
            </shape>
        </item>
        <item
            android:left="1dp"
            android:right="1dp"
            android:top="3dp">
            <shape>
                <corners android:radius="10dp" />
                <padding
                    android:bottom="1.8dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp" />
                <solid android:color="@color/shadow_hack_level_5" />
            </shape>
        </item>
        <item
            android:left="1dp"
            android:right="1dp"
            android:top="3dp">
            <shape>
                <corners android:radius="10dp" />
                <padding
                    android:bottom="1.8dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp" />
                <solid android:color="@color/shadow_hack_level_6" />
            </shape>
        </item>
        <item
            android:left="1dp"
            android:right="1dp"
            android:top="3dp">
            <shape>
                <corners android:radius="10dp" />
                <padding
                    android:bottom="1.8dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp" />
                <solid android:color="@color/shadow_hack_level_7" />
            </shape>
        </item>
        <item
            android:left="1dp"
            android:right="1dp"
            android:top="3dp">
            <shape>
                <corners android:radius="10dp" />
                <padding
                    android:bottom="1.8dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp" />
                <solid android:color="@color/shadow_hack_level_8" />
            </shape>
        </item>
        <item
            android:left="1dp"
            android:right="1dp"
            android:top="3dp">
            <shape>
                <corners android:radius="10dp" />
                <padding
                    android:bottom="1.8dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp" />
                <solid android:color="@color/shadow_hack_level_9" />
            </shape>
        </item>
        <item
            android:left="1dp"
            android:right="1dp"
            android:top="3dp">
            <shape>
                <corners android:radius="10dp" />
                <padding
                    android:bottom="1.8dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp" />
                <solid android:color="@color/shadow_hack_level_10" />
            </shape>
        </item>
    
        <!-- Background layer -->
        <item>
            <shape>
                <solid android:color="@android:color/white" />
                <corners android:radius="10dp" />
            </shape>
        </item>
    
    </layer-list>
    

    rectangle_with_10dp_radius_white_bg_and_shadow.xml (v21)

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <solid android:color="@android:color/white" />
        <corners android:radius="10dp" />
    </shape>
    

    view_incoming.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
        android:elevation="7dp"
        android:gravity="center"
        android:minWidth="240dp"
        android:minHeight="240dp"
        android:orientation="horizontal"
        android:padding="16dp"
        tools:targetApi="lollipop">
    
        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="Hello World !" />
    
    </LinearLayout>
    

    结果如下:

    v21 下(这是你用 xml 制作的)

    v21以上(真实海拔渲染)

    • 一个显着的区别是它将占据视图的内部空间,因此您的实际内容区域可以小于 >= lollipop 设备。

    【讨论】:

      【解决方案9】:

      如果您需要正确应用阴影,则必须执行以下操作。

      考虑这个用背景可绘制对象定义的视图:

      <TextView
          android:id="@+id/myview"
          ...
          android:elevation="2dp"
          android:background="@drawable/myrect" />
      

      背景可绘制对象定义为圆角矩形:

      <shape xmlns:android="http://schemas.android.com/apk/res/android"
             android:shape="rectangle">
          <solid android:color="#42000000" />
          <corners android:radius="5dp" />
      </shape>
      

      这是应用阴影的推荐方式查看https://developer.android.com/training/material/shadows-clipping.html#Shadows

      【讨论】:

        【解决方案10】:

        像这样创建背景可绘制对象以显示圆形阴影。

        <?xml version="1.0" encoding="utf-8"?>
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- Drop Shadow Stack -->
            <item>
                <shape>
                    <corners android:radius="4dp" />
                    <padding android:bottom="1dp" android:left="1dp"
                             android:right="1dp"  android:top="1dp" />
                    <solid android:color="#00CCCCCC" />
                </shape>
            </item>
            <item>
                <shape>
                    <corners android:radius="4dp" />
                    <padding android:bottom="1dp" android:left="1dp"
                             android:right="1dp"  android:top="1dp" />
                    <solid android:color="#10CCCCCC" />
                </shape>
            </item>
            <item>
                <shape>
                    <corners android:radius="4dp" />
                    <padding android:bottom="1dp" android:left="1dp"
                             android:right="1dp"  android:top="1dp" />
                    <solid android:color="#20d5d5d5" />
                </shape>
            </item>
            <item>
                <shape>
                    <corners android:radius="6dp" />
                    <padding android:bottom="1dp" android:left="1dp"
                             android:right="1dp"  android:top="1dp" />
                    <solid android:color="#30cbcbcb" />
                </shape>
            </item>
            <item>
                <shape>
                    <corners android:radius="4dp" />
                    <padding android:bottom="1dp" android:left="1dp"
                             android:right="1dp"  android:top="1dp" />
                    <solid android:color="#50bababa" />
                </shape>
            </item>
        
            <!-- Background -->
            <item>
                <shape>
                    <solid android:color="@color/gray_100" />
                    <corners android:radius="4dp" />
                </shape>
            </item>
        </layer-list>
        

        【讨论】:

        • 请为您提供的代码添加描述。
        • 非常好的仅xml解决方案
        【解决方案11】:

        这个问题可能已经过时了,但对于希望通过简单方法实现复杂阴影效果的任何人,请查看我的库 https://github.com/BluRe-CN/ComplexView

        使用该库,您可以更改阴影颜色、调整边缘等等。 这是一个实现您所寻求的示例。

        <com.blure.complexview.ComplexView
                android:layout_width="400dp"
                android:layout_height="600dp"
                app:radius="10dp"
                app:shadow="true"
                app:shadowSpread="2">
        
                <com.blure.complexview.ComplexView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:color="#fdfcfc"
                    app:radius="10dp" />
            </com.blure.complexview.ComplexView>
        

        要更改阴影颜色,请使用 app:shadowColor="your color code"。

        【讨论】:

          【解决方案12】:

          使用高度属性进行阴影效果:

          <YourView
              ...
              android:elevation="3dp"/>
          

          【讨论】:

          • 使用 Elevation 需要设备运行 Lollipop。
          【解决方案13】:

          使用这个形状作为背景:

          <?xml version="1.0" encoding="utf-8"?>
          <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
          
              <item android:drawable="@android:drawable/dialog_holo_light_frame"/>
          
              <item>
                  <shape android:shape="rectangle">
                      <corners android:radius="1dp" />
                      <solid android:color="@color/gray_200" />
                  </shape>
              </item>
          
          </layer-list>
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2017-12-24
            • 2013-02-17
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2011-05-23
            相关资源
            最近更新 更多