在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));
 
 

Edit by Jarey/艾鍗學院. 

文章標籤
創作者介紹

Frank's Blog

Frank 發表在 痞客邦 PIXNET 留言(0) 人氣()