[Android開發技巧]--自行設計按鈕樣式 by艾鍗學院
by 艾鍗學院, 2011-12-22 13:50, 人氣(7482)
在Android中要自行設計按鈕有以下幾種方式,
一: 準備多張不同的按鈕圖片
你可以預先為你的按鈕準備多張不同的圖片，例如如按下前是亮色,按下後變暗, 或是按下前是原圖,按下後變小圖
接著自行編寫不同圖片顯切換的時機, 使用XML編寫,並將檔案放置於 drawable目錄中
例如下列的範例. bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 非觸控模式下,取得焦點時的圖片(利用軌跡球或鍵盤上下選) -->
<item android:drawable="@drawable/ittraining_bg_focus_blue"
android:state_focused="true" />
<!-- 觸控模式下,按下時的圖片 -->
<item android:drawable="@drawable/ittraining_bg_pressed_blue"
android:state_pressed="true" />
<!-- 原始圖片 -->
<item android:drawable="@drawable/ittraining_bg_focus_blue" />
</selector>
接著將該bg.xml 設定為該Button元件的blackground即可.
二: 利用xml編寫android shape drawable 元件
第一種換圖的方式，會導致圖片檔要準備很多份，這將會造成包裝的apk檔code size過大，因為圖片
的東西是己經無法在進行壓縮的，另外利用圖片因為是點陣圖也會有色彩失真或是解析度不足的狀況
（由其在不同大小的營幕上顯示時)。 因此我們可以改以利用xml編寫android shape drawable元件，
這個圖片與色彩會是在執行時期利用cpu去演算出來，為向量的圖形，因此可以有較好的畫質呈現.
以下為幾個經xml編寫設計過的shape drawable元件
1.藍色系
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#449def" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#449def"
android:endColor="#2f6699"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="4dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
2.黑色系
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#343434" />
<stroke
android:width="1dp"
android:color="#171717" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#343434"
android:endColor="#171717"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#171717" />
<corners
android:radius="4dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
3.綠色系
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#70c656" />
<stroke
android:width="1dp"
android:color="#53933f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#70c656"
android:endColor="#53933f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#53933f" />
<corners
android:radius="4dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
三: 利用色彩過瀘器為你的View元作設計不同的渡色.
以下為三種利用ColorFilter的做法.
bt.getBackground().setColorFilter(
new PorterDuffColorFilter(Color.argb(210, 255, 0, 0), PorterDuff.Mode.MULTIPLY));
bt2.getBackground().setColorFilter(0xFFFF0000, android.graphics.PorterDuff.Mode.MULTIPLY);
bt3.getBackground().setColorFilter(new LightingColorFilter(0xFFFFFFFF, 0xFFAA0000));
