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

秒速五厘米 2022-02-04 10:55 345阅读 0赞

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

先来看一个例子：

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

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

circle\_corner\_button\_selector.xml

<?xml version="1.0" encoding="utf-8"?>
     
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/circle_corner_button_pressed" android:state_pressed="true"/>
        <item android:drawable="@drawable/circle_corner_button"/>
    </selector>

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

首先：circle\_corner\_button.xml文件

<?xml version="1.0" encoding="utf-8"?>
     
    
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape>
                <solid android:color="#FFFFFF" />
                <corners android:topLeftRadius="5dp" android:topRightRadius="5dp"
                         android:bottomRightRadius="5dp" android:bottomLeftRadius="5dp" />
                <stroke android:width="1dp" android:color="#F58939" />
                <padding
                        android:left="5dp"
                        android:top="5dp"
                        android:right="5dp"
                        android:bottom="5dp"
                        />
            </shape>
        </item>
    </layer-list>

和circle\_corner\_button\_pressed.xml文件

<?xml version="1.0" encoding="utf-8"?>
    
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape>
                <solid android:color="#FFFFFF"/>
                <corners android:topLeftRadius="5dp" android:topRightRadius="5dp"
                         android:bottomRightRadius="5dp" android:bottomLeftRadius="5dp"/>
                <stroke android:width="1dp" android:color="#dbdbdb"/>
                <padding
                        android:left="5dp"
                        android:top="5dp"
                        android:right="5dp"
                        android:bottom="5dp"
                        />
            </shape>
        </item>
     
    </layer-list>

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

正常情况下：

![Center][]

点击后的样式：

![Center 1][]

### 1.Shape ###

简介

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

使用的方法：

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

属性：

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

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

<shape>中子节点的常用属性：

<gradient>  渐变

Android:startColor

起始颜色

Android:endColor

结束颜色

Android:angle

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

Android:type

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

<solid >  内部填充

Android:color

填充的颜色

<stroke >描边

Android:width

描边的宽度

Android:color

描边的颜色

Android:dashWidth

表示'-'横线的宽度

Android:dashGap

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

<corners >圆角

Android:radius

圆角的半径 值越大角越圆

Android:topRightRadius

右上圆角半径

Android:bottomLeftRadius

右下圆角角半径

Android:topLeftRadius

左上圆角半径

Android:bottomRightRadius

左下圆角半径

<padding >边界填充

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/文件的名称"

<?xml version="1.0" encoding="utf-8" ?>     
    <selector xmlns:Android="http://schemas.android.com/apk/res/android">   
        
    <item Android:drawable="@drawable/pic1" />      
        
    <item 
       Android:state_window_focused="false"      
       android:drawable="@drawable/pic_blue" 
       />     
        
    <item 
       Android:state_focused="true" 
       android:state_pressed="true"   
       android:drawable= "@drawable/pic_red" 
       />   
        
    <item 
       Android:state_focused="false" 
       Android:state_pressed="true"   
       Android:drawable="@drawable/pic_pink" 
       />    
        
    <item 
       Android:state_selected="true" 
       android:drawable="@drawable/pic_orange" 
       />     
        
    <item 
       Android:state_focused="true" 
       Android:drawable="@drawable/pic_green" 
       />     
    </selector>

### 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 的用途还有很多，这里只是举一个例子，具体的使用请继续往下看。
 *  ![20161206082249671][]

### 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 只有一个顶部边线  
![20161206100146670][]

**具体代码：**

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

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

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        
        <item>
            <shape>
                <solid android:color="#02a0ef"/>
            </shape>
        </item>
    
        
        <item android:top="1dp">
            <shape>
                <solid android:color="#fff"/>
            </shape>
        </item>
    </layer-list>

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

**(2). 效果2 ：双边线**

效果图：

图中，TextView 具有上下边线

![20161206101542050][]

**具体代码：**

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

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        
        <item>
            <shape>
                <solid android:color="#02a0ef"/>
            </shape>
        </item>
    
        
        <item android:bottom="1dp"
              android:top="1dp">
            <shape>
                <solid android:color="#fff"/>
            </shape>
        </item>
    </layer-list>

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

**(3). 效果3 ：阴影**

**效果图：**

![20161206103757201][]

**具体代码：**

*  创建 layer-list

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        
        <item android:left="3dp"
              android:top="6dp">
            <shape>
                <solid android:color="#b4b5b6"/>
            </shape>
        </item>
    
        
        <item android:bottom="6dp"
              android:right="3dp">
            <shape>
                <solid android:color="#fff"/>
            </shape>
        </item>
    </layer-list>

*  使用 layer-list 图，

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

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

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

![20161206112810579][]

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        
        <item>
            <bitmap
                android:src="@drawable/ic_launcher"/>
        </item>
    
        <item android:left="35dp"
              android:top="35dp">
            <bitmap
                android:src="@drawable/ic_launcher"/>
        </item>
    
        <item android:left="70dp"
              android:top="70dp">
            <bitmap
                android:src="@drawable/ic_launcher"/>
        </item>
    </layer-list>

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

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        
        <item android:drawable="@drawable/ic_launcher">
        </item>
        <item android:drawable="@drawable/ic_launcher"
              android:left="45dp"
              android:top="45dp">
        </item>
        <item android:drawable="@drawable/ic_launcher"
              android:left="90dp"
              android:top="90dp">
        </item>
    </layer-list>

*  使用 layer-list 图，

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

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

![20161206113330851][]

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        
        <item>
            <bitmap
                android:gravity="center"
                android:src="@drawable/ic_launcher"/>
        </item>
    
        <item android:left="35dp"
              android:top="35dp">
            <bitmap android:gravity="center"
                    android:src="@drawable/ic_launcher"/>
        </item>
    
        <item android:left="70dp"
              android:top="70dp">
            <bitmap android:gravity="center"
                    android:src="@drawable/ic_launcher"/>
        </item>
    
    </layer-list>

*  使用 layer-list 图，

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

*  效果图：

![20161206124521242][]

**具体代码：**

*  创建 layer-list

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item>
            <rotate android:fromDegrees="-10" android:pivotX="0"
                    android:pivotY="0">
                <bitmap android:src="@drawable/decibel_blue_background"/>
            </rotate>
        </item>
        <item>
            <rotate android:fromDegrees="10" android:pivotX="0"
                    android:pivotY="0">
                <bitmap android:src="@drawable/decibel_orange_background"/>
            </rotate>
        </item>
        <item>
            <rotate android:fromDegrees="30" android:pivotX="0"
                    android:pivotY="0">
                <bitmap android:src="@drawable/decibel_red_background"/>
            </rotate>
        </item>
    
    
    </layer-list>

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

*  使用 layer-list 图，

<ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/rotate"/>

### 3.2. layer-list 的扩展使用 ###

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

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

*  1). 效果图：

![20161206161512742][]

*  2). 具体代码

**定义 selector 选择器 **

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

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        
        <item android:state_checked="true">
            <layer-list>
                <item>
                    <shape>
                        <solid android:color="#f00"/>
                    </shape>
                </item>
                <item android:bottom="4dp">
                    <shape>
                        <solid android:color="#fff"/>
                    </shape>
                </item>
            </layer-list>
        </item>
    
        
        <item>
            <layer-list>
                <item>
                    <shape>
                        <solid android:color="#f00"/>
                    </shape>
                </item>
                <item android:bottom="2dp">
                    <shape>
                        <solid android:color="#fff"/>
                    </shape>
                </item>
            </layer-list>
        </item>
    </selector>

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

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        
        <item android:state_checked="true">
            <layer-list>
                <item>
                    <color android:color="#f00"/>
                </item>
                <item android:bottom="5dp">
                    <color android:color="#fff"/>
                </item>
            </layer-list>
        </item>
    
        
        <item>
            <layer-list>
                <item>
                    <color android:color="#f00"/>
                </item>
                <item android:bottom="2dp">
                    <color android:color="#fff"/>
                </item>
            </layer-list>
        </item>
    </selector>

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

### 3.3单一边线的样式 ###

![1.png][]

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

![2.png][]

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

![3.png][]

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

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item >
            <shape android:shape="rectangle" >
                <solid android:color="@color/text_gray" />
                <stroke
                    android:width="2dp"
                    android:color="@color/white" />
                <corners
                    android:bottomLeftRadius="5dp"
                    android:topLeftRadius="5dp" />
            </shape >
        </item >
    
        <item
            android:bottom="2dp"
            android:left="2dp"
            android:top="2dp" >
            <shape android:shape="rectangle" >
                <solid android:color="@color/text_gray" />
                <corners
                    android:bottomLeftRadius="5dp"
                    android:topLeftRadius="5dp" />
            </shape >
        </item >
    
    </layer-list >

### 3.4套环类样式 ###

最典型的就是同心圆:

![4.png][]

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <item>
            <shape android:dither="true"
                android:shape="oval">
                <solid android:color="@color/white" />
                <stroke
                    android:color="@color/blue"
                    android:width="1dp" />
            </shape>
        </item>
    
        <item
            android:bottom="20dp"
            android:left="20dp"
            android:right="20dp"
            android:top="20dp" >
            <shape
                android:shape="oval" >
                <solid android:color="@color/blue" />
                <size
                    android:width="30dp"
                    android:height="30dp" />
    
            </shape >
        </item >
    
    </layer-list >

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3emhhbmcxMTAx_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3emhhbmcxMTAx_size_16_color_FFFFFF_t_70 1][]

[Center]: /images/20220204/f7f644cd9ce54783bc65b328c9d37319.png
[Center 1]: /images/20220204/2d2a2d8dd19648b3a1fdfaa5af58ec05.png
[20161206082249671]: /images/20220204/8aad23044b6f4ec8b83e0335efffda54.png
[20161206100146670]: /images/20220204/dbff2222cb1740dd9e84ec200fd94e5e.png
[20161206101542050]: /images/20220204/904e9c87c34c40be881530313e248a14.png
[20161206103757201]: /images/20220204/31a9026979b949dc936b8fccf2dfc829.png
[20161206112810579]: /images/20220204/fdaa57b3b6204c9daad048550fb6f942.png
[20161206113330851]: /images/20220204/76a9bf83add749ab97f737f03d4095bd.png
[20161206124521242]: /images/20220204/b4fdcfa9b21d40cea7f237a7f10e225a.png
[20161206161512742]: /images/20220204/5f5c52cd82604584a1e4e14b27ea4d6b.png
[1.png]: /images/20220204/f72a103216f74ed6bcdac94763f7d10f.png
[2.png]: /images/20220204/039383417f77486aacfb779b19b4f98f.png
[3.png]: /images/20220204/300c58fb5fe441ba81e33fc0bd32914e.png
[4.png]: /images/20220204/cff9f6e3e773438b87fcea4b615542e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3emhhbmcxMTAx_size_16_color_FFFFFF_t_70]: /images/20220204/31cc4867ad79486c824093db78e12146.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3emhhbmcxMTAx_size_16_color_FFFFFF_t_70 1]: /images/20220204/19c887e098914cb8a5cf4d5b28c32fc3.png