如何在android中将阴影设置为View？

Question

我想知道如何在android中的任何常规视图中添加阴影图层.例如:假设我有一个布局xml,显示这样的东西..

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  
    android:layout_height="wrap_content"  
    android:layout_width="wrap_content"  
    <Button....  
    ...  
</LinearLayout>  

现在当它显示时,我希望它周围有一个阴影.

Answer 1

创建阴影的最佳方法是使用9patch图像作为视图的背景(或ViewGroup包装视图的背景).

第一步是创建一个带有阴影的png图像.我用photoshop创建了这样一个图像.它真的很简单.

• 使用Photoshop创建新图像.
• 添加图层并创建一个4x4的黑色方块.
• 通过在图层资源管理器中选择图层并单击标题为fx的按钮并选择投影,在图层上创建阴影.
• 将图像导出为png.

下一步是从该图像创建9-patch drawables.

• 打开draw9patch从android-sdk/tools
• 打开图像 draw9patch
• 在方块的四边创建4条黑色线条,如下所示,然后将图像保存为shadow.9.png.

现在,您可以将此阴影添加为要添加阴影的视图的背景.添加shadow.9.png到res/drawables.现在将其添加为背景:

<LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/shadow"
  android:paddingBottom="5px"
  android:paddingLeft="6px"
  android:paddingRight="5px"
  android:paddingTop="5px"
>

我最近写了一篇博文,详细解释了这一点,并包含了我用来创建阴影的9patch图像.

Answer 2

假设您将使用线性布局(我已经考虑了垂直线性布局)..并且在您的线性布局下面有一个视图.现在这个视图提供了一个开始颜色和结束颜色..我也想得到这个东西,它的为我工作..如果你需要更好的效果,那么只需要解决开始和结束的颜色.

activity_main

<?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" >

    <LinearLayout
        android:id="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@drawable/layout_back_bgn"
        android:orientation="vertical" >
    </LinearLayout>

    <View
        android:layout_below="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@drawable/shadow"
        >
    </View>


</LinearLayout>

layout_back_bgn.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

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

</shape>

shadow.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle">    
    <gradient
        android:startColor="#4D4D4D"
        android:endColor="#E6E6E6"
        android:angle="270"
        >
    </gradient>
</shape>

我试图在使用上面的代码后发布我拥有它的图像,但stackoverflow不允许我因为我没有声誉.抱怨.

Answer 3

您可以使用自API级别21以来可用的高程

由Z属性表示的视图的高程决定了其阴影的视觉外观:具有较高Z值的视图会投射更大,更柔和的阴影.具有较高Z值的视图会遮挡具有较低Z值的视图; 但是,视图的Z值不会影响视图的大小.要设置视图的高程:

在布局定义中,使用  

android:elevation

 属性.要在活动代码中设置视图的高程,请使用

View.setElevation()

 方法.

资源

Answer 4

这是我的解决方案的俗气版本......这是对此处找到的解决方案的修改

我不喜欢角落的样子，所以我把它们都褪了色......

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Layer 0-->
<!--Layer 1-->
<!--Layer 2-->
<!--Layer 3-->
<!--Layer 4 (content background)-->

<!-- dropshadow -->
<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#10CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#20CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#30CCCCCC"
            android:angle="180"/>

        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#40CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#50CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<!-- content background -->
<item>
    <shape>
        <solid android:color="@color/PostIt_yellow" />
    </shape>
</item>

Answer 5

有一个简单的技巧，使用两个视图形成阴影。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:padding="10dp"
    android:background="#CC55CC">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="0">
            <TableRow>
                <LinearLayout
                    android:id="@+id/content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView  
                        android:layout_width="fill_parent" 
                        android:layout_height="wrap_content"
                        android:background="#FFFFFF" 
                        android:text="@string/hello" />
                </LinearLayout>
                <View
                    android:layout_width="5dp"
                    android:layout_height="fill_parent"
                    android:layout_marginTop="5dp"
                    android:background="#55000000"/>
            </TableRow>
        </TableLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:background="#55000000"/>
    </LinearLayout>
</FrameLayout>

希望这有帮助。