自定义View-第十三步:xml标签:shape、selector、layerlist

前言

根据启舰 的博客所学习的自定义View。

一、shape讲解

利用代码绘制出背景效果,可以定义填充色、描边、圆角、渐变等
1. 使用方法
在res/drawable文件夹下,新建一个文件,命名为xx.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners android:radius="3dp" />
    <padding
        android:left="3dp"
        android:right="3dp"
        android:top="2dp"
        android:bottom="2dp"/>
    <stroke
        android:width="1px"
        android:color="@color/xhc_red" />
</shape>

调用的时候,一般这样:

  android:background="@drawable/xx"

2. 具体讲解(corners、gradient、padding、size、solid、stroke)

  1. Corners
<corners    //定义圆角    
    android:radius="dimension"    //全部的圆角半径,与其它四个并不能共同使用
    android:topLeftRadius="dimension"   //左上角的圆角半径    
    android:topRightRadius="dimension"  //右上角的圆角半径    
    android:bottomLeftRadius="dimension"    //左下角的圆角半径    
    android:bottomRightRadius="dimension" />    //右下角的圆角半径   
  1. solid和stroke
<solid  //指定内部填充色
 android:color="color" />    
<stroke        //描边属性 
    android:width="dimension"   //描边的宽度    
    android:color="color"   //描边的颜色    
    // 以下两个属性设置虚线    
    android:dashWidth="dimension"   //虚线的宽度,值为0时是实线    
    android:dashGap="dimension" />      //虚线的间隔   
  1. size和padding
<size    //定义图形的大小
  android:width="dimension"    
  android:height="dimension" />  
<padding     //定义内部边距
    android:left="dimension"    
    android:top="dimension"    
    android:right="dimension"    
    android:bottom="dimension" />  

举个栗子⤵️

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="2dp"/>
    <solid
        android:color="@color/colorPrimary"/>
    //蓝色
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent"/>
    //红色
    <padding
        android:bottom="3dp"
        android:left="5dp"
        android:right="5dp"
        android:top="3dp"/>
    <size
        android:width="160dp"/>
</shape>
   <TextView
       android:layout_centerInParent="true"
       android:textColor="#fff"
       android:gravity="center"
       android:text="shape demo"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@drawable/shapedemo"
       />

效果如下:


  1. gradient
<gradient   
    android:type=["linear" | "radial" | "sweep"]    //共有3中渐变类型,线性渐变(默认)/放射渐变/扫描式渐变    
    android:angle="integer"     //渐变角度,必须为45的倍数,0为从左到右,90为从上到下    ,只对线性渐变linear有效
    android:centerX="float"     //渐变中心X的相对位置,范围为0~1    
    android:centerY="float"     //渐变中心Y的相对位置,范围为0~1    
    android:startColor="color"   //渐变开始点的颜色    
    android:centerColor="color"  //渐变中间点的颜色,在开始与结束点之间    
    android:endColor="color"    //渐变结束点的颜色    
    android:gradientRadius="float"  //渐变的半径,只有当渐变放射类型radial时才能使用    
引用自http://blog.csdn.net/harvic880925/article/details/41850723

举个栗子⤵️

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="2dp"/>
    <padding
        android:bottom="3dp"
        android:left="5dp"
        android:right="5dp"
        android:top="3dp"/>
    <size
        android:height="160dp"
        android:width="160dp"/>

    <gradient
        android:type="sweep"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:centerX="0.2"
        android:centerY="0.8"/>
</shape>

效果图:

3. Shape的属性(rectangle、oval、line、ring)

android:shape=["rectangle" | "oval" | "line" | "ring"]    
//shape的形状,默认为矩形,可以设置为矩形(rectangle)、椭圆形(oval)、线性形状(line)、环形(ring)    

//下面的属性只有在android:shape="ring"时可用:    
android:innerRadius      //   尺寸,内环的半径。    
android:innerRadiusRatio  //  浮点型,以环的宽度比率来表示内环的半径,    
android:thickness           //尺寸,环的厚度    
android:thicknessRatio     // 浮点型,以环的宽度比率来表示环的厚度,例如,如果android:thicknessRatio="2", 那么环的厚度就等于环的宽度除以2。这个值是可以被android:thickness覆盖的,默认值是3.    
android:useLevel         //   boolean值,如果当做是LevelListDrawable使用时值为true,否则为false.   一般设为false。

举个栗子:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="ring"
       android:innerRadius="10dp"
       android:thickness="50dp"
       android:useLevel="false">
<!--(这里一定要要加上useLevel属性并定义为false,不然没有效果)-->
    <solid android:color="#ff00ff"/>
    <size
        android:width="160dp"
        android:height="110dp" />
</shape>
效果图

二、selector讲解

用于定义在用户不同的动作状态下,使用不同的背景值

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"] //如果这里设置成true就相当于居中,如果不设置或者设置为false就是拉伸
    android:dither=["true" | "false"]//抖动效果
    android:variablePadding=["true" | "false"] >//可变的填充,默认值为false,一般建议设置为false就行。 
    <item
        android:drawable="@[package:]drawable/drawable_resource"// 设置图标或者drawable
 android:state_pressed=["true" | "false"]//是否被按下
 android:state_checked=["true" | "false"]  //是否已勾选
 android:state_checkable=["true" | "false"] //是否可勾选
 android:state_selected=["true" | "false"] // 是否被选中
 android:state_enabled=["true" | "false"]      // 是否可用
 android:state_focused=["true" | "false"]     // 是否已获得焦点
 android:state_active=["true" | "false"]   //是否激活
 android:state_window_focused=["true" | "false"]   //窗口是否获得焦点
 android:state_first=["true" | "false"]  //是否处于开始状态
 android:state_last=["true" | "false"]     //是否处于结束状态
 android:state_hovered=["true" | "false"] //光标是否停留在View的自身大小范围内的状态
</selector>

系统在selector寻找符合要求的item时是按照代码的顺序从上向下遍历的,一旦发现符合状态的item就直接使用它,并停止继续寻找!如果把这些状态理解成集合的话,那么位于下面的集合一定不要是上面某个集合的子集,否则是不会轮到下面这个集合出场的。

selector用法举例

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
<item   
android:state_pressed="true"  
android:drawable="@drawable/picture1" />
<item  
android:drawable="@drawable/picture2"/>  //不能但在最上边哦,不然会失效的
</selector>  

效果:
1.在按压状态下展示picture1这种图片;
2.在默认状态下展示picture2这种图片;

三、layerlist讲解

主要作用就是将多个图层按照顺序叠起来,做为一个背景图来显示。
1. layerlist用法举例

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

   <item
       android:drawable="@mipmap/bear"
       />

   <!--left等四个偏移量和控件的margin设置差不多,都是外间距的效果。
   如果不设置偏移量,前面的图层就完全挡住了后面的图层,从而也看不到后面的图层效果了。 -->
   <item
       android:bottom="2dp"
       android:left="2dp"
       android:right="2dp"
       android:top="2dp">
       <shape>
           <corners android:radius="25dp"/>
           <solid android:color="#00ff00"/>
       </shape>
   </item>

   <item
       android:bottom="5dp"
       android:left="5dp"
       android:right="5dp"
       android:top="5dp">
       <selector>
           <item android:state_pressed="true"
               >
               <shape>
                   <corners android:radius="25dp"/>
                   <solid android:color="#FF0000"/>
               </shape>
           </item>
           <item
               >
               <shape>
                   <corners android:radius="25dp"/>
                   <solid android:color="#FFFFFF"
                       />
               </shape>
           </item>
       </selector>
   </item>

</layer-list>
   <TextView
       android:clickable="true"
       android:layout_centerInParent="true"
       android:textColor="#fff"
       android:gravity="center"
       android:text="shape demo"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@drawable/shapedemo"
       />

效果:


参考网址

Android中的Selector使用详解
Android开发中的drawable文件:shape、layer-list和selector标签

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,799评论 25 707
  • 概述 今天我们来探究一下android的样式。其实,几乎所有的控件都可以使用 background属性去引用自定义...
    CokeNello阅读 4,817评论 1 19
  • 1.Shape通过Shape可以在xml中绘制各种形状在res/drawable文件夹下,新建一个文件:shape...
    疯子一般的勇士阅读 1,133评论 0 2
  • 记得刚开始学Android时,看着自己完全用系统控件写出的不忍直视的界面,对于如何做出不一样的按钮,让它们在不同状...
    biloba阅读 1,701评论 1 11
  • 前文,看到技术美文,忍不住想拿出来分享.下面是原文地址 点击原文地址 Objective-C被夹在了两个世界中间 ...
    指尖猿阅读 548评论 0 1