1. 程式人生 > >shape標籤詳解

shape標籤詳解

前言:最近也是忙的夠嗆,但要總結還是要總結出來,不然過段時間就不想寫部落格了,堅持每月至少出四篇部落格的節奏,無論多忙,堅持。任何一個成功人物的背後總是透露著辛酸與不易。


今天看到一篇文章《世界是公平的:你富不過馬雲,比慘你也未必比的過》,分享給大家,我一直想看到真實的馬雲過往,而不是被華麗外衣包裹著的外星人,當我開始知道這個人時,當時第一個想法就是他肯定吃過別人不曾吃過的苦,正是由於這些才最終造就現在的神話,無耐,全網鋪天蓋地都是宣揚與讚美,並沒有寫出他的創業史,即使有,也只是寥寥幾句,直到我看到這篇文章,才讓我真正瞭解馬雲,才更佩服他,他不是神,他只是一個普通人,他有的,只是別人所有沒有毅力與堅持,馬總,總是喜歡說堅持,我想,這也是他在最落魄的時候經常對自己說的話吧,堅持。


廢話說了一堆,今天跟大家聊聊shape標籤的用法,有時,我們為了APP中節省空間,在能用顏色替代的地方就不要用圖片,而如何將顏色組織成想要的形狀及如何為指定的顏色新增描邊、漸變等來模擬圖片就顯的極為重要了,這些就是靠shape來完成的。


一、簡單使用

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

1、新建shape檔案

首先在res/drawable資料夾下,新建一個檔案,命名為:shape_radius.xml

內容是這樣的:(先不需要理解,先看shape怎麼用)


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

2、新增到控制元件中

在定義好shape檔案後,下一步就是將其新增到控制元件中,新增到控制元件中,一般是使用設定background屬性,將其為控制元件背景,下面,我們將其設定為MainActivity對應的佈局中(activity_main.xml),將其設為TextView的背景,看顯示出來 是什麼樣子的。


    
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools= "http://schemas.android.com/tools"
  3. android:layout_width= "match_parent"
  4. android:layout_height= "match_parent"
  5. tools:context= "com.harvic.tryshape.MainActivity" >
  6. <TextView
  7. android:layout_width= "wrap_content"
  8. android:layout_height= "wrap_content"
  9. android:layout_margin= "50dip"
  10. android:text= "@string/hello_world"
  11. android:background= "@drawable/shape_radius"/>
  12. </RelativeLayout>
顯示出來的結果是這樣的:



二、基本屬性(corners、gradient、padding、size、solid、stroke)

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

1、Corners


    
  1. <corners //定義圓角
  2. android:radius= "dimension" //全部的圓角半徑
  3. android:topLeftRadius= "dimension" //左上角的圓角半徑
  4. android:topRightRadius= "dimension" //右上角的圓角半徑
  5. android:bottomLeftRadius= "dimension" //左下角的圓角半徑
  6. android:bottomRightRadius= "dimension" /> //右下角的圓角半徑
Corners標籤是用來字義圓角的,其中radius與其它四個並不能共同使用。

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

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

使用:

控制元件佈局:


    
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width= "match_parent"
  3. android:layout_height= "match_parent" >
  4. <TextView
  5. android:layout_width= "100dp"
  6. android:layout_height= "100dp"
  7. android:layout_margin= "50dip"
  8. android:text= "@string/hello_world"
  9. android:background= "@drawable/shape_radius"/>
  10. </RelativeLayout>
shape定義:


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



2、solid

solid用以指定內部填充色

只有一個屬性:

<solid  android:color="color" />  
    
在上面的例子中,我們就將填充色指定為#ffff00了,如果我們不加圓角,只使用填充色,即將shape變成這樣子:


    
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  3. <solid android:color="#ffff00"/>
  4. </shape>
那效果就是這樣的:



3、gradient

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


    
  1. <gradient
  2. android:type= [" linear" | " radial" | " sweep"] //共有 3中漸變型別,線性漸變(預設)/放射漸變/掃描式漸變
  3. android:angle= "integer" //漸變角度,必須為 45的倍數, 0為從左到右, 90為從上到下
  4. android:centerX= "float" //漸變中心 X的相當位置,範圍為 01
  5. android:centerY= "float" //漸變中心 Y的相當位置,範圍為 01
  6. android:startColor= "color" //漸變開始點的顏色
  7. android:centerColor= "color" //漸變中間點的顏色,在開始與結束點之間
  8. android:endColor= "color" //漸變結束點的顏色
  9. android:gradientRadius= "float" //漸變的半徑,只有當漸變型別為 radial時才能使用
  10. android:useLevel= [" true" | " false"] /> //使用LevelListDrawable時就要設定為true。設為false時才有漸變效果

首先有三種漸變型別,分別是:linear(線性漸變)、radial(放射性漸變)、sweep(掃描式漸變)

(1)先看看這幾個屬性的使用方法:


    
  1. android:type=["linear" | "radial" | "sweep"]
  2. android:startColor="color" //漸變開始點的顏色
  3. android:centerColor="color" //漸變中間點的顏色,在開始與結束點之間
  4. android:endColor="color" //漸變結束點的顏色
  5. android:gradientRadius="float" //漸變的半徑,只有當漸變型別為radial時才能使用

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


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

線性漸變:


    
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  3. <gradient
  4. android:type= "linear"
  5. android:startColor= "#ff0000"
  6. android:centerColor= "#00ff00"
  7. android:endColor= "#0000ff"/>
  8. </shape>
放射性漸變:

    
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  3. <gradient
  4. android:type= "radial"
  5. android:startColor= "#ff0000"
  6. android:centerColor= "#00ff00"
  7. android:endColor= "#0000ff"
  8. android:gradientRadius= "100"/>
  9. </shape>
掃描式漸變:


    
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  3. <gradient
  4. android:type= "sweep"
  5. android:startColor= "#ff0000"
  6. android:centerColor= "#00ff00"
  7. android:endColor= "#0000ff"/>
  8. </shape>
可見放射性漸變,只是比其它兩個多了個android:gradientRadius屬性

(2)、android:angle屬性(僅對線性漸變有效)

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

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


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


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

(3)、android:centerX與android:centerY

centerX、centerY兩個屬性用於設定漸變的中心點位置,僅當漸變型別為放射漸變時有效,型別為分數或小數,不接受Dimension。預設值是0.5,有效值是0.0~1.0,超出該範圍後會看不出漸變效果。centerX、centerY的取值其實是寬和高的百分比;不難理解,下面看程式碼:


    
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  3. <gradient
  4. android:type= "sweep"
  5. android:startColor= "#ff0000"
  6. android:centerColor= "#00ff00"
  7. android:endColor= "#0000ff"
  8. android:centerX= "0.2"
  9. android:centerY= "0.8"/>
  10. </shape>
取寬度的20%和高度的80%的位置,作為新的漸變原點,效果是這樣的:


(4)android:useLevel

useLevel屬性通常不使用。該屬性用於指定是否將該shape當成一個LevelListDrawable來使用,預設值為false。

4、stroke

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


    
  1. <stroke
  2. android:width="dimension" //描邊的寬度
  3. android:color="color" //描邊的顏色
  4. // 以下兩個屬性設定虛線
  5. android:dashWidth="dimension" //虛線的寬度,值為0時是實線
  6. android:dashGap="dimension" /> //虛線的間隔

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

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


    
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  3. <stroke
  4. android:width= "20dp"
  5. android:color= "#00ff00"
  6. android:dashWidth= "10dp"
  7. android:dashGap= "1dp" />
  8. </shape>
從效果圖中,我們也能清晰的看出這三個引數(width、dashwidth、dashGap)之間的區別:

5、size和padding

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


    
  1. <size
  2. android:width= "dimension"
  3. android:height= "dimension" />
padding:用來定義內部邊距

    
  1. <padding
  2. android:left= "dimension"
  3. android:top= "dimension"
  4. android:right= "dimension"
  5. android:bottom= "dimension" />

三、Shape的屬性(rectangle、oval、line、ring)

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


    
  1. android:shape=["rectangle" | "oval" | "line" | "ring"]
  2. shape的形狀,預設為矩形,可以設定為矩形(rectangle)、橢圓形(oval)、線性形狀(line)、環形(ring)
  3. 下面的屬性只有在android:shape="ring時可用:
  4. android:innerRadius 尺寸,內環的半徑。
  5. android:innerRadiusRatio 浮點型,以環的寬度比率來表示內環的半徑,
  6. android:thickness 尺寸,環的厚度
  7. android:thicknessRatio 浮點型,以環的寬度比率來表示環的厚度,例如,如果android:thicknessRatio="2",
  8. android:useLevel boolean值,如果當做是LevelListDrawable使用時值為true,否則為false.
可見,只有第一個shape是可用的,其它五個都是shape等於ring時所特有的。

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

1、rectangle (矩形)

這就是上一節我們使用的形狀,當我們不指定shape屬性時,預設就是矩形的。 

控制元件程式碼:


    
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width= "match_parent"
  3. android:layout_height= "match_parent"
  4. android:orientation= "horizontal" >
  5. <TextView
  6. android:layout_width= "300dp"
  7. android:layout_height= "100dp"
  8. android:layout_margin= "10dp"
  9. android:textColor= "#ffffff"
  10. android:textSize= "18sp"
  11. android:textStyle= "bold"
  12. android:background= "@drawable/try_shape_3"/>
  13. </LinearLayout>

shape程式碼:


    
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape= "rectangle">
  4. <solid android:color="#ff00ff"/>
  5. </shape>
對應圖形:

2、oval(橢圓)

控制元件程式碼不變,下面是shape程式碼: