使用Android自带属性实现基本的控件展示效果

开发项目中,经常需要用到实线,虚线,渐变线条,方角按钮,圆角按钮,渐变按钮,叠加图片等效果。最初的时候,我主要是通过普通图片和.9图来实现不同的图片背景和线条效果的,实现出来的效果也是蛮不错的。
但是后来发现这样不太合适,一是不够灵活;二是要在项目中存放大量的图片资源,极大的增加了App的大小;三是发现使用Androd自带的属性就可以实现大多数我们需要的效果,既然Android自带的东西可以实现这样效果,为什么不用呢?
于是乎,抽时间整理了一下和Shape,gradient,Selector,layer_list相关的属性,做了个小demo,写篇技术短文,让自己进一步巩固这些基础以及方便日后查阅。

首先展示一下整个demo的效果图(具体实现代码文章结尾给出)

GIF.gif

一、shape简介
我们使用shape可以很方便的在xml文件中实现各种常用的几何形状

  • 效果图:
    shape.png
  • shape的常见取值:
<shape>  Android:shape=["rectangle" | "oval" | "line" | "ring"] </shape>
*其中rectagle矩形,oval椭圆,line水平直线,ring环形*
  • <shape>子节点的常用属性:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 圆角 整型-->
    <corners
        android:radius="9dp"  
        android:topLeftRadius="2dp"  
        android:topRightRadius="2dp" 
        android:bottomLeftRadius="2dp" 
        android:bottomRightRadius="2dp"  />
    
    <!-- 渐变   angle必须为45的整数倍,且type类型必须是linear-->
    <gradient
        android:startColor="@android:color/white"   起始颜色
        android:centerColor="@android:color/black"  中间颜色
        android:endColor="@android:color/black"     结束颜色
        android:useLevel="false"  ["true" | "false"] 如果要使用LevelListDrawable对象,就要设置为true。设置为true无渐变,false有渐变色
        android:angle="45"  渐变角度,0从左到右,90表示从下到上,数值必须为45的整数倍,默认为0,此时type类型必须是linear
        android:type="radial" linear(线性变化,默认是这个),radial(辐射渐变)以及sweep(扫描渐变)
        android:centerX="0"  整型,渐变中心X点坐标的相对位置
        android:centerY="0"  整型,渐变中心Y点坐标的相对位置
        android:gradientRadius="90"  这个表示渐变的半径,当type=radial类型的时候才需要使用
 />
    
    <!-- 各方向的间隔 -->
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/>
    
    <!-- 宽高大小 -->
    <size
        android:width="50dp"
        android:height="50dp"/><!-- 宽度和高度 -->
    
    <!-- 填充的颜色 -->
    <solid
        android:color="@android:color/white"/>
    
    <!-- 描边 -->
    <stroke
        android:width="2dp"
        android:color="@android:color/black"
        android:dashWidth="1dp"  整型 表示'-'横线的宽度, 值为0时,表示为实线。值大于0则为虚线。
        android:dashGap="2dp"    整型 表示'-'横线之间的距离,虚线之间的间隔 即“ - - - - ”
     -->
/>
</shape>

二、selector简介
在程序开发中我们使用selector来做组件的背景,这样我们就可以不需要使用代码来控制组件在不同状态下不同背景和颜色的变化,可以简化很多逻辑代码,使用非常方便。

  • 效果图:
    selector.gif
  • Selector的分类:
    selector其实就是许多不同状态的列表集合体(StateList), 它主要分为两类:Color-Selector 和Drawable-Selector
  • Color-Selector:
    color-selector ,顾名思义就是颜色状态列表,可以跟color一样使用,颜色会随着组件的状态而改变,color-selector资源文件一般存储于/res/color/filename_selector.xml里面
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:color="hex_color"   颜色值,#RGB,$ARGB,#RRGGBB,#AARRGGBB
        android:state_pressed=["true" | "false"]        是否触摸
        android:state_focused=["true" | "false"]        是否获得焦点
        android:state_selected=["true" | "false"]       是否被状态
        android:state_checkable=["true" | "false"]      是否可选
        android:state_checked=["true" | "false"]        是否选中
        android:state_enabled=["true" | "false"]        是否可用
        android:state_window_focused=["true" | "false"] 是否窗口聚焦
    /> 
</selector>
  • Drawable-Selector:

drawable-selector 是背景图状态列表,可以跟图片一样使用,背景会根据组件的状态变化而变化。drawable-selector资源文件一般存储于/res/drawable/filename.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"]      drawable的大小是否当中状态变化,true表示是变化,false表示不变换,默认为false
    android:dither=["true" | "false"]            当位图与屏幕的像素配置不一样时(例如,一个ARGB为8888的位图与RGB为555的屏幕)会自行递色(dither)。设置为false时不可递色。默认true
    android:variablePadding=["true" | "false"]>  内边距是否变化,默认false
    <item
        android:drawable="@[package:]drawable/drawable_resource"  图片资源
        android:state_pressed=["true" | "false"]     是否触摸
        android:state_focused=["true" | "false"]     是否获取到焦点
        android:state_hovered=["true" | "false"]     光标是否经过
        android:state_selected=["true" | "false"]    是否选中
        android:state_checkable=["true" | "false"]   是否可勾选
        android:state_checked=["true" | "false"]     是否勾选
        android:state_enabled=["true" | "false"]     是否可用
        android:state_activated=["true" | "false"]   是否激活
        android:state_window_focused=["true" | "false"] />  所在窗口是否获取焦点
</selector>

**三、layer-list简介 **
Android自带的layer-list可以实现多个图层堆叠显示的效果,借这个特性可以做一些特别的效果(比如:阴影、投影,旋转叠加效果等)。

  • 效果图:
layer-list_01.png
layer_list_02.png
layer_list_03.png
  • 简单介绍一下效果1的实现,首先是布局文件:
    <ImageView
        android:layout_width="66dp"
        android:layout_height="72dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:scaleType="centerInside"
        android:src="@drawable/layer_list_photo_01" />
  • 其中用到了res/drawable/layer_list_photo_01.xml文件:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      
    <!-- 第一层的为QQ企鹅照片-->
    <item android:id="@+id/qq"
        android:drawable="@mipmap/photo_background" />

    <!-- 第二层的为相框照片图案 ,下面的层次会依次覆盖上面的层次;
    left,top,right,bottom分别是距各个方向的距离,灵活使用他们可以实现各种丰富多彩的效果-->
    <item android:id="@+id/qq_background"
        android:drawable="@mipmap/photo"
        android:left="10dp"
        android:top="18dp"
        android:right="25dp"
        android:bottom="35dp" />
</layer-list>

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

推荐阅读更多精彩内容