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版》