layer-list简单使用教程

原创 2016年06月01日 10:53:09

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

转载请注明出处

   与君共勉  

layer UI学习

http://www.layui.com/doc/layer 使用引入css和js 声明需要使用的模块layui.define(['layer'...
  • amyliyanice
  • amyliyanice
  • 2017年02月27日 11:37
  • 2302

Android开发:shape和selector和layer-list的(详细说明)

shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector。可以这样说,shape和...
  • brokge
  • brokge
  • 2013年08月02日 09:59
  • 123306

Android简单自定义圆形和水平ProgressBar seekbar select layer-list 转

ProgressBar简介 继承于View类,直接子类有AbsSeekBar和ContentLoadingProgressBar,其中AbsSeekBar的子类有SeekBar和Ra...
  • zhaoweixing1989
  • zhaoweixing1989
  • 2015年10月26日 11:25
  • 2028

使用layer-list绘制圆角矩形

在Android中xml资源文件是一个非常强大的工具,向圆角矩形的图案,完全不用单独绘制图片文件,使用xml编写代码就完全可以实现。其实质原理是通过xml代码控制,绘制多个图层,图层堆叠而达到所想要绘...
  • ucxiii
  • ucxiii
  • 2016年05月09日 14:27
  • 766

Android layer-list的属性和使用详解

Android layer-list的属性和使用详解,layer-list是用来多个图层堆叠显示的,借这个特性可以做一些特别的效果(比如:阴影、下面的效果等),也可以投机取巧。 1.代码片 ...
  • pcaxb
  • pcaxb
  • 2015年08月19日 15:47
  • 11013

layer-list实现阴影效果

为控件实现阴影效果,可以有多种方式:多个drawable层叠在一起(不好的实现是多个View层叠达到多个drawable的层叠效果,相对好的实现是在同一个View钟实现多个drawable的层叠) 自...
  • xplee0576
  • xplee0576
  • 2015年11月20日 16:21
  • 1312

layer-list实现阴影和选择器效果

实现这个效果的话,不需要多高深的技术,但是关键是要有耐心和对细节完美的追求。先看效果图: 布局: LinearLayout android:layout_width="18...
  • huang_xiao_yu
  • huang_xiao_yu
  • 2017年03月19日 17:36
  • 303

Layer-list介绍与使用

layer-list 其实就是将多个图片或两种效果按照顺序层叠起来 用于叠加多个图片 实现方式如下: 第一步,在 drawable 文件夹中新建 xml 文件: img_layers.xml 代码...
  • baidu_33221362
  • baidu_33221362
  • 2017年04月17日 22:59
  • 550

用layer-list实现图片旋转叠加、错位叠加、阴影、按钮指示灯

先来看看一个简单的文件: xml version="1.0" encoding="utf-8"?> layer-list xmlns:android="http://schemas.andr...
  • dingguagua99
  • dingguagua99
  • 2016年10月25日 16:26
  • 562

Android开发:shape和selector和layer-list的(详细说明)

shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector。可以这样说,shape和...
  • brokge
  • brokge
  • 2013年08月02日 09:59
  • 123306
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:layer-list简单使用教程
举报原因:
原因补充:

(最多只允许输入30个字)