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

开发项目中，经常需要用到实线，虚线，渐变线条，方角按钮，圆角按钮，渐变按钮，叠加图片等效果。最初的时候，我主要是通过普通图片和.9图来实现不同的图片背景和线条效果的，实现出来的效果也是蛮不错的。

但是后来发现这样不太合适，一是不够灵活；二是要在项目中存放大量的图片资源，极大的增加了App的大小；三是发现使用Androd自带的属性就可以实现大多数我们需要的效果，既然Android自带的东西可以实现这样效果，为什么不用呢？

于是乎，抽时间整理了一下和Shape，gradient，Selector，layer_list相关的属性，做了个小demo，写篇技术短文，让自己进一步巩固这些基础以及方便日后查阅。

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



一、shape简介

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

效果图：



shape的常见取值：

<shape>  Android:shape=["rectangle" | "oval" | "line" | "ring"] </shape>
*其中rectagle矩形，oval椭圆，line水平直线，ring环形*

子节点的常用属性：

<?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的分类：

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可以实现多个图层堆叠显示的效果，借这个特性可以做一些特别的效果（比如：阴影、投影，旋转叠加效果等）。

- 效果图：







简单介绍一下效果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>

关于项目中闪屏页无白屏秒开和分屏过渡动画的实现：

请参考这篇文章《闪屏页无白屏秒开和分屏过渡动画的实现》

demo下载地址：点击打开