layer-list简单使用教程

最近UI设计了这样一张图，一开始的想法是自定义view自己画出来，后来了解到layer-list这个标签，相当方便的解决了这个需求简单又好看~~下面简单记录一下layer-list的使用教程

<strong><RelativeLayout
            android:id="@+id/rl_edit_userImg"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerInParent="true"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/circle_layer"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true">

            <com.rioan.www.zhanghome.view.RoundImageView
                android:id="@+id/iv_me_edit_userImg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:clickable="true"
                android:src="@drawable/dog" />
        </RelativeLayout>
</strong>

layer-list简单来说就是可以层叠的放置drawable类型的文件，这里我用的是三个drawable文件层叠，每个drawable文件里面都是用shape画出的椭圆。

1.首先用相对布局，中间放置一张圆形的图片（图片裁剪成圆形网上已经有很多开源的控件了，这里不做讲述）;

2.相对布局的background 属性就是我们需要编写的文件了；

3.我们先画好三个椭圆形的drawable：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="1dp"
        android:color="@color/white" />
    <size
        android:width="80dp"
        android:height="70dp" />
    <solid android:color="@android:color/transparent"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="1dp"
        android:color="@color/white" />
    <size
        android:width="70dp"
        android:height="80dp" />
    <solid android:color="@android:color/transparent"/>

</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="1dp"
        android:color="@color/white" />
    <size
        android:width="80dp"
        android:height="80dp" />
    <solid android:color="@android:color/transparent"/>

</shape>

4.最后定义一个drawable文件，我这里命名为circle-layer：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/circle_shape"
        android:top="6dp"
        android:right="4dp"/>
    <item
        android:bottom="6dp"
        android:right="3dp"
        android:drawable="@drawable/circle_shape2" />
    <item
        android:drawable="@drawable/circle_shape3"
        android:left="6dp" />
</layer-list>

可以自己调节每一层的drawable的显示位置，top、right、bottom、left，最后效果图是这样滴：

在相对布局的background属性里引用layer-circle这个drawable资源，就能做出第一张图的效果啦~

转载请注明出处

   与君共勉