網頁

2011年10月19日 星期三

Android學習_自訂樣式_以按鈕為例

寫程式就是這樣,一開始做一個簡簡單單介面,等到功能都可以達到了,就會開始想要改變樣式,希望程式界面變得更好看,這時候諸如我這樣美術細胞很少,大概只會深底白字、灰底深字,連美勞都做不好的一般工程師就會開始感到無力,但完全不做美工的世界也不知道在哪裡?

所以,想要更漂亮的介面,至少先學會怎麼改變,再想怎樣可以變得更好看。

如果要變更按鈕的樣式,大概有兩個方向,一個是"按鈕外殼的改變",另一個是"按鈕上面字的改變"

首先說明改變外殼的方式,方法分為兩種:
1. 使用程式碼的方式

A. 於res點擊右鍵,新增一個Android XML File

B. 輸入檔案名稱後,選擇create Drawable,並於root選擇selector

C. 新建完成以後,可以發現於selecto的標籤內只能加入item標籤,而該標籤內只能放上以android:state開頭的屬性,而觀察字面上的意思就可以猜出,這是用來判斷每一種狀態時,要顯示的按鈕樣式。如果希望一般狀態與按下按鈕時有所區別就可以利用兩個item標籤來設定:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<gradient android:startColor="#FFA10A" android:endColor="#FFB947" android:angle="90" />
<stroke android:width="2dip" android:color="#cccccc" />
<corners android:radius="3dp" />
<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient android:startColor="#1559B0" android:endColor="#3F92FF" android:angle="90" />
<stroke android:width="2dip" android:color="#cccccc" />
<corners android:radius="3dip" />
<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
</shape>
</item>
</selector>

D. 設定完上述檔案後,就可以到按鈕標籤處將該設定檔引入

<Button
android:id="@+id/btn_main_Login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登入"
android:background="@drawable/buttonstyle"
></Button>


那如果自己或是有人可以幫你做按鈕的底圖,當然也可以利用這樣的方式,將圖變為按鈕的外框。
2. 使用背景圖案的方式
直接在item標籤內設定要顯示的圖:

<item android:drawable="@drawable/pressed"
android:state_pressed="true"/>

沒有留言:

張貼留言