Android之shape属性详解

雨点打透心脏的1/2处 2022-07-24 05:20 346阅读 0赞

有时候 ，为了满足一些需求，我们要用到 shape 去定义 一些背景，shape 的用法 跟图片一样 ，可以给View设置 Android:background=”@drawable/shape”, 定义的shape 文件，放在 res/shape 目录下

通常我们可以用shape 做 button 的背景选择器，也可以做切换tab 时，底部的下划线。

先看我们用shape 都可以做什么

shape下面 一共有6个子节点， 常用的 就只有 四个，padding 和size 一般用不到。

*  corners ———-圆角
 *  gradient ———-渐变
 *  padding ———-内容离边界距离
 *  size　————大小　
 *  solid 　———-填充颜色
 *  stroke ———-描边

<?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"/>
        
        <gradient
            android:startColor="@android:color/white"
            android:centerColor="@android:color/black"
            android:endColor="@android:color/black"
            android:useLevel="true"
            android:angle="45"
            android:type="radial"
            android:centerX="0"
            android:centerY="0"
            android:gradientRadius="90"/>
        
        <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"
            android:dashGap="2dp"/>
    </shape>

### shape 做虚线 ###

拿shape 做虚线,shape 设置为line ， stroke 是描边属性，  
其中 dashGap dashWidth 两个属性彼此一起存在才生效。

dashGap ：两段之间的空隙宽度、  
dashWidth ：一段线的宽度

### 效果如下 ###

![20150708154456297][]

### shape做渐变实线 ###

gradient 表示渐变  
angle 渐变角度，45的倍数。  
startColor endColor centerColor 起 止 中 的颜色

### 效果如下 ###

![20150708154620189][]

### shape 做view背景选择器 ###

这里注意 ，item 的 state\_pressed=true 是选择状态，按下，另一个不设置 就是 正常状态。  
solid ：是填充颜色  
corners：设置 四个角的弧度

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true"  >
            <shape xmlns:android="http://schemas.android.com/apk/res/android"
                android:shape="rectangle">
    
                
                <solid 
                    android:color="#ffffff" />  
    
                  
                
             
                  
                <corners
                    android:topRightRadius="10dp"     
                    android:bottomLeftRadius="10dp"   
                    android:topLeftRadius="10dp"    
                    android:bottomRightRadius="10dp"    
                    />
            </shape>
        </item>
        <item >
            
            <shape xmlns:android="http://schemas.android.com/apk/res/android"
    
                android:shape="rectangle">
                <gradient  
                    android:startColor="#55B4FE"  
                    android:endColor="#3d8FFB" 
                    android:type="linear"/>
                  
             
                  
                <corners
                    android:topRightRadius="10dp"     
                    android:bottomLeftRadius="10dp"   
                    android:topLeftRadius="10dp"    
                    android:bottomRightRadius="10dp"    
                    />   
            </shape>
        </item>
    
    </selector>

### 效果如下 ###

![20150708155208695][]

### shape 做矩形 ###

android:shape=”rectangle”选为矩形

<?xml version="1.0" encoding="utf-8"?>
    <shape  xmlns:android="http://schemas.android.com/apk/res/android" 
        android:shape="rectangle">
    
    
    
        
        <gradient
            android:type="linear"
            android:startColor="@android:color/holo_blue_bright"
            android:centerColor="@android:color/holo_green_dark"
            android:endColor="@android:color/holo_red_light"
            android:useLevel="true"
            android:angle="45"/>
    
    
    
    
        
    
    
        
        <stroke
            android:width="2dp"
            android:color="@android:color/black"/>
    
    </shape>

### 效果如下 ###

![20150708155824480][]

### shape 作描边矩形 和 椭圆 ###

shape 作描边矩形 和 椭圆  
这里注意shape  
android:shape=”oval” 椭圆

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
        android:shape="rectangle">
    
    
        
        <solid
            android:color="@android:color/holo_blue_bright"/>
    
        
        <stroke
            android:width="2dp"
            android:color="@android:color/black"
            android:dashWidth="1dp"
            android:dashGap="2dp"/>
    
        <corners 
          android:topLeftRadius="20dp"            
    android:topRightRadius="20dp"           
    android:bottomLeftRadius="20dp"     
    android:bottomRightRadius="20dp" 
            android:radius="50dp"/>
    </shape>

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
        android:shape="oval">
    
    
        
        <solid
    
            android:color="@android:color/holo_orange_light"/>
    
        
        <stroke
            android:width="2dp"
            android:color="@android:color/black"/>
    
    </shape>

### 效果如下 ###

![20150708160002191][]

### 代码 ###

[ShapeDemo代码][ShapeDemo]

### 参考链接 ###

[\*Android shape属性整理 - Because if I don’t write it down, I’ll forget it - 博客频道 - CSDN.NET][Android shape_ - Because if I don_t write it down_ I_ll forget it - _ - CSDN.NET]

[20150708154456297]: /images/20220722/eccb8ebdead94de388245f635d6981ef.png
[20150708154620189]: /images/20220722/fd996e3fc9b44e218801731c61ffaca1.png
[20150708155208695]: /images/20220722/38e5f01da8a749f5aa020771c45cd730.png
[20150708155824480]: /images/20220722/9ff16b3dd6304615b0987ac2941b0b6e.png
[20150708160002191]: /images/20220722/5763b7d5a81741f0b48fa3d302e2fb18.png
[ShapeDemo]: http://download.csdn.net/detail/u011733020/8880615
[Android shape_ - Because if I don_t write it down_ I_ll forget it - _ - CSDN.NET]: http://blog.csdn.net/u011733020/article/details/46804817