《Android》『Style & Theme』- Style 與 Theme 的使用方式與差異
《簡單介紹》
在設計 Android 的程式介面時，我們會將所布局的不同介面元件，分別設定其所需的屬性，以 TextView 元件來說，我們在布局的同時，通常會順便加入其元件長寬、字體大小以及字體顏色…等屬性，一般來說直接設定每個元件的屬性即可，但若當同樣屬性設定的介面元件一直重複出現的時候，我們就可以利用自訂 Style 與 Theme 的方式，簡化重複性的布局，進而加快我們撰寫程式的速度。
《Style 與 Theme 的差別》
Style 與 Theme 其實是兩個很相像的東西，都是一種可以套用的格式定義，唯一的差別在於，Theme 的對象是針對 Application 與 Activity 設定整個程式的外觀，而 Style 的對象則是設定布局介面元件的屬性。
《宣告 & 使用方式》
以下透過程式碼片段的方式，分別說明其宣告以及使用的方式。
1. Theme 的設定與使用
|
1 2 3 4 5 6 7 8 9 10 |
<resources> <style name="自訂名稱" parent="Android SDK 內建的 Theme"> <item name="屬性名稱"> 屬性值 </item> <item name="屬性名稱"> 屬性值 </item> <item name="屬性名稱"> 屬性值 </item> ... </style> </resources> |
Theme 的設定格式
在定義 Theme 的時候，除了用 parent 屬性繼承一個系統內建的 Theme 之外，我們亦可以利用宣告 <item> 屬性來修改 Theme 的外觀。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="tw.android" android:versionCode="1" android:versionName="1.0" > <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppBaseTheme" > //指定 Theme 的樣式(Application) <activity android:name="tw.android.MainActivity" android:label="@string/app_name" android:theme="@style/AppTheme" > //指定 Theme 的樣式(Activity) <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> |
AndroidManifest.xml
當我們設定好 Application 的 Theme 以後，整個 Application 中的 Activity 皆會套用這個 Theme，除非 Activity 本身亦有另外設定自己的 Theme，因此在上面的程式碼片段中，我們同時對 Application 與其內的 Activity 做了 Theme 的屬性設定，其實是有它的意義的。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<resources> <style name="AppBaseTheme" parent="android:Theme.Light"> <item name="android:windowFullscreen">true</item> //是否全螢幕 <item name="android:windowNoTitle">true</item> //是否隱藏程式標題列 <item name="android:textSize">12dp</item> //設定程式介面元件文字大小 <item name="android:textColor">#ffffff</item> //設定程式介面元件文字顏色 ... </style> <style name="AppTheme" parent="android:Theme.Holo" /> //android:Theme.XXX 為系統內建的 Theme 屬性格式 </resources> |
style.xml
我們會將 Theme 的屬性在 AndroidManifest.xml 中做設定，這邊要提醒的是，Theme 其實本身就是一種 Style，因此我們在 AndroidManifest.xml 中所做的 Theme 屬性設定，其實是指向放在 style.xml 中的一個 <style> 介面格式定義。
2. Style 的設定與使用
Style 的宣告方式其實就跟前面提到的 Theme 一模一樣，唯一需要注意的是，Style 是用來設定介面元件屬性的。
|
1 2 3 4 5 6 7 8 9 10 |
<resources> <style name="MyTextStyle" parent="android:TextAppearance" > <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:textSize">12dp</item> <item name="android:textColor">#FF0000</item> </style> </resources> |
style.xml
建立一個名稱為 MyTextStyle 的 style，它是以系統內建的 android:TextAppearance 屬性為基礎(若不需要亦可直接省略 parent)，並利用 <item> 標籤另外自訂所需的屬性，定義好 style 之後，就可以於介面佈局中，用來設定介面元件的屬性。
|
1 2 3 4 5 6 |
<TextView style = "@style/MyTextStyle" //android:textAppearance = "@style/MyTextStyle" 與上一行宣告意思一樣 android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="套用自訂的MyTextStyle" /> |
套用自訂的 MyTextStyle
|
1 2 3 4 5 |
<TextView style = "@android:style/TextAppearance" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="套用系統內建的TextAppearance" /> |
套用系統內建的 TextAppearance
在使用系統內建的 style 時，可以用 style = “?android:style/TextAppearance” 取代 style = “@android:style/TextAppearance”，意思是當找不到指定的 style，就會使用系統預設值。
3. Style 的繼承方式
Style 還有一個很方便的特性，就是它是可以互相繼承的，以前面的例子為例，當我們在定義標籤內的 parent 屬性時，其實就代表著我們定義了這個 style 所繼承的父 style，style 的繼承有兩種方式，範例如下 –
|
1 2 3 |
<style name="MyTextStyle" parent="@android:style/TextAppearance"> <item name="android:textColor">#00FF00</item> </style> |
透過 parent 繼承
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<resources> <style name="MyTextStyle" parent="android:TextAppearance" > <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> </style> <style name="MyTextStyle.CentHori" > <item name="android:layout_gravity">center_horizontal</item> </style> </resources> |
透過 “.” 繼承
透過”.”的繼承，新的 style 名稱為MyTextStyle.CentHori，便同時擁有了 MyTextStyle 與自己本身所設定的屬性。
臉書留言
一般留言