前言

本節(jié)內容主要講解drawable文件夾下Shape的使用而叼。

Shape主要是為了給控件背景設定一個形狀模庐，使UI看起來更加美觀芋浮。本實例以Android Studio為開發(fā)工具闪彼。在/app/src/main/res/drawable文件夾下新建drawable resource file，在選項Root element下輸入或選擇shape邻薯。

一、Shape根標簽

Shape根標簽為設置形狀屬性的標簽乘凸。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="false|true"          
    android:innerRadius="dimension"
    android:innerRadiusRatio="float"
    android:shape="rectangle|line|oval|ring"
    android:thickness="dimension"
    android:thicknessRatio="float"
    android:tint="color"
    android:tintMode="src_in|src_atop|src_over|add|multiply|screen"
    android:useLevel="false|true"
    android:visible="false|true">
</shape>

• dither：在位圖的像素配置與屏幕不同時啟用位圖的抖動厕诡；true開啟抖動，false停用抖動翰意。默認值為 true木人。
• innerRadius：內環(huán)半徑，形狀為圓環(huán)時可用冀偶。只寫數字會報錯醒第，需要在后面在加上“px”或者“dp”。如果內圓環(huán)太大进鸠，超出控件的大小也會不顯示稠曼。
• innerRadiusRatio：內環(huán)的比例（環(huán)的半徑/內環(huán)半徑），形狀為圓環(huán)時可用客年。默認為3霞幅，如果設置了innerRadius漠吻，那這個屬性不再生效。
• shape：rectangle矩形司恳、line線途乃、oval橢圓、ring環(huán)扔傅。默認為矩形rectangle耍共。
• thickness：環(huán)的厚度，形狀為圓環(huán)時可用猎塞。
• thicknessRatio：環(huán)的厚度比（環(huán)的半徑/環(huán)的厚度）试读，形狀為圓環(huán)時可用。默認為9荠耽。如果設置了thickness钩骇，那這個屬性不再生效。
• tint：給圓環(huán)著色铝量，只能在API 21及以上才能使用倘屹，否則沒有效果。
• tintMode：著色類型慢叨，只能在API 21及以上才能使用唐瀑，否則沒有效果。
• useLevel：只有當shape使用在LevelListDrawable中的時候插爹，這個值為true哄辣，否則為false。這個屬性很少使用,一般別用就行赠尾。
• visible：顧名思義力穗，可見性。true可見气嫁，false不可見当窗。默認為true。

二寸宵、solid標簽

solid標簽為設置填充屬性的標簽崖面。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="color" />  
</shape>

• color：填充顏色，此標簽只有這一個屬性梯影。
  

三巫员、corners標簽

corners標簽為設置圓角屬性的標簽。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/rosy_brown" />
    <corners android:radius="8dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="10dp"
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="20dp"/>
</shape>

• radius：圓角半徑甲棍，統(tǒng)一指定四個角的圓角半徑简识。后面單獨設定的圓角半徑會覆蓋radius。
• topLeftRadius：左上角的圓角半徑。
• topRightRadius：右上角的圓角半徑七扰。
• bottomLeftRadius：左下角的圓角半徑奢赂。
• bottomRightRadius：右下角的圓角半徑。
  
  四個角的圓角半徑

四颈走、stroke標簽

stroke標簽為設置邊框屬性的標簽膳灶。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="@color/green"
        android:dashWidth="3dp"
        android:dashGap="4dp"
        android:width="1dp"/>
</shape>

• color：邊框顏色值，需要配合width屬性使用立由，否則沒有效果袖瞻。
• width：邊框的寬度值。不設置顏色時拆吆，默認為黑色。
• dashWidth：虛線每條小線段的長度脂矫。如果只是想顯示一條虛線枣耀，將shape根標簽的shape屬性改為 line。
• dashGap：小線段之間的間距庭再。
  
  邊框顏色為綠色捞奕，線段長度為3dp,間距4dp

五、size標簽

size標簽為設置大小屬性的標簽拄轻。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <size android:height="40dp" android:width="80dp" />
</shape>

• width: 指定shape的寬度颅围。
• height：指定shape的高度。

六恨搓、padding標簽

padding標簽為設置內邊距屬性的標簽院促。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
</shape>

• bottom: 與底部的內邊距。在控件中設置padding屬性會覆蓋此屬性斧抱。
• left：與左邊的內邊距常拓。在控件中設置padding屬性會覆蓋此屬性。
• right：與右邊的內邊距辉浦。在控件中設置padding屬性會覆蓋此屬性弄抬。
• top：與頂部的內邊距。在控件中設置padding屬性會覆蓋此屬性宪郊。

七掂恕、gradient標簽

gradient標簽為設置漸變屬性的標簽。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="integer"
        android:centerColor="color"
        android:centerX="float"
        android:centerY="float"
        android:endColor="color"
        android:gradientRadius="dimension"
        android:startColor="color"
        android:type="linear|radial|sweep"
        android:useLevel="false|true" />
</shape>

• angle：漸變角度弛槐。只能是45的整數倍懊亡，type屬性為linear時才有效。
• centerColor：漸變過程中的顏色值乎串。
• startColor：漸變起始的顏色值斋配。
• endColor：漸變結束的顏色值。
• centerX：漸變原點相對控件X坐標軸的值，默認為0.5艰争。
• centerY：漸變原點相對控件Y坐標軸的值坏瞄，默認為0.5。
• gradientRadius：漸變半徑甩卓，type屬性為radial時才有效
• type：漸變類型鸠匀。linear線性漸變，radial放射漸變逾柿，sweep掃描漸變
• useLevel：暫時別管它缀棍。

示例：

1、linear線性漸變

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="0|45|90|135|180|225|270|315|360"
        android:centerColor="@color/brown"
        android:endColor="@color/red"
        android:startColor="@color/rosy_brown"
        android:type="linear" />
</shape>

漸變角度示例

• 那么centerX 和centerY 對線性漸變有什么影響呢？
  當centerColor不存在時弱匪，centerX 和centerY對漸變沒有任何影響青瀑。
  當centerColor存在時，漸變起始顏色的寬度以centerX為準萧诫，如果centerX沒有定義斥难，則以centerY為準。
  
  angle = 45,centerX =0.1|0.5 |0.8時的效果圖
  
  通過上圖可以看到起始顏色值的范圍占比跟centerX 有關帘饶，如果centerX 不存在哑诊，則跟centerY 有關，跟 centerY = 0. 1|0.5|0.8 是一樣的效果及刻。

2镀裤、radial漸變

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:gradientRadius="20dp"
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="@color/brown"
        android:endColor="@color/red"
        android:startColor="@color/rosy_brown"
        android:type="radial" />
    <size android:width="40dp" android:height="40dp"/>
 </shape>

radial漸變，centerX=0.5,centerY=0.5

radial漸變缴饭，centerX=0.4,centerY=0.4

3铃岔、sweep漸變

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:centerX="0.4"
        android:centerY="0.4"
        android:centerColor="@color/brown"
        android:endColor="@color/red"
        android:startColor="@color/rosy_brown"
        android:type="sweep" />
    <size android:width="40dp" android:height="40dp"/>
</shape>

掃描圓點默認在控件中心，從X軸正方向開始順時針方向開始漸變

八峭火、后言

如有問題毁习，歡迎留言交流。