[Android]Android進階UI開發系列教程（三） – Android樣式和主題教程

 

教程索引

1. Android 拖拽（Drag and Drop）教程
2. Android 繪製（Drawables）教程
3. Android 樣式和主題（Styles and Themes）教程
4. Android 動態壁紙（Live Wallpaper）教程
5. Android 主畫面小組件（Homescreen Widgets）教程
6. Android 自訂視圖（Custom Views）教程
7. Android 支援不同大小螢幕（Support different screensize）教程
8. Android 動畫（animations）教程
9. Android 觸摸（Touch）教程

 

 1. Android 樣式和主題

1.1 樣式（Styles）

    Android 允許在外部樣式檔案中定義 Android 應用程式的 Look 和 Feel ，你可以將定義好的樣式應用在不同的視圖（Views）上。你可以在 XML  檔案中定義樣式，並將這些樣式運用到不同的組件上。使用XML這種方式定義樣式，你只需要配置一些通用的屬性，以後如果需要修改樣式，可以集中修改。

    你可以在你 Android 項目的 /res/values 檔案下建立一個 XML 檔案，注意給檔案的根目錄必須是 <resources>。下面的例子將展示在 /res/xml目錄下建立 style.xml 檔案。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="text">
        <item name="android:padding">4dip</item>
        <item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
        <item name="android:textColor">#000000</item>
    </style>
    <style name="layout">
        <item name="android:background">#C0C0C0</item>
    </style>
</resources>

    你可以將上面定義好的樣式應用到組件（元素）上面，例如通過 style="@style/text" 將 text 樣式運用到 Text 元素上面。

1.2 屬性（Attributes）

    你也可以將單個屬性應用到 Android 樣式上。下面的例子將會定義 Android 4.0 的 Button 樣式。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        style="?android:attr/buttonBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/Button01"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Show" />

        <Button
            android:id="@+id/Button02"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Change" />
    </LinearLayout>

    <EditText
        android:id="@+id/myView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >

        <requestFocus />
    </EditText>

</LinearLayout>

    如下：

1.3 主題（Themes）

    主題相比單個視圖而言，是應用到整個 Activity 或者 application 的樣式。下面例子將自訂一個主題，該主題將繼承 Android 定義好的主題。

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="MyTheme" parent="android:Theme.Light">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@color/translucent_red</item>
        <item name="android:listViewStyle">@style/MyListView</item>
    </style>

    <style name="MyListView" parent="@android:style/Widget.ListView">
        <item name="android:listSelector">@drawable/ic_menu_home</item>
    </style>

</resources>