关闭

layer-list简单使用教程

标签: Androiduilayer-listdrawableshape
489人阅读 评论(0) 收藏 举报
分类:

最近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资源,就能做出第一张图的效果啦~

转载请注明出处

   与君共勉  

0
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:856次
    • 积分:26
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档