Android開發入門:樣式和主題(Styles and Themes)

這篇文章是官方文檔的翻譯和筆記。對應於官方文檔的develop--API Guides--User Interface--Styles and Themes

文章內容:

0. 樣式和主題

1. 定義樣式

   1.1 定義樣式的步驟

   1.2 繼承

   1.3 多層次繼承

   1.4 樣式屬性

2. 爲UI使用樣式和主題

   2.1 爲單個視圖使用樣式

   2.2 爲Activity或應用程序使用主題

   2.3 根據不同平臺版本選擇主題

3. 使用平臺的樣式和主題


0. 樣式和主題(Styles and Themes)

樣式(style)是用來指定視圖或窗口的外觀和格式的一組屬性集合。樣式可以用來指定高度、填充、字體大小、背景顏色等等。樣式在XML資源文件中定義,和指定佈局的XML文件是分開的。

Android中的樣式和網頁設計中的CSS(級聯樣式表)踐行同樣的哲學:將設計和內容分開。

例如,你可以把下面這個佈局XML

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="@string/hello" />
變成下面這樣:

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />
所有和樣式相關的屬性都從佈局文件中移動到了一個名爲CodeFont的樣式定義中。CodeFont樣式的定義會在下文給出。


主題(theme)是應用到整個activity或者應用程序的樣式。而不是像上面的例子一樣只應用到單個視圖。當一個樣式變成主題後,Activity或應用程序中的所有視圖都將應用這個樣式中它所支持的屬性。例如,你可以將上面例子中的GodeFont樣式作爲一個activity的主題,然後這個Activity中所有的文字都將變成monospace字體。


1. 定義樣式(Defining Styles)

1.1 創建樣式的步驟:

1.在工程的res/values目錄下創建一個XML文件。這個XML文件的根節點必須是<resources>。

2.爲每一個你要創建的樣式創建一個<style>元素。並且用來識別每個<style>的name屬性的值必須是獨一無二的。

3.爲樣式的每一個屬性創建一個<item>元素,每個<item>都必須有一個name來表示樣式屬性,一個和name對應的值。這個值可以是關鍵字字符串、十六進制表示的顏色、對另一個資源類型的引用,或者其他值。

下面是一個只有單個樣式的示例文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>
<resources>的每個子元素在編譯期間都會被轉化爲一個應用程序資源對象。爲每一個樣式指定name後,IDE會在R文件中爲這個樣式創建一個ID,以後就可以在佈局文件中根據@style/id來引用相應的樣式。比如要引用上面定義的樣式,可以使用@style/CodeFont。


<style>元素的parent屬性是可選的。parent屬性用來指定當前樣式要繼承屬性的樣式的id(樣式之間是可以繼承的)。你還可以覆寫繼承來的屬性。


在XML文件中爲一個應用程序或者Activity定義一個主題和爲一個視圖定義一個樣式的方式是一模一樣的。在上面定義的GodeFont樣式即可以作爲單個視圖的樣式,也可以作爲一個應用程序或Activity的主題。如何將一個樣式應用到一個視圖或者整個應用程序或Activity在稍後說明。


1.2 繼承

<style>的parent屬性可以指定一個你想要繼承的屬性。你可以繼承一個現有的樣式然後定義你想要修改或添加的屬性。你可以繼承你自己定義的屬性,也可以繼承平臺內置的屬性。比如,你可以繼承Android平臺的默認字體外觀然後修改它。

<style name="GreenText" parent="@android:style/TextAppearance">
        <item name="android:textColor">#00FF00</item>
    </style>
如果你要繼承自己定義的樣式,你不需要使用parent屬性,只需要在把你新定義的樣式的name的前綴名設爲你要繼承的屬性的name。前綴name和name用點號分開。例如,如果你要定義一個新顏色繼承自CodeFont樣式,然後把字體顏色設爲紅色,你可以這樣定義這個樣式:

<style name="CodeFont.Red">
        <item name="android:textColor">#FF0000</item>
    </style>
注意:雖然這個樣式沒有使用parent屬性,但是它的name前綴是CodeFont,所以這個演示繼承了CodeFont樣式的所有屬性,但是將text顏色修改成了紅色。你可以用@style/CodeFont.Red來引用這個樣式。


1.3 多層次繼承

只要你願意,你可以任意擴展繼承層次。還是通過name來進行。比如,你可以這樣來繼承CodeFont.Red:

<style name="CodeFont.Red.Big">
        <item name="android:textSize">30sp</item>
    </style>
這個樣式繼承了CodeFont和CodeFont.Red樣式所有屬性,然後添加了一個android:textSize屬性。現在你可以用@/style/CodeFont.Red.Big來引用它。

注意:通過改name來繼承樣式的方法只適用於你自己定義的樣式。想要繼承Android內置的樣式,你還得用parent屬性。


1.4 樣式屬性

現在你已經知道樣式是怎麼定義的了,你還得知道在<item>元素中哪些樣式屬性是可以利用的。你可能已經熟悉了一些,比如layout_width和textColor。還有很多樣式屬性我們可以使用。

查看一個視圖可以支持哪些屬性,最好的地方是它對應的class reference,那兒列出了它能支持的所有XML屬性。比如,所有在EditText XML attributes表中列出的屬性都可以在爲EditText定義的樣式中使用。其中列出的一個屬性是android:inputType,以前你可能在<EditText>元素中使用android:inputType,就像這樣:

<EditText
    android:inputType="number"
    ... />
現在你可以爲EditText創建一個樣式,來包含這個屬性

<style name="Numbers">
  <item name="android:inputType">number</item>
  ...
</style>
這樣你就可以在佈局文件中直接引用這個樣式,而不是在佈局文件中指定inputType屬性(記住我們的哲學:設計和內容分開)

<EditText
    style="@style/Numbers"
    ... />
這個簡單例子中,使用樣式的方法好像比沒使用樣式方法多做了一些工作,但是,當你需要很多樣式屬性時,我們就可以在很多地方重複利用這個定義的樣式,這個回報是值得的。(定義一次,多次使用)

想查看所有可能的樣式屬性,看R.attr reference。記住,並不是所有的視圖對象都支持相同的樣式屬性,所以你通常應該參考特定視圖類型來查看所支持的樣式屬性。然而,如果你將一個樣式應用到一個視圖,而這個視圖並不支持這個樣式中所有屬性,視圖將只應用它支持的屬性,而忽略那些它不支持的屬性。


一些樣式屬性,不適用於任何視圖元素,只能應用到主題上。這些樣式屬性適用於整個窗口而不是任何視圖類型。比如,一些主題的樣式屬性可以隱藏應用標題,隱藏工具欄,或者改變窗口的背景,這些屬性就不屬於任何視圖對象。想查看這些theme-only樣式屬性,查看R.attr參考中以”window“開通的屬性。比如windowNoTitle和windowBackground只有在樣式作爲主題應用到Activity或整個應用程序時纔有效。

     注意:不要忘記<item>中的屬性名稱都以命名空間android:開頭。比如:<item name="android:inputType">



2. 爲UI設置樣式和主題

2.1 爲單個視圖設置樣式

要爲單個視圖設置樣式,你需要在XML佈局文件中找到對應的視圖標籤,併爲之添加sytle屬性。

比如,下面的例子爲一個TextView設置CodeFont樣式。

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />

注意style屬性沒有用android:前綴


2.2 爲Activity或應用程序設置主題

爲Activity或應用程序設置主題,你需要在Androidmanifest.xml文件中爲<activity>或<application>標籤添加android:theme屬性。

比如,下面的例子爲整個應用程序設置主題:

<application android:theme="@style/CustomTheme">
下面的例子爲一個Activity設置主題:

<activity android:theme="@android:style/Theme.Dialog">

就像Android中其他內置資源一樣,Android也提供了很多預先定義好的主題供你使用。比如你可以使用內置的Dialog主題來是你的Activity看起來像一個對話框。

<activity android:theme="@android:style/Theme.Dialog">


或者你想讓你的Activity背景透明,你可以使用Translucent主題

<activity android:theme="@android:style/Theme.Translucent">


如果你喜歡某個內置主題,但是想做細微的修改,你可以自定義一個主題並繼承這內置主題。比如下面這樣:

<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="android:Theme.Light">
    <item name="android:windowBackground">@color/custom_theme_color</item>
    <item name="android:colorBackground">@color/custom_theme_color</item>
</style>
然後,你就可以在Android Manifest爲Activity指定主題了

<activity android:theme="@style/CustomTheme">


2.3 爲不同的平臺版本選擇不同主題

Android的新版本爲應用程序提供了新的主題。你可能想在應用程序中使用這些主題,同時又想兼容老的平臺版本。你可以利用資源選擇參數來做到這一點:在不同的平臺版本上使用不同的父主題。

比如,這裏有一個自定義主題簡單的繼承子平臺默認的light theme。它可能出現在res/values目錄下的一個XML文件中(一般是res/values/stryles.xml):

<style name="LightThemeSelector" parent="android:Theme.Light">
    ...
</style>
想在Android 3.0(API Level 11)或者更高的平臺上使用新的全息主題,你可以在res/values-v11目錄下爲主題創建一個備選的主題,但是保證parent是全息主題( holographic theme可以翻譯成全息主題嗎?):

<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
    ...
</style>

現在你按照一般的方式使用這個主題,當運行在Android 3.0或者更高的版本時,你的應用程序會自動切換到全息主題。


你可以在R.styleabel.Theme中找到一張關於你能在主題中使用的標準屬性表。

想知道更多地關於”根據不同平臺版本或其他設備配置提供可選資源,比如如主題和佈局“,請查看Providing Resources文檔。



3. 使用平臺的主題和樣式

Android平臺提供了一大堆樣式和主題,你完全可以在你的應用程序中使用。你可以在R.style class中找到一份關於所有可使用的樣式參考。要使用所有在這份參考中列出的樣式,你需要將樣式name的下劃線換成點號。比如,你可以通過”@android:style/Theme.NoTitleBar“來使用這裏列出的Theme_NoTitleBar主題。

然而,這份R.stytle 參考並是一份好的文檔,而且描述的不全面。但是,通過閱讀關於這些樣式和主題的真實代碼可以讓你更好的理解它們提供了哪些屬性。想更多低了解Android 樣式和主題,請閱讀下面的源代碼:

這些文件會通過例子來幫助你理解。例如,在Android themes源代碼中,你會找到<style name="Theme.Dialog">聲明。在這個定義中,你會發現所有用於樣式對話框的屬性都用於Android框架。

想知道更多關於樣式和主題的語法信息,請查看Style Resource文檔。

想知道你在定義樣式或主題時能使用哪些樣式屬性(例如,"windowBackground"或"textAppearance"),請查看R.attr或者相應的View class。


SEE ALSO

  1. Style and Theme Resources
  2. R.style for Android styles and themes
  3. R.attr for all style attributes


小弟英語剛過四級,若翻譯的有錯誤或不合適的地方,歡迎指出!拜謝!

本來想做筆記,但過程中發現翻譯文檔更有價值,既能當筆記,也能在翻譯的過程中加深理解!




發佈了134 篇原創文章 · 獲贊 243 · 訪問量 54萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章