安卓日記——自訂按鈕效果

標籤：

安卓原生的按鈕是多麼醜，效果是多麼單調，大家也是有目共睹的。
要做一個APP少不了使用按鈕，一個好看的按鈕少不了好看的效果和外表
這次主要跟大家講講如何用drawable的xml檔案弄一些好看的自訂樣式

首先是外表
在APP中四四方方，灰色底黑色字的按鈕是很難看的，我們希望看到的是圓角，彩色，白字（根據你的個人審美也可以是其他樣式）。
首先是在layout裡建立一個按鈕
然後在drawable檔案夾裡建立一個drawable resource file
不妨起名為shape
加一個selector節點裡建立一個item節點
在item節點裡添加樣式

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item>        <shape>            <!-- 填充的顏色(亮綠) -->            <solid android:color="#28baa7" />            <!-- 設定按鈕的四個角為弧形 -->            <!-- android:radius 弧形的半徑 -->            <corners android:radius="5dip" />            <!-- padding：Button裡面的文字與Button邊界的間隔 -->            <padding            android:left="10dp"            android:top="10dp"            android:right="10dp"            android:bottom="10dp"            />        </shape>    </item></selector>

如果想做點擊後按鈕的樣式則要
再添加一個item節點
整個的drawable就是這樣

<?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="#aaa" />            <!-- 設定按鈕的四個角為弧形 -->            <!-- android:radius 弧形的半徑 -->            <corners android:radius="5dip" />            <!-- padding：Button裡面的文字與Button邊界的間隔 -->            <padding                android:left="10dp"                android:top="10dp"                android:right="10dp"                android:bottom="10dp"                />        </shape>    </item>    <item>        <shape>            <!-- 填充的顏色(亮綠) -->            <solid android:color="#28baa7" />            <!-- 設定按鈕的四個角為弧形 -->            <!-- android:radius 弧形的半徑 -->            <corners android:radius="5dip" />            <!-- padding：Button裡面的文字與Button邊界的間隔 -->            <padding            android:left="10dp"            android:top="10dp"            android:right="10dp"            android:bottom="10dp"            />        </shape>    </item></selector>

這樣的樣式是一般時是亮綠色四周圓角
點擊時是白色圓角

除了點擊之外還有很多的情況請用時自行尋找，也是大同小異

好啦，接下來是布局檔案的設定

 <Button        android:layout_width="150dp"        android:layout_height="wrap_content"        android:text="button"        android:textColor="#fff"        android:background="@drawable/shape"        android:id="@+id/btn"        android:layout_gravity="center_horizontal" />

這個把文字設為白色置中

好啦，一個比較好看的按鈕就這麼誕生啦

安卓日記——自訂按鈕效果