如何在Android中设置阴影视图?
我想知道如何添加一个阴影层到任何一般的视图在Android中。 例如:假设我有一个布局xml,显示这样的东西..
<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" <Button.... ... </LinearLayout>
现在,当它显示时,我想在它周围有一个阴影。
有一个简单的伎俩,使用两个视图,形成了阴影。
<?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>
希望这个帮助。
创build阴影的最佳方法是使用9patch
图像作为视图的背景(或包装视图的ViewGroup
)。
第一步是创build一个带有阴影的png图像。 我用photoshop来创build这样一个图像。 它非常简单。
- 用Photoshop创build一个新的图像。
- 添加一个图层并创build一个4×4的黑色方块。
- 通过在图层浏览器中select图层并单击标题为fx的button并select投影来在图层上创build阴影。
- 将图像导出为png。
下一步是从这个图像创build9个补丁的drawables。
- 从
android-sdk/tools
打开draw9patch
- 在
draw9patch
打开图像 - 在正方形四边创build4条黑线,然后保存为
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" >
我最近写了一篇博客文章 ,详细解释了这一点,并包含了我用来创build影子的9patch映像。
假设你会使用线性布局(我已经考虑了垂直线性布局)..并有一个视图正好在你的线性layout.Now这个视图提供了一个开始颜色和结束颜色..我也想得到这个东西,其为我工作..如果你需要一个更好的效果,那么只是围绕起点和终点的颜色。
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 doesnot让我因为我没有声望..不好意思。
您可以使用自API级别21起可用的高程
由Z属性表示的视图的高程决定了其阴影的视觉外观:具有较高Z值的视图投射较大,较柔和的阴影。 具有较高Z值的视图遮挡具有较低Z值的视图; 但是,视图的Z值不会影响视图的大小。 设置视图的高程:
在布局定义中,使用
android:elevation
属性。 要在活动的代码中设置视图的高程,请使用
View.setElevation()
方法。
资源
这是我的解决scheme…这是在这里find的解决scheme的修改
我不喜欢angular落的样子,所以我淡化了所有的angular落。
<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>
</LinearLayout> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="@color/dropShadow" />
在LinearLayout之下使用
另一种方法
在/ drawable文件夹中创build“rounded_corner_bg.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="@color/primaryColor" /> <corners android:radius="4dp" /> </shape> </item> <item android:bottom="2dp" android:left="0dp" android:right="0dp" android:top="0dp"> <shape android:shape="rectangle"> <solid android:color="#F7F7F7" /> <corners android:radius="4dp" /> </shape> </item> </layer-list>
要使用此布局 android:background="@drawable/rounded_corner_bg"