android Shape 相關知識

shape 很強大,但是一直對其很模糊,現在總結一下自己的盲區和認識

目錄

相關子屬性

corners 

Solid 

gradient :用以定義漸變色,可以定義兩色漸變和三色漸變,及漸變樣式;屬性如下

stroke

size和padding

Shape 自身屬性

實際應用


相關子屬性

corners 

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

 Corners標籤是用來字義圓角的,其它四個是逐個字義每個角的圓角半徑。

Solid 

solid用以指定內部填充色,只有一個屬性:顏色

<solid  android:color="color" /> 

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

子屬性android:angle屬性(僅對線性漸變有效),其它兩種漸變方式都沒有任何動靜;eg:

<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> 

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

<?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> 

stroke

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

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

size和padding

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

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

Shape 自身屬性

android:shape=["rectangle" | "oval" | "line" | "ring"]   
shape的形狀,默認爲矩形,可以設置爲矩形(rectangle)、橢圓形(oval)、線性形狀(line)、環形(ring) 
android:dither 是否抖動  
下面的屬性只有在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標籤就不會有效果,很顯然的道理。同時,useLevel一般設置爲false 。下面一個個看看各個形狀都是怎麼樣的;

橢圓形(可以畫出圓形):

<shape
    xmlns:android= "http://schemas.android.com/apk/res/android"
    android:shape= "oval"
    android:useLevel= "false" >
    <solid android:color= "@color/red" />
    <stroke
        android:width= "1dp"
        android:color= "@color/white" />
    <size android:width= "20dp"
          android:height= "20dp" />
</shape>

線性:用處不多

圓環:用ring實現。

 

實際應用

1 假如說按鈕的背景是一個藍色橢圓的形狀,其辦法可以UI切一張藍色背景圖,或者用shape搞定,代碼如下;相比之下,沒有圖片易維護,減少app體積,更原生,所以用shape更好
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />

    <corners android:radius="20dp" />

    <stroke android:color="@color/blue"
        android:width="5dp"/>
</shape>

2 shape 畫虛線

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

並在 用的地方加一個 

android:layerType="software"

屬性,這樣真機上才能顯示出來;

3. 背景框

一般用 矩形形狀實現。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章