android shape總結 和控制的風格定製

weixin_34162629發表於2015-06-16
Android

1：shape總結 

1）：shape檔案是放置在drawable檔案下的。res/drawable/filename.xml.

2):shape型別:android:shape。

一共同擁有四種：rectangle。oval，line，ring。


3):corners標籤：定義圓角。當且僅當控制元件型別位rectangle時才有作用。

android:radiuse位圓角的半徑。

當然也能夠單獨為每一個圓角進行設定。


4):gradient標籤:顏色漸變。

android:angle：顏色漸變的方向。0是從左到右；90度，是從下到上。

angle必須保證是45的倍數。


android:startColor，android:centerColor，android:endColor：分別為顏色的起始顏色。中間顏色和結束顏色。假設沒有設定中間顏色，那麼就從起始顏色漸變到結束顏色。否則回從起始顏色漸變到中間顏色，再從中間顏色漸變到結束顏色。

android:centerX。android:centerY：我認為這兩個屬性有存在的必要性的前提是要有 android:centerColor。原因是當我沒有設定android:centerColor屬性時，隨意的改變這兩個屬性的值都不會改變控制元件的顯示效果。這兩個屬性是漸變的中間位置。大小都是再0.0--1.0。

android:gradientRadius 漸變的半徑大小。僅當漸變型別位radial的時候才有作用。


android:type 漸變的型別。有三種情況：linear，radial，sweep。

5):solid標籤: 控制元件的顏色填充。

6):stroke標籤：shape的線條。

android:width：線條的寬度。
android:color：線條的顏色。

android:dashWidth：線條的長度。當設定了該值時。將會顯示位虛線。

除非你dashWidth設定的值非常大。那麼看起來還是一條完整的線條。


android:dashGap:線條之間的距離。

僅僅在設定了dashWidth屬性的情況下才會有效果。能夠覺得是虛線之間的寬度。


7):padding標籤：內邊距。控制元件內容和控制元件四條邊的距離。這裡有點奇怪。等寫完了控制元件樣式定製再說吧。

2：控制元件樣式定製


有時候android系統自帶的控制元件型別看起來不是非常美觀。有時我們須要自定義想要的樣式效果。

此時就能夠用到上面的shape drawable了。詳細用法例如以下：

這裡為一個button自己定義樣式。

有一個預設button樣式和一個button按下之後的樣式。


首先定義兩個shape檔案：button_normal.xml和button_pressed.xml。

button_normal.xml:

<?xml version="1.0" encoding="utf-8"?

> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="5dp"></corners> <solid android:color="#ff0000"/> <stroke android:width="1dp" android:color="#00ff00" android:dashWidth="2dp" android:dashGap="2dp"/> </shape>


button_pressed.xml

<?

xml version="1.0" encoding="utf-8"?

> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="10dp" ></corners> <!-- <solid android:color="#ffffff" ></solid> --> <padding android:left="20dp" android:top="1dp" ></padding> <gradient android:startColor="#ffffff" android:endColor="#000000" android:angle="0" android:centerX="0.1" android:centerY="0.2" /> <stroke android:width="1dp" android:color="#00ff00" android:dashWidth="1000dp" android:dashGap="3dp" > </stroke> </shape>


眼下已經寫好了兩種樣式檔案了。

那麼怎麼推斷是按下了的狀態呢？ 這裡引入stateDrawable檔案了。

它也是採用xml方式來定義的。在控制元件的不同狀態能夠用不同的樣式來顯示同一個控制元件。

比方：button有非常多種狀態，按下狀態，有焦點狀態。和正常狀態。


範例：button_style.xml

<?

xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" android:drawable="@drawable/button_pressed"></item> <item android:drawable="@drawable/button_normal"></item> </selector>


這個檔案會從上到下一直匹配下來。直到找到了一個item滿足控制元件眼下的狀態。android:state_pressed 是button被按下狀態。

以下一個item是預設樣式，能夠匹配不論什麼一種狀態。所以要放在最以下。否則其它全部的定義都不起作用。


最後一步：給button加入樣式。

 <Button
        android:text="@string/button_style" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_style"


這樣就得到了button被按下和正常顯示兩種狀態了。

還記得之前有說過padding非常奇怪嗎？在button_normal.xml和button_pressed.xml兩個檔案裡我僅僅定義了一個padding,可是無論在按鈕處於哪種狀態下。padding屬性都會應用到button上。剛學習android。希望大神多多不吝賜教。



相關文章