【Android开发经验】-- 如何实现带有阴影效果的矩形框？

如何实现一个如下效果的矩形框，框中可以带有文本。

 一、模板

首先在drawable文件夹下新建一个名为shape.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="#0a8c8c8c" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#0fd7d7d7" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#14c7c7c7" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#19c1c1c1" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1ec6c6c6" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#23b7b7b7" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#28aeaeae" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px"  />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#2d9e9e9e" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <corners android:radius="12dp" />
            <gradient
                android:angle="0"
                android:startColor="@color/grey"
                android:endColor="@color/grey"/>
        </shape>
    </item>
</layer-list>

然后在页面的xml文件中使用，代码参考如下：

 <LinearLayout
                    android:layout_width="350dp"
                    android:layout_height="wrap_content"
                    android:background="@drawable/shape"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:padding="20sp"
                    android:paddingLeft="30sp">

...................

</LinearLayout>

二、实例代码

实现以下效果的阴影框

 

shape文件和模板一样，

布局文件，代码如下：（如果没有文字，这是因为我这里用的是数据库传入的数据，你可以手动增加静态数据）

<!--矩形框-->
                <LinearLayout
                    android:layout_width="350dp"
                    android:layout_height="wrap_content"
                    android:background="@drawable/shape"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:padding="20sp"
                    android:paddingLeft="30sp">
<!--左边文本-->
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="8"
                        android:orientation="vertical">

                        <TextView
                            android:id="@+id/text"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textSize="16sp" />
                    </LinearLayout>
<!--右边完成状态-->
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="3"
                        android:layout_gravity="center_vertical">
                        <TextView
                            android:id="@+id/status"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="2"
                            android:textSize="16sp" />
                        <ImageView
                            android:id="@+id/status_image"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" />
                    </LinearLayout>


                </LinearLayout>