Android學習筆記：界面設計Material Design的基本使用方法（三）

接上一篇文章，地址：Android學習筆記：界面設計Material Design的基本使用方法（二）

圖片資源地址：稍等

七、充分利用系統狀態欄空間

上一節的水果詳情展示頁，實現了可摺疊標題欄，效果已經很華麗。其實還是有優化空間的。如下圖所示：

系統空間欄的部分是黑色的，與水果的圖片顏色反差很大。在Material Design的設計概念中，背景圖和狀態欄是可以進行融合的，這個融合模式只能在Android 5.0以後的系統展示，對於5.0以前的系統只能按普通模式顯示。

實現背景圖與狀態欄融合需要使用到：android:fitsSystemWindows屬性。

實現過程：

①、標題欄中的背景圖需要設置android:fitsSystemWindows屬性爲true，而且，它的所有父佈局都需要設置這個屬性爲true。

②、定義FruitActivity的主題、設置狀態欄顏色爲透明色。

③、適配Android 5.0以下的系統，修改values/styles.xml文件。

④、配置AndroidManifest.xml文件，讓FruitActivity使用剛剛定義好的主題。

1、修改activity_fruit.xml中的代碼：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout   
	...	
    android:fitsSystemWindows="true" >

    <android.support.design.widget.AppBarLayout
        ...
        android:fitsSystemWindows="true" >

        <android.support.design.widget.CollapsingToolbarLayout
			...
            android:fitsSystemWindows="true" >

            <ImageView
                ...
                android:fitsSystemWindows="true" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    ...

</android.support.design.widget.CoordinatorLayout>

ImageView設置android:fitsSystemWindow="true"後，它的三層嵌套的父佈局CollapsingToolbarLayout、AppBarLayout和CoordinatorLayout也需要設置這屬性爲true。

2、定義FruitActivity的主題、設置狀態欄顏色爲透明色

右擊res目錄→New→Directory，創建values-v21目錄。

右擊values-v21目錄→New→Values resource file，創建styles.xml文件。

修改res/values-v21/styles.xml的代碼如下：

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

    <style name="FruitActivityTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

</resources>

values-v21目錄是Android 5.0以上的系統纔會讀取的。

3、適配Android 5.0以下的系統，修改values/styles.xml文件。

在values-v21/styles.xml目錄中定義的FruitActivity主題，Android 5.0以下的系統無法讀取這個目錄，自然也就無法識別FruitActivityTheme主題。所以還需要對res/values/styles.xml文件進行修改：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="FruitActivityTheme" parent="AppTheme">

    </style>

</resources>

4、配置AndroidManifest.xml文件，讓FruitActivity使用剛剛定義好的主題。

定義完主題後還需要在主配置文件中使用纔可以，修改AndroidManifest.xml的代碼，修改FruitActivity標籤：

<activity android:name=".FruitActivity"
    android:theme="@style/FruitActivityTheme" >
</activity>

運行程序：

根本沒有反應！反覆確認代碼仍然找不到問題，檢查一下模擬器，竟然是API 18，恍然大悟，原來是因爲我使用的模擬器是4.3系統的，小於5.0的系統，無法指定系統狀態欄的顏色，所以背景圖和狀態欄不可能融合。

不用擔心的問題就是前面所講述的代碼不會有問題，因爲他們兼容Android 5.0以下的系統。

更換模擬器。再次運行程序：

八、AutoScrollViewPager

九、TabLayout

十、TextInputLayout

十一、總結

還沒有寫完 正在努力。。。

新版編輯器點保存就直接發佈，無語中。。。

相關文章：

Android學習筆記：界面設計Material Design的基本使用方法（一）

Android學習筆記：界面設計Material Design的基本使用方法（二）

本文總結參考自郭神（郭霖）的《第一行代碼 第2版》