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

清疚 2022-08-10 03:46 157阅读 0赞

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

在看这篇文章之前，可以看下这个小例子：[镂空按钮的实现][Link 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    #####

###### 简介： ######

> 将多个图片或上面两种效果按照顺序层叠起来

###### 例子： ######

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

效果图：

![Center][]

##### 4.最后 #####

以上三个标签可以揉合到一块儿来使用，所要实现的效果就是上面三种标签的说明，比如下面这个例子：

[Link 1]: http://blog.csdn.net/brokge/article/details/41318117
[Center]: /images/20220731/7b68ca2228304253b12060d4a2aa66fb.png