前言

本節內容主要講解drawable文件夾下Shape的使用。

Shape主要是為了給控件背景設定一個形狀，使UI看起來更加美觀。本實例以Android Studio為開發工具。在/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：內環半徑，形狀為圓環時可用。只寫數字會報錯，需要在后面在加上“px”或者“dp”。如果內圓環太大，超出控件的大小也會不顯示。
• innerRadiusRatio：內環的比例（環的半徑/內環半徑），形狀為圓環時可用。默認為3，如果設置了innerRadius，那這個屬性不再生效。
• shape：rectangle矩形、line線、oval橢圓、ring環。默認為矩形rectangle。
• thickness：環的厚度，形狀為圓環時可用。
• thicknessRatio：環的厚度比（環的半徑/環的厚度），形狀為圓環時可用。默認為9。如果設置了thickness，那這個屬性不再生效。
• tint：給圓環著色，只能在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：圓角半徑，統一指定四個角的圓角半徑。后面單獨設定的圓角半徑會覆蓋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軸正方向開始順時針方向開始漸變

八、后言

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