最近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资源,就能做出第一张图的效果啦~
转载请注明出处
与君共勉