2015年8月1日 星期六

Theme and Style

Reference

https://developer.android.com/training/material/theme.html#StatusBar

精通 Android程式介面設計
作者:孫宏明

定義

Theme和 Style都是格式的定義
Theme應用的對象是 Application或 Activity
Style應用的對象是介面元件

Theme

Theme的系列

Theme、Theme.Light、Theme.Holo、Theme.Holo.Light、Theme.Translucent

每個系列可再分為下列五種:
Theme                                              基本型態 (深色系列)
Theme.Dialog                                  對話盒型態
Theme.Panel                                    小窗格型態 (背景透明)
Theme.NoTitleBar                           沒有程式上方的標題列
Theme.NoTitleBar.Fullscreen         讓程式畫面佔滿螢幕

如何讓程式在不同版本的Android使用不同的Theme

在 res下建立 valuse-XX資料夾,並建立 styles.xml資源檔
例如:Android 4.2的 API編號為17,就建立 values-17資料夾


使用 parent屬性指定一個系統內建的 theme,另外可將一些屬性放在 <item>標籤裡,修改 theme的外觀

<resources>

   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:textSize">25sp</item>
        <item name="android:textColor">#00FF00</item>
    </style>

</resources>

Style

如何建立 Style

建立 Style和建立 Theme的過程類似,因為 Theme就是一種 Style

<style name="MyTextStyle" parent="android:TextAppearance">
        <item name="android:textSize">25sp</item>
        <item name="android:textColor">#FF0000</item>
</style>

<TextView
        style="@style/MyTextStyle"
        android:id="@+id/question_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"      
        android:text="@string/question_label"
        android:textSize="25sp"/>

也可以套用系統預設的 style
<TextView
        style="@android:style/TextAppearance"
        android:id="@+id/question_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"      
        android:text="@string/question_label"
        android:textSize="25sp"/>

在使用系統預設的 style時,可以用?代替@,是說當沒有指定特定style時使用系統預設值
style="?android:textAppearance"


Style的繼承

style提供繼承的功能
當style名稱加上「.」,表示這個 style名稱繼承「.」符號前面一個的 style名稱
例如:
CentHori繼承 MyTextStyle,同時擁有三個屬性
<style name="MyTextStyle" parent="android:TextAppearance">
        <item name="android:textSize">25sp</item>
        <item name="android:textColor">#FF0000</item>
</style>

<style name="MyTextStyle.CentHori">
        <item name="android:layout_gravity">center_horizontal</item>
</style>

這種繼承方式可以系續延伸
<style name="MyTextStyle.CentHori.GreyBack">
        <item name="android:background">#aaaaaa</item>
</style>

沒有留言: