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

转载请注明出处

   与君共勉  

相关文章推荐

Android之用layer-list,shape,selector画各种背景

1.Shape   简介 作用:XML中定义的几何形状 位置:res/drawable/文件的名称.xml 使用的方法:   Java代码中:R.drawable.fileName X...

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

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

使用layer-list绘制圆角矩形

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

layer-list多图层叠加效果实现圆角功能 sharp属性详解

在Android的开发过程中,我们可能会做圆角的效果出来,如下图所示: 四个角都是圆角的效果。如果让UI设计人员直接出图,可能会更简单一些。但是我们使用android中layer-list多图层叠...

如何在caffe中添加新的Layer

本文分为两部分,先写一个入门的教程,然后再给出自己添加maxout与NIN的layer的方法...

layer-list -- layer-list的基本使用介绍

1. layer-list 是啥?有啥作用?点击查看 安卓官方开发指南中关于layerlsit的说明(1). layer-list 是啥?简单理解,layer 是层,list 是列表,那么 layer...

layui学习笔记

-----初识layui Layui兼容除IE6/7以外的全部浏览器,并且绝大多数结构支持响应式; 获得layui后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件...
  • lhm2016
  • lhm2016
  • 2016年12月20日 15:23
  • 10535

layer js web弹窗、层

1、官方网址:http://layer.layui.com/ 我们提到的基础参数主要指调用方法时用到的配置项,如:layer.open({content: ''})layer.msg('', ...

JFinal集成Beetl静态模板

话说Beetl模板框架比Freemarker模板还要快,至于到底怎么样,目前还没有感觉到,不管那么多了,上手再说。 首先需要下载beetl包:Beetl模板路径 Beetl提供JFinal框架的集...

【技术文档】jeecg3.7.1-maven搭建环境入门

【技术文档】jeecg3.7-maven搭建环境入门
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:layer-list简单使用教程
举报原因:
原因补充:

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