Android樣式的開發：Style篇

發表於2015-11-30

前面鋪墊了那麼多，終於要講到本系列的終篇，整合所有資源，定義成統一的樣式。
哪些該定義成統一的樣式呢？舉幾個例子吧：

每個頁面標題欄的標題基本會有一樣的字型大小、顏色、對齊方式、內間距、外間距等，這就可以定義成樣式；
很多按鈕也都使用一致的背景、內間距、文字顏色、文字大小、文字的對齊方式等，這也可以定義成樣式；
網路載入的進度條基本也都是一樣的，同樣可以定義成樣式；
不喜歡系統的彈出框樣式，那也可以自定義樣式。

樣式的定義

Android的樣式一般定義在res/values/styles.xml檔案中，其中有一個根元素<resource>，而具體的每種樣式定義則是通過<resource>下的子標籤<style>來完成，<style>通過新增多個<item>來設定樣式不同的屬性。
另外，樣式是可以繼承的，可通過<style>標籤的parent屬性宣告要繼承的樣式，也可通過點字首 (.) 繼承，點前面為父樣式名稱，後面為子樣式名稱。點字首方式只適用於自定義的樣式，若要繼承Android內建的樣式，則只能通過parent屬性宣告。
用個例項說明具體的用法吧，以下程式碼為Android 5.0系統預設的按鈕樣式：

<style name="Widget.Material.Button">
    <item name="background">@drawable/btn_default_material</item>
    <item name="textAppearance">?attr/textAppearanceButton</item>
    <item name="minHeight">48dip</item>
    <item name="minWidth">88dip</item>
    <item name="stateListAnimator">@anim/button_state_list_anim_material</item>
    <item name="focusable">true</item>
    <item name="clickable">true</item>
    <item name="gravity">center_vertical|center_horizontal</item>
</style>

<item name="background">@drawable/btn_default_material</item>

<item name="textAppearance">?attr/textAppearanceButton</item>

<item name="stateListAnimator">@anim/button_state_list_anim_material</item>

<item name="gravity">center_vertical|center_horizontal</item>

</style>

其中，stateListAnimator指定狀態改變時的動畫，button_state_list_anim_material的程式碼如下：

<!-- res/anim/button_state_list_anim_material.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:state_enabled="true">
        <set>
            <objectAnimator 
                android:propertyName="translationZ"
                android:duration="@integer/button_pressed_animation_duration"
                android:valueTo="@dimen/button_pressed_z_material"
                android:valueType="floatType" />
            <objectAnimator 
                android:propertyName="elevation"
                android:duration="0"
                android:valueTo="@dimen/button_elevation_material"
                android:valueType="floatType" />
        </set>
    </item>
    <!-- base state -->
    <item android:state_enabled="true">
        <set>
            <objectAnimator 
                android:propertyName="translationZ"
                android:duration="@integer/button_pressed_animation_duration"
                android:valueTo="0"
                android:startDelay="@integer/button_pressed_animation_delay"
                android:valueType="floatType"/>
            <objectAnimator 
                android:propertyName="elevation"
                android:duration="0"
                android:valueTo="@dimen/button_elevation_material"
                android:valueType="floatType" />
        </set>
    </item>
    <item>
        <set>
            <objectAnimator 
                android:propertyName="translationZ"
                android:duration="0"
                android:valueTo="0"
                android:valueType="floatType"/>
            <objectAnimator 
                android:propertyName="elevation"
                android:duration="0"
                android:valueTo="0"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

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

<set>

<objectAnimator

android:propertyName="translationZ"

android:duration="@integer/button_pressed_animation_duration"

android:valueTo="@dimen/button_pressed_z_material"

android:valueType="floatType" />

<objectAnimator

android:propertyName="elevation"

android:duration="0"

android:valueTo="@dimen/button_elevation_material"

android:valueType="floatType" />

</set>

</item>

<set>

<objectAnimator

android:propertyName="translationZ"

android:duration="@integer/button_pressed_animation_duration"

android:valueTo="0"

android:startDelay="@integer/button_pressed_animation_delay"

android:valueType="floatType"/>

<objectAnimator

android:propertyName="elevation"

android:duration="0"

android:valueTo="@dimen/button_elevation_material"

android:valueType="floatType" />

</set>

</item>

<item>

<set>

<objectAnimator

android:propertyName="translationZ"

android:duration="0"

android:valueTo="0"

android:valueType="floatType"/>

<objectAnimator

android:propertyName="elevation"

android:duration="0"

android:valueTo="0"

android:valueType="floatType"/>

</set>

</item>

</selector>

可以看到，每種狀態的動畫為屬性動畫集，屬性動畫的用法請參考Property Animation篇。
現在我想繼承Widget.Material.Button樣式，改變背景和文字顏色，那麼，程式碼如下：

<!-- res/values/styles.xml -->
<resources>
    <style name="ButtonNormal" parent="@android:style/Widget.Material.Button" >
        <item name="android:background">@drawable/bg_btn_selector</item>
        <item name="android:textColor">@color/text_btn_selector</item>
    </style>
</resources>

<item name="android:background">@drawable/bg_btn_selector</item>

<item name="android:textColor">@color/text_btn_selector</item>

</style>

</resources>

其中，@drawable/bg_btn_selector和@color/text_btn_selector的實現請參照selector篇。
有些按鈕，我只想改變文字顏色，但背景想讓它透明，這時就可以用點字首的方式繼承以上的樣式，程式碼如下：

<!-- res/values/styles.xml -->
<resources>
    <style name="ButtonNormal" parent="@android:style/Widget.Material.Button">
        <item name="android:background">@drawable/bg_btn_selector</item>
        <item name="android:textColor">@color/text_btn_selector</item>
    </style>

    <style name="ButtonNormal.Transparent">
        <item name="android:background">@drawable/bg_btn_transparent</item>
        <item name="android:textColor">@color/text_btn_selector</item>
    </style>
</resources>

<item name="android:background">@drawable/bg_btn_selector</item>

<item name="android:textColor">@color/text_btn_selector</item>

</style>

<item name="android:background">@drawable/bg_btn_transparent</item>

<item name="android:textColor">@color/text_btn_selector</item>

</style>

</resources>

引用的時候只要在相應的Button裡新增style就可以了，程式碼如下：

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="onAction"
    android:text="@string/btn_action"
    style="@style/ButtonNormal.Transparent" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:onClick="onAction"

android:text="@string/btn_action"

style="@style/ButtonNormal.Transparent" />

有時候，定義的樣式太多，如果都放在styles.xml檔案裡，那這檔案也太臃腫了。因此，可以將樣式分類拆分成多個檔案。Android系統本身也拆分為多個檔案存放的，如下列表全都是樣式檔案：

styles.xml
styles_device_defaults.xml
styles_holo.xml
styles_leanback.xml
styles_material.xml
styles_micro.xml
themes.xml
themes_device_defaults.xml
themes_holo.xml
themes_leanback.xml
themes_material.xml
themes_micro.xml

styles.xml

styles_device_defaults.xml

styles_holo.xml

styles_leanback.xml

styles_material.xml

styles_micro.xml

themes.xml

themes_device_defaults.xml

themes_holo.xml

themes_leanback.xml

themes_material.xml

themes_micro.xml

其中，主要分為兩大類，styles定義了簡單的樣式，而themes則定義了主題。

主題

以上的簡單例子只用於單個View，這是樣式最簡單的用法。但樣式的用法不只是用於單個View，也能用於Activity或整個Application，這時候需要在相應的<activity>標籤或<application>標籤裡設定android:theme*屬性，引用的其實也是style*，但一般稱為主題。

Android系統提供了多套主題，檢視Android的frameworks/base/core/res/res/values目錄，就會看到有以下幾個檔案(目前為止)：

themes.xml：低版本的主題，目標API level一般為10或以下
themes_holo.xml：從API level 11新增的主題
themes_device_defaults.xml：從API level 14新增的主題
themes_material.xml：從API level 21新增的主題
themes_micro.xml：應該是用於Android Wear的主題
themes_leanback.xml：還不清楚什麼用

不過在實際應用中，因為大部分都採用相容包的，一般都會採用相容包提供的一套主題：Theme.AppCompat。AppCompat主題預設會根據不同版本的系統自動匹配相應的主題，比如在Android 5.0系統，它會繼承Material主題。不過這也會導致一個問題，不同版本的系統使用不同主題，就會出現不同的體驗。因此，為了統一使用者體驗，最好還是自定義主題。

自定義主題也很簡單，只要繼承某一父主題，然後在<activity>標籤或<application>中引用就可以了。
主題的定義示例如下：

<resources> 
    <style name="AppTheme" parent="Theme.AppCompat">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="windowAnimationStyle">@style/WindowAnimation</item>
    </style>

    <!-- Standard animations for a full-screen window or activity. -->
    <style name="WindowAnimation" parent="@android:style/Animation.Activity">
        <item name="activityOpenEnterAnimation">@anim/activity_open_enter</item>
        <item name="activityOpenExitAnimation">@anim/activity_open_exit</item>
        <item name="activityCloseEnterAnimation">@anim/activity_close_enter</item>
        <item name="activityCloseExitAnimation">@anim/activity_close_exit</item>
    </style>
</resources>

<item name="windowActionBar">false</item>

<item name="windowAnimationStyle">@style/WindowAnimation</item>

</style>

<item name="activityOpenEnterAnimation">@anim/activity_open_enter</item>

<item name="activityOpenExitAnimation">@anim/activity_open_exit</item>

<item name="activityCloseEnterAnimation">@anim/activity_close_enter</item>

<item name="activityCloseExitAnimation">@anim/activity_close_exit</item>

</style>

</resources>

其中，WindowAnimation重新指定了Activity的轉場動畫，以下為activity_close_exit的示例程式碼：

<!-- res/anim/activity_close_exit.xml -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false"
    android:zAdjustment="top">
    <alpha 
        android:fromAlpha="0.0" 
        android:toAlpha="1.0"
        android:interpolator="@interpolator/decelerate_quart"
        android:fillEnabled="true"
        android:fillBefore="false" 
        android:fillAfter="true"
        android:duration="200" />
    <translate 
        android:fromYDelta="8%" 
        android:toYDelta="0"
        android:fillEnabled="true" 
        android:fillBefore="true" 
        android:fillAfter="true"
        android:interpolator="@interpolator/decelerate_quint"
        android:duration="350" />
</set>

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

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:shareInterpolator="false"

android:zAdjustment="top">

<alpha

android:fromAlpha="0.0"

android:toAlpha="1.0"

android:interpolator="@interpolator/decelerate_quart"

android:fillEnabled="true"

android:fillBefore="false"

android:fillAfter="true"

android:duration="200" />

<translate

android:fromYDelta="8%"

android:toYDelta="0"

android:fillEnabled="true"

android:fillBefore="true"

android:fillAfter="true"

android:interpolator="@interpolator/decelerate_quint"

android:duration="350" />

</set>

這是比較簡單的檢視動畫，檢視動畫具體用法可參考View Animation篇。
接著，若要使用到整個Application，則在AndroidManifest.xml的<application>標籤設定android:theme屬性，示例程式碼如下：

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme">
    <!-- activity here -->
</application>

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme">

</application>

寫在最後

至此，本系列所有文章就寫完了，歡迎留言討論。

Android樣式的開發：selector篇
2015-11-26
Android
Android樣式的開發：Property Animation篇
2015-11-30
Android
Android樣式的開發：View Animation篇
2015-11-30
AndroidView
Android樣式的開發：drawable彙總篇
2015-11-28
Android
Android樣式的開發：layer-list篇
2015-11-28
Android
Android樣式(style)和主題(theme)
2016-12-04
Android
vue style樣式失效
2020-04-26
Vue
繫結class樣式和style樣式
2024-08-29
js style方式設定元素的樣式
2017-03-29
JS
javascript使用style方式設定元素的樣式
2017-03-17
JavaScript
【Android開發點滴】自定義Toast樣式
2017-09-24
AndroidAST
行內樣式新增多個style屬性，只會載入第一個style裡面的樣式
2017-08-16
測試開發之前端篇-CSS層疊式樣式表
2021-09-22
前端CSS
vue-class和style樣式繫結
2021-09-05
Vue
Android開發Style的使用，控制元件共同屬性的抽取
2016-03-15
Android控制元件
Android應用開發—TabLayout定製化Tab樣式
2017-10-09
AndroidTabLayout
weex-style-loader:給你熟悉的style開發體驗
2016-07-26
vue樣式寫在data中，作用在:style上
2020-10-12
Vue
WordPress模板層次05：style.css樣式表
2018-07-08
CSS
Android開發之動態設定字型的樣式和粗細
2018-04-24
Android
Android設定選項開發及自定義Preference樣式
2014-10-13
Android
Flutter混合開發—Android篇
2021-05-25
FlutterAndroid
列印分頁css樣式，style=”page-break-after:always;”
2010-05-31
CSS
Android 自定義Switch開關按鈕的樣式
2018-01-25
Android
讓 Android 開發像 web 開發一樣爽
2018-11-18
AndroidWeb
js dom元素樣式設定相關style屬性介紹
2017-03-26
JS
Flutter外掛開發---Android篇
2021-05-11
FlutterAndroid
【Android】1：Android APP開發入門篇
2015-11-29
AndroidAPP
Android中的Style、Theme詳解以及發展史
2018-05-02
Android
Android快速開發框架，基礎庫，樣式庫，元件化，元件整合
2019-04-15
Android框架元件化
Android 樣式屬性的使用
2021-09-09
Android
Android學習系列(39)--Android主題和樣式之系統篇（上）
2014-05-17
Android
Android學習系列(40)--Android主題和樣式之系統篇（下）
2014-09-29
Android
Android ListView元件樣式
2015-01-13
AndroidView元件
Android外掛式開發（一）
2012-08-30
Android
CSS Cascading Style Sheets 層疊樣式表：CSS瞭解 (一）
2020-10-16
CSS
六年不惑：開發人員的“僵難Style”
2013-03-09
jQuery 基礎樣式篇（2）
2021-09-09
jQuery

Android樣式的開發：Style篇

樣式的定義

主題

寫在最後

相關文章