shape標籤詳解

雖然一些比較日常的效果都能輕鬆使用shape實現，但是一些稍微複雜的效果還是得去查，實在麻煩

寫個文章記錄一下

ShapeDrawable是一種很常見的Drawable，可以理解爲通過顏色來構造的圖形，它既可以是純色的圖形，也可以是具有漸變效果的圖形，ShapeDrawabled語法如下所示：

<shape
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape=["rectangle" | "oval" | "line" | "ring"] >
  <corners
    android:radius="integer"
    android:topLeftRadius="integer"
    android:topRightRadius="integer"
    android:bottomLeftRadius="integer"
    android:bottomRightRadius="integer" />
  <gradient
    android:angle="integer"
    android:centerX="integer"
    android:centerY="integer"
    android:centerColor="integer"
    android:endColor="color"
    android:gradientRadius="integer"
    android:startColor="color"
    android:type=["linear" | "radial" | "sweep"]
    android:useLevel=["true" | "false"] />
  <padding
    android:left="integer"
    android:top="integer"
    android:right="integer"
    android:bottom="integer" />
  <size
    android:width="integer"
    android:height="integer" />
  <solid
    android:color="color" />
  <stroke
    android:width="integer"
    android:color="color"
    android:dashWidth="integer"
    android:dashGap="integer" />
</shape>

一個一個的來講，先說說<shape>標籤中的android:shape=["rectangle" | "oval" | "line" | "ring"]

這個屬性有四個可選項，分別表示rectangle（矩形）oval（橢圓）line（橫線）ring（圓環），默認爲rectangle，需要注意line和ring需要通過標籤來指定線的寬度和顏色等信息，否則無法達到預期效果

接下來是<corners>標籤，這個標籤表示圓角,只適用於矩形，即當<shape>標籤中的android:shape=rectangle時有效

android:radius—— 給四個角設置相同的角度，優先級較低，會被其他四個屬性覆蓋 

android:bottomLeftRadius——設定左下角的角度 

android:bottomRightRadius——設定右下角的角度

android:TopLeftRadius——設定左上角的角度 

android:TopRightRadius——設定右上角的角度

效果圖如下:

代碼分別如下：

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

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

其中<solid>標籤表示填充顏色，稍後講

接下來是<solid>標籤，這個標籤表示填充顏色，只有一個屬性android:color="color"

說到<solid>標籤就必須說一說<gradient>標籤

<gradient>標籤表示漸變色，他與<solid>是互相排斥的

他可以設置2色漸變也可以設置爲三色漸變，語法如下：

<gradient   
    android:type=["linear" | "radial" | "sweep"]    //共有3中漸變類型，線性漸變（默認）/放射漸變/掃描式漸變    
    android:angle="integer"     //漸變角度，必須爲45的倍數，0爲從左到右，90爲從上到下    
    android:centerX="float"     //漸變中心X的相當位置，範圍爲0～1    
    android:centerY="float"     //漸變中心Y的相當位置，範圍爲0～1    
    android:startColor="color"   //漸變開始點的顏色    
    android:centerColor="color"  //漸變中間點的顏色，在開始與結束點之間    
    android:endColor="color"    //漸變結束點的顏色    
    android:gradientRadius="float"  //漸變的半徑，只有當漸變類型爲radial時才能使用    
    android:useLevel=["true" | "false"] />  //使用LevelListDrawable時就要設置爲true。設爲false時纔有漸變效果    

三種樣式的代碼如下：

<!--第一個線性漸變-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15dp"/>
    <gradient android:angle="45"
        android:centerX="0.7"
        android:type="linear"
        android:centerY="0.5"
        android:startColor="@color/colorAccent"
        android:centerColor="@color/colorPrimary"
        android:endColor="@color/colorPrimaryDark"/>
</shape>

    <!--第二個放射性漸變-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15dp" />
    <gradient
        android:angle="180"
        android:centerColor="@color/colorPrimary"
        android:centerX="0.5"
        android:centerY="0.5"
        android:endColor="@color/colorPrimaryDark"
        android:gradientRadius="500dp"
        android:startColor="@color/colorAccent"
        android:type="radial" />
</shape>

    <!--第三個掃描式漸變-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15dp" />
    <gradient
        android:angle="180"
        android:centerColor="@color/colorPrimary"
        android:centerX="0.5"
        android:centerY="0.5"
        android:endColor="@color/colorPrimaryDark"
        android:startColor="@color/colorAccent"
        android:type="sweep" />
</shape>

<stroke>是描邊屬性，可以定義描邊的寬度，顏色，虛實線等

<stroke         
    android:width="dimension"   //描邊的寬度    
    android:color="color"   //描邊的顏色    
    // 以下兩個屬性設置虛線    
    android:dashWidth="dimension"   //虛線的寬度，值爲0時是實線    
    android:dashGap="dimension" />      //虛線的間隔   

上面各個屬性的意義如下：

直接上代碼和效果圖

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="@color/Black"
        android:dashGap="3dp"
        android:dashWidth="8dp"
        android:width="2dp"/>
    <solid android:color="@color/colorAccent"/>
</shape>

size和padding

這兩個基本上不怎麼用，因爲他們所具有的功能，控件本身也能實現。
size:是用來定義圖形的大小的。

padding：用來定義內部邊距

再寫幾個看起來比較屌的用法

做一個漸變色圓環

代碼：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="100dp"
    android:thickness="50dp"
    android:useLevel="false"
    >
    <gradient android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:centerY="0.4"
        android:centerColor="@color/colorAccent"/>
</shape>

以下屬性只能在android:shape="ring"的時候使用：

屬性	意義
android:innerRadius	尺寸，內環的半徑
android:thickness	尺寸，環的厚度
android:innerRadiusRatio	浮點型，以環的寬度比率來表示內環的半徑， 例如，如果android:innerRadiusRatio=5，表示內環半徑等於環的寬度除以5，這個值是可以被android:innerRadius的值覆蓋，默認爲9.
android:thicknessRatio	浮點型，以環的寬度比率來表示環的厚度，例如，如果android:thicknessRatio=2， 那麼環的厚度就等於環的寬度除以2。這個值是可以被android:thickness覆蓋的，默認值是3.
android:useLevel	boolean值，如果當做是LevelListDrawable使用時值爲true，否則爲false.這個值一般爲false,否則你的環可能不會出現

底部的線

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <color android:color="@color/colorAccent"/>
    </item>
    <item android:bottom="5dp">
        <shape>
            <solid android:color="@color/Black"/>
        </shape>
    </item>
</layer-list>

這裏的《item》每一個都可以表示一個drawable，top,bottom,left,right表示item在四個方向上的偏移量，可以理解爲類似於padding的效果