android shape 使用詳解

一、簡單使用

剛開始，就先不講一堆標籤的意義及用法，先簡單看看shape標籤怎麼用。

1、新建shape文件

首先在res/drawable文件夾下，新建一個文件，命名爲：shape_radius.xml

內容是這樣的：（先不需要理解，先看shape怎麼用）

 

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

</shape>

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

</shape>

2、添加到控件中

在定義好shape文件後，下一步就是將其添加到控件中，添加到控件中，一般是使用設置background屬性，將其爲控件背景，下面，我們將其設置爲MainActivity對應的佈局中（activity_main.xml），將其設爲TextView的背景，看顯示出來 是什麼樣子的。

 

 

<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.harvic.tryshape.MainActivity"
>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="50dip"
        android:text="@string/hello_world"
        android:background="@drawable/shape_radius"/>

</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.harvic.tryshape.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="50dip"
        android:text="@string/hello_world" 
        android:background="@drawable/shape_radius"/>
    
</RelativeLayout>

顯示出來的結果是這樣的：

 

二、基本屬性（corners、gradient、padding、size、solid、stroke）

上面給大家簡單的講了下shape標籤組的簡單使用方法，下面就具體講講shape標籤裏所具有的幾個子標籤及所具有的屬性。

1、Corners

 

<corners    //定義圓角
    android:radius="dimension"      //全部的圓角半徑
    android:topLeftRadius="dimension"   //左上角的圓角半徑
    android:topRightRadius="dimension"  //右上角的圓角半徑
    android:bottomLeftRadius="dimension"    //左下角的圓角半徑
    android:bottomRightRadius="dimension"
/>    //右下角的圓角半徑

<corners    //定義圓角  
    android:radius="dimension"      //全部的圓角半徑  
    android:topLeftRadius="dimension"   //左上角的圓角半徑  
    android:topRightRadius="dimension"  //右上角的圓角半徑  
    android:bottomLeftRadius="dimension"    //左下角的圓角半徑  
    android:bottomRightRadius="dimension" />    //右下角的圓角半徑  

Corners標籤是用來字義圓角的，其中radius與其它四個並不能共同使用。

 

android:radius：定義四個角的的圓角半徑。

其它四個是逐個字義每個角的圓角半徑。

使用：

控件佈局：

 

<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
>

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="50dip"
        android:text="@string/hello_world"
        android:background="@drawable/shape_radius"/>
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="50dip"
        android:text="@string/hello_world" 
        android:background="@drawable/shape_radius"/>
 </RelativeLayout>

shape定義：

 

 

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

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

效果：

 

2、solid

solid用以指定內部填充色

只有一個屬性：

 

<solid  
android:color="color" />

<solid  android:color="color" />  

在上面的例子中，我們就將填充色指定爲#ffff00了，如果我們不加圓角，只使用填充色，即將shape變成這樣子：

 

 

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

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

那效果就是這樣的：

 

3、gradient

 

gradient用以定義漸變色，可以定義兩色漸變和三色漸變，及漸變樣式，它的屬性有下面幾個：

 

<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時纔有漸變效果

<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時纔有漸變效果  

首先有三種漸變類型，分別是：linear（線性漸變）、radial（放射性漸變）、sweep（掃描式漸變）

（1）先看看這幾個屬性的使用方法：

 

android:type=["linear" | "radial" | "sweep"]
android:startColor="color"   //漸變開始點的顏色
android:centerColor="color"  //漸變中間點的顏色，在開始與結束點之間
android:endColor="color"    //漸變結束點的顏色
android:gradientRadius="float"  //漸變的半徑，只有當漸變類型爲radial時才能使用

android:type=["linear" | "radial" | "sweep"]
android:startColor="color"   //漸變開始點的顏色  
android:centerColor="color"  //漸變中間點的顏色，在開始與結束點之間  
android:endColor="color"    //漸變結束點的顏色  
android:gradientRadius="float"  //漸變的半徑，只有當漸變類型爲radial時才能使用  

 

下面我們使用三色漸變來看看這三種漸變方式都是怎麼顯示的：（如果不使用centerColor屬性就是雙色漸變，這個屬性是可選的）

需要注意的一點是，在構造放射性漸變時，要加上android:gradientRadius屬性（漸變半徑），即必須指定漸變半徑的大小纔會起作用，下面列出這三個漸變方式的shape代碼，供大家參考：

線性漸變：

 

<?xml 
version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
    <gradient
        android:type="linear"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient 
        android:type="linear"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"/>
</shape>

放射性漸變：

<?xml 
version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
    <gradient
        android:type="radial"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:gradientRadius="100"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient 
        android:type="radial"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:gradientRadius="100"/>
</shape>

掃描式漸變：

 

 

<?xml 
version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
    <gradient
        android:type="sweep"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient 
        android:type="sweep"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"/>
</shape>

可見放射性漸變，只是比其它兩個多了個android:gradientRadius屬性

（2）、android:angle屬性（僅對線性漸變有效）

 

android:angle="integer"     //漸變角度，必須爲45的倍數，0爲從左到右，90爲從上到下

android:angle="integer"     //漸變角度，必須爲45的倍數，0爲從左到右，90爲從上到下  

我們在上面的三種漸變上都加上angle屬性，看看效果如何：

能過跟上一個圖對比可以發現，angle屬性確實只對線性漸變有效，其它兩種漸變方式都沒有任何動靜，下面是此時的線性漸變shape代碼：

 

<?xml 
version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
    <gradient
        android:type="linear"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:angle="45"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient 
        android:type="linear"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:angle="45"/>
</shape>

（3）、android:centerX與android:centerY

centerX、centerY兩個屬性用於設置漸變的中心點位置，僅當漸變類型爲放射漸變時有效，類型爲分數或小數，不接受Dimension。默認值是0.5，有效值是0.0~1.0，超出該範圍後會看不出漸變效果。centerX、centerY的取值其實是寬和高的百分比；不難理解，下面看代碼：

 

 

<?xml 
version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
    <gradient
        android:type="sweep"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:centerX="0.2"
        android:centerY="0.8"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient 
        android:type="sweep"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:centerX="0.2"
        android:centerY="0.8"/>
</shape>

取寬度的20%和高度的80%的位置，作爲新的漸變原點，效果是這樣的：

 

（4）android:useLevel

useLevel屬性通常不使用。該屬性用於指定是否將該shape當成一個LevelListDrawable來使用，默認值爲false。

4、stroke

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

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

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

 

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

我們使用綠色虛線描邊，虛線高度是20dp，虛線寬度爲10dp虛線間距爲1dp:

 

<?xml 
version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
    <stroke
        android:width="20dp"
        android:color="#00ff00"
        android:dashWidth="10dp"
        android:dashGap="1dp"
/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke 
        android:width="20dp" 
        android:color="#00ff00"
        android:dashWidth="10dp"
        android:dashGap="1dp" />
</shape>

從效果圖中，我們也能清晰的看出這三個參數（width、dashwidth、dashGap）之間的區別：

 

5、size和padding

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

 

<size
    android:width="dimension"
    android:height="dimension"
/>

<size  
    android:width="dimension"  
    android:height="dimension" />

padding：用來定義內部邊距

<padding
    android:left="dimension"
    android:top="dimension"
    android:right="dimension"
    android:bottom="dimension"
/>

<padding   
    android:left="dimension"  
    android:top="dimension"  
    android:right="dimension"  
    android:bottom="dimension" />

三、Shape的屬性（rectangle、oval、line、ring）

上面我們講了Shape的子標籤的的作用，但Shape本身還沒講，Shape自已是可以定義當前Shape的形狀的，比如上面的矩形，還有橢圓形，線形和環形；這些都是通過Shape標籤的 shape屬性來定義的，Shape標籤總共有下面幾個屬性，我們一個個講：

 

android:shape=["rectangle" | "oval" | "line" | "ring"]
shape的形狀，默認爲矩形，可以設置爲矩形（rectangle）、橢圓形(oval)、線性形狀(line)、環形(ring)
下面的屬性只有在android:shape="ring時可用：
android:innerRadius         尺寸，內環的半徑。
android:innerRadiusRatio    浮點型，以環的寬度比率來表示內環的半徑，
android:thickness           尺寸，環的厚度
android:thicknessRatio      浮點型，以環的寬度比率來表示環的厚度，例如，如果android:thicknessRatio="2"，
android:useLevel            boolean值，如果當做是LevelListDrawable使用時值爲true，否則爲false.

android:shape=["rectangle" | "oval" | "line" | "ring"]  
shape的形狀，默認爲矩形，可以設置爲矩形（rectangle）、橢圓形(oval)、線性形狀(line)、環形(ring)  
下面的屬性只有在android:shape="ring時可用：  
android:innerRadius         尺寸，內環的半徑。  
android:innerRadiusRatio    浮點型，以環的寬度比率來表示內環的半徑，  
android:thickness           尺寸，環的厚度  
android:thicknessRatio      浮點型，以環的寬度比率來表示環的厚度，例如，如果android:thicknessRatio="2"，  
android:useLevel            boolean值，如果當做是LevelListDrawable使用時值爲true，否則爲false. 

可見，只有第一個shape是可用的，其它五個都是shape等於ring時所特有的。

 

注意，無論這裏shape取什麼形狀，他的子標籤都是可用的，但有時並不會有效果，比如在shape爲橢圓時，那corners標籤就不會有效果，很顯然的道理。下面一個個看看各個形狀都是怎麼樣的；

1、rectangle (矩形)

這就是上一節我們使用的形狀，當我們不指定shape屬性時，默認就是矩形的。

控件代碼：

 

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
>
    <TextView
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:textStyle="bold"
        android:background="@drawable/try_shape_3"/>
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >    
    <TextView
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:textStyle="bold"
        android:background="@drawable/try_shape_3"/>
 </LinearLayout>

 

shape代碼：

 

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

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

對應圖形：

 

2、oval（橢圓）

控件代碼不變，下面是shape代碼：

 

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

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

對應圖形：（控件大小的矩形所對應的橢圓）

 

3、line(線形)

 

沒覺得這個能有什麼用……，也不講了，沒什麼意思

4、ring（環形）

還記得他所特有的幾個屬性麼：

 

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

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

這麼幾個屬性無外乎就是定義環形的內環尺寸和環的寬度。

 

舉個例子：

控件定義：

 

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
>
    <TextView
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:textStyle="bold"
        android:background="@drawable/try_shape_2"/>
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >    
    <TextView
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:textStyle="bold"
        android:background="@drawable/try_shape_2"/>
 </LinearLayout>

shape定義：（這裏一定要要加上useLevel屬性並定義爲false，不然沒有效果）

 

 

<?xml 
version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="20dp"
    android:thickness="50dp"
    android:useLevel="false">

    <solid android:color="#ff00ff"/>

</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="ring" 
    android:innerRadius="20dp" 
    android:thickness="50dp"  
    android:useLevel="false">
    
    <solid android:color="#ff00ff"/>
    
</shape>

效果圖：

 

好啦，這部分就到這了，有關Shape的使用最多的還是第二部分，即當shape爲矩形時，結合那幾個子標籤共同使用時，對於其它的三個Shape平時用到的可能性不大，我這裏講的也不太細緻，下面給大家第一部分的源碼，直接運行，就能出來一個Shape效果。