Android中用shape做渐变，边框，圆角等效果

以前没接触到shape的时候，做圆角，渐变等效果都是依赖图片效果；如果对PS不熟悉，光是做图就要花去大把时间。

废话不讲了，把总结的内容记录下来，俺们不是在写博客，算是做个云笔记吧。

shape用法与selector类似：

1.在res-drawable文件夹新建一个.xml文件;（如btn_style.xml）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:startColor="#1E90FF"
        android:endColor="#EE82EE"
        android:angle="90"/>
    
    <stroke 
        android:width="2dp"
        android:color="#FF8C00"  
        android:dashWidth="5dp" 
        android:dashGap="3dp"
        /> 
    
</shape>

效果图：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#1E90FF"
        android:endColor="#EE82EE"
        android:angle="45"
        android:centerColor="#ffffff"
        />
    
    <stroke 
        android:width="2dp"
        android:color="#FF8C00"  
        android:dashWidth="5dp" 
        android:dashGap="0dp"
        /> 
        
    <corners  
        android:radius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"  
        />
    
  <!--   <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
    
    <solid android:color="#80065e8d" />
  <stroke
    android:dashGap="0dp"
    android:width="4dp"
    android:color="@android:color/white" /> -->
</shape>

效果图：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="40dp" 
    android:thickness="1dp"		
    >
    <gradient
        android:startColor="#1E90FF"
        android:endColor="#EE82EE"
        android:angle="135"
         android:centerColor="#ffffff"
         android:type="linear"
        />
    
    <stroke 
        android:width="1dp"
        android:color="#FF8C00"  
        /> 
    
  <!--   <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
    
    <solid android:color="#80065e8d" />
  <stroke
    android:dashGap="0dp"
    android:width="4dp"
    android:color="@android:color/white" /> -->
</shape>

效果图：

shape与selector组合使用：

<?xml version="1.0" encoding="utf-8"?>
 <selector
     xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true" >
         <shape>
             <!-- 渐变 -->
	        <gradient
	        android:startColor="#1E90FF"
	        android:endColor="#EE82EE"
	        android:angle="45"
	        android:centerColor="#ffffff"
	        />
             <!-- 描边 -->
	        <stroke 
	        android:width="2dp"
	        android:color="#FF8C00"  
	        android:dashWidth="5dp" 
	        android:dashGap="0dp"
	        /> 
         	<!-- 圆角 -->
		    <corners  
		        android:radius="5dp"
		        android:topLeftRadius="5dp"
		        android:topRightRadius="5dp"
		        android:bottomLeftRadius="5dp"
		        android:bottomRightRadius="5dp"  
		        />
             
         </shape>
     </item>
 
    <item android:state_focused="true" >
         <shape>
             <!-- 渐变 -->
	        <gradient
	        android:startColor="#1E90FF"
	        android:endColor="#EE82EE"
	        android:angle="45"
	        android:centerColor="#ffffff"
	        />
             <!-- 描边 -->
	        <stroke 
	        android:width="2dp"
	        android:color="#FF8C00"  
	        android:dashWidth="5dp" 
	        android:dashGap="0dp"
	        /> 
         	<!-- 圆角 -->
		    <corners  
		        android:radius="5dp"
		        android:topLeftRadius="5dp"
		        android:topRightRadius="5dp"
		        android:bottomLeftRadius="5dp"
		        android:bottomRightRadius="5dp"  
		        />
            
         </shape>
     </item>
 
    <item>       
        <shape>
            <!-- 填充 -->
            <solid android:color="#1e90ff"/>
            <!-- 描边 -->
	        <stroke 
	        android:width="2dp"
	        android:color="#FF8C00"  
	        android:dashWidth="5dp" 
	        android:dashGap="2dp"
	        /> 
             
         </shape>
     </item>
 </selector>

效果：
 

2.在控件中使用shape效果；

android:background="@drawable/btn_style"

3.shape常用功能介绍；

<shape
    xmlns:android="<a target=_blank href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>"
    android:shape="rectangle"
    >
     
     <!--
      渐变色
        android:startColor  颜色值    起始颜色
        android:endColor    颜色值    结束颜色
        android:centerColor 整型      渐变中间颜色，即开始颜色与结束颜色之间的颜色
        android:angle       整型      渐变角度(PS：当angle=0时，渐变色是从左向右。 然后逆时针方向转，当angle=90时为从下往上。angle必须为45的整数倍)
        android:type        ["linear" | "radial" | "sweep"] 渐变类型(取值：linear、radial、sweep)
                            linear 线性渐变，这是默认设置
                            radial 放射性渐变，以开始色为中心。
                            sweep 扫描线式的渐变。
       android:useLevel   ["true" | "false"] 如果要使用LevelListDrawable对象，就要设置为true。设置为true无渐变。false有渐变色
       android:gradientRadius 整型     渐变色半径.当 android:type="radial" 时才使用。单独使用 android:type="radial"会报错。
       android:centerX     整型       渐变中心X点坐标的相对位置
       android:centerY    整型       渐变中心Y点坐标的相对位置
    -->
   <gradient
        android:startColor="#1E90FF"
        android:endColor="#EE82EE"
        android:angle="45"
        android:centerColor="#ffffff"
        />
        
    <!--
      圆角
      android:radius     整型 半径
      android:topLeftRadius    整型 左上角半径
      android:topRightRadius   整型 右上角半径
      android:bottomLeftRadius  整型 左下角半径
      android:bottomRightRadius  整型 右下角半径
     -->
     <corners  
        android:radius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"  
        />
        
    <!--
      内边距，即内容与边的距离 
      android:left   整型 左内边距
      android:top    整型 上内边距
      android:right   整型 右内边距
      android:bottom  整型 下内边距
      -->
     <padding 
         android:left="10dp"
         android:top="10dp"
         android:right="10dp"
         android:bottom="10dp"
         />
     
    <!-- 
     size 大小
     android:width  整型 宽度
     android:height  整型 高度
    -->
    <size
        android:width="200dp"
        android:height="50dp"
        />
    
    <!--
     内部填充
     android:color  颜色值 填充颜色
    -->
    <solid 
        android:color="#1e90ff"
        />
    
     <!--
      描边
      android:width   整型  描边的宽度
      android:color   颜色值  描边的颜色
      android:dashWidth  整型  表示描边的样式是虚线的宽度， 值为0时，表示为实线。值大于0则为虚线
      android:dashGap   整型  表示描边为虚线时，虚线之间的间隔.
     -->
    <stroke 
        android:width="2dp"
        android:color="#FF8C00"  
        android:dashWidth="5dp" 
        android:dashGap="0dp"
        /> 
        
</shape>