Android：shape和selector和layer-list的（详细说明）

和在Android UI设计中经常用到。比如我们要自定义一个圆角Button，点击Button有些效果的变化，就要用到和。
可以这样说，和在美化控件中的作用是至关重要。

先来看一个例子：

通过xml文件实现自定义圆角镂空按钮，以及点击效果

1.在drawable中创建按钮背景selector器

circle_corner_button_selector.xml

2.分别定义不同选择操作下的效果

首先：circle_corner_button.xml文件

和circle_corner_button_pressed.xml文件

最后的按钮效果应该是这样的：

正常情况下：

点击后的样式：

1.Shape

简介

• 作用：XML中定义的几何形状
• 位置：res/drawable/文件的名称.xml

使用的方法：

• Java代码中：R.drawable.文件的名称
• XML中：Android:background="@drawable/文件的名称"

属性：

 Android:shape=["rectangle" | "oval" | "line" | "ring"]

其中rectagle矩形，oval椭圆，line水平直线，ring环形

中子节点的常用属性：

 渐变

Android:startColor  

起始颜色

Android:endColor  

结束颜色             

Android:angle  

渐变角度，0从左到右，90表示从下到上，数值为45的整数倍，默认为0；

Android:type  

渐变的样式 liner线性渐变 radial环形渐变 sweep

  内部填充

Android:color  

填充的颜色

描边

Android:width 

描边的宽度

Android:color 

描边的颜色

Android:dashWidth

 表示'-'横线的宽度

Android:dashGap 

表示'-'横线之间的距离

圆角

Android:radius  

圆角的半径 值越大角越圆

Android:topRightRadius  

右上圆角半径

Android:bottomLeftRadius 

右下圆角角半径

Android:topLeftRadius 

左上圆角半径

Android:bottomRightRadius 

左下圆角半径

边界填充

android:bottom="1.0dip" 

底部填充

android:left="1.0dip" 

左边填充

android:right="1.0dip" 

右边填充

android:top="0.0dip" 

上面填充
 

 

2.Selector

简介

• 根据不同的选定状态来定义不同的现实效果
• 分为四大属性：
• android:state_selected 是否选中
• android:state_focused 是否获得焦点
• android:state_pressed 是否按压
• android:state_enabled 是否设置是否响应事件,指所有事件
• 另：
• android:state_window_focused 默认时的背景图片
• 引用位置：res/drawable/文件的名称.xml

使用的方法：

• Java代码中：R.drawable.文件的名称
• XML中：Android:background="@drawable/文件的名称"

 

 

3. layer-list 是啥？有啥作用？

点击查看 安卓官方开发指南中关于layerlsit的说明

(1). layer-list 是啥？

简单理解，layer 是层，list 是列表，那么 layer-list 就是层列表的意思。但是，是什么层列表呢？？ 其实 layer-list 是用来创建 LayerDrawable 的，LayerDrawable 是 DrawableResource 的一种， 所以，layer-list 创建出来的是 图层列表，也就是一个drawable 图形。

(2). layer-list 有啥作用？

上面已经说过，layer-list 是用来创建 图层列表的，通过它能创建出一些特殊的 drawable， 比如：
 

• 下图 AlertDialog 中，我们只需要设置 button 的 顶部边线，以及 左侧button的右边线（或者右侧button的左边线），这种时候我们就无法直接使用 shape 了，因为直接使用 shape 绘制出来的是四个边框； 如果让美工切图也可以，但那样的话灵活度就差了很多，而且会增加app的体积；这种情况下，使用 layer-list 就是最佳选择。当然，layer-list 的用途还有很多，这里只是举一个例子，具体的使用请继续往下看。
• 

 

2. layer-list 的大致原理

layer-list 的大致原理类似 RelativeLayout（或者FrameLayout） ，也是一层层的叠加 ，后添加的会覆盖先添加的。在 layer-list 中可以通过 控制后添加图层距离最底部图层的 左上右下的四个边距等属性，得到不同的显示效果。

• 上面示例图中，AlertDialog 底部的 ok按钮 的背景就是用layer-list实现的。该layer-list 中，底层使用一个填充色为蓝色 的shape，上层使用一个填充色为白色的shape ，然后控制上层距离最底层的顶部边距为1dp , 这样在视觉上就形成了一个 具有蓝色顶部边线的白色背景。具体代码继续往下看。
   

3.1. layer-list 基本使用示例：

因 layer-list 创建出来的也是 drawable 资源，所以，同 shape selector 一样，都是定义在 res 中的 drawable 文件夹中，也是一个 xml 文件。使用的时候，同shape selector , 布局文件中使用 @drawable/ xxx 引用, 代码中使用 R.drawable.xxx 引用。

layer-list 中不同的图层使用 item 节点来定义。

(1). 效果1 ：单一边线

效果图：

图中，TextView 只有一个顶部边线

具体代码：

• 创建带有蓝色顶部边线的 layer-list 图

在 res 目录中的 drawable 目录下，创建名称为 singleline.xml 的xml 文件，然后编辑 layer-list 的详细代码，如下：

• 使用 layer-list 图，设置为textView的背景

(2). 效果2 ：双边线

效果图：

图中，TextView 具有上下边线 

具体代码：

• 创建带有蓝色顶部和底部边线的 layer-list 图

• 使用 layer-list 图，设置为textView的背景

(3). 效果3 ：阴影

效果图：

具体代码：

• 创建 layer-list

• 使用 layer-list 图，

 

(4). 效果4 : 图片层叠

图片层叠的时候，有两种效果，一种是缩放后层叠，一种是不缩放的层叠。默认是缩放效果。具体效果以及实现代码如下：

• 效果图 1) : 带有缩放效果的

或者也可以使用如下代码，实现缩放的叠加图：

• 使用 layer-list 图，

效果图 2)：不带缩放效果的

• 注意： 
• A. 不缩放的时候，必须在 item 节点中使用 bitmap 节点，并给 bitmap 设置 gravity=center ;
• B. 虽然在实现缩放效果的时候，可以直接使用 item 中的 drawable属性，但实现不缩放的效果时，如果还用drawable 属性，即便给item 设置了gravity =center ，在真机上的效果依旧是缩放的。（但模拟器是不缩放的）
   

• 使用 layer-list 图，

(5). 效果5 ：叠加旋转

• 效果图：

具体代码：

• 创建 layer-list

旋转的时候，只需要给出 起始的角度（ fromdegress ）即可。

• 使用 layer-list 图，

3.2. layer-list 的扩展使用

(1).实现选择器的效果

主要使用组件：RadioGroup Selector layer-list

• 1). 效果图：

• 2). 具体代码

定义 selector 选择器 

selector 的 item 节点中，直接嵌套 layer-list 
当然也可以先写好layer-list ，然后再去引用

• 注意： 
• 在上面的代码中，由于并没有具体的shape ，所以可以省略shape , 直接用 color , 简化后的代码如下：

•  

• 注意： 
• 在 RadioGroup 中，是通过 RadioButton 的 id 来控制是否选中。 
• 所以，如果需要设置某一个 RadioButton 为默认选中，就必须给该 RadioButton 设置 id ； 
• 如果不设置 id ，导致的结果就是该 RadioButton 会一直处于选中状态！！！
   

3.3单一边线的样式

就像上面这个图形很简单,左右两边各一个Button,如果用单一的drawable中的shape绘制,就是左边背景是白色边线灰色背景左边两个圆角,右边背景是白色边线蓝色背景右边两个圆角,出来的实际效果是下图:

中间明显一条白线明显比较粗,这是因为左右两边作为背景的drawable图都有边线.这时候如果用layer-list,就可以将其中一侧(左边或右边)的背景定义为某一边无边线的样式:

实现起来也很简单,第一层item正常绘制,第二层绘制一个不带边框的同背景色的形状,如果某一边是无边界线,那么除了这个边,其它边都给一个偏移量(item节点里面的bottom等),偏移量取决于第一层的边线宽度

3.4套环类样式

最典型的就是同心圆:

 

最近自己写了一个小程序，大家可以关注一下，附带源码：

搬砖之余看个电影放松，扫码关注，最新，最全的各种影视资源，省去各种VIP，直接观看