第一行代碼讀書筆記 12 -- Material Design 實戰(zhàn)

本篇文章主要介紹以下幾個知識點：

Toolbar

滑動菜單

懸浮按鈕

卡片式布局

下拉刷新

可折疊式標題欄

蒙奇·D·路飛

Material Design 是由谷歌的設(shè)計工程師基于優(yōu)秀的設(shè)計原則，結(jié)合豐富的創(chuàng)意和科學(xué)技術(shù)所發(fā)明的一套全新的界面設(shè)計語言巧婶，包含了視覺、運動、互動效果等特性炎滞。

在2015年的 Google I/O 大會上推出了一個 Design Support 庫，這個庫將 Material Design 中最具代表性的一些控件和效果進行了封裝诬乞，使開發(fā)者能輕松地將自己的應(yīng)用 Material 化册赛。本篇文章就來學(xué)習下 Design Support 這個庫，實現(xiàn)以下效果：

Material Design

12.1 Toolbar

相信大家熟悉控件 ActionBar震嫉，由于其設(shè)計的原因森瘪，被限定只能位于活動的頂部，從而不能實現(xiàn)一些 Material Design 的效果票堵，因此官方已不建議使用 ActionBar 了扼睬，而推薦使用 Toolbar。

Toolbar 不僅繼承了 ActionBar 的所有功能换衬，而且靈活性很高痰驱。下面來具體學(xué)習下证芭。

首先瞳浦，修改一下項目的默認主題质蕉，指定為不帶 ActionBar 的主題橱野，打開 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>

</resources>

觀察下 AppTheme 中的屬性重寫爸邢，3個屬性代表的顏色位置如下：

各屬性指定顏色的位置

把 ActionBar 隱藏起來后官硝，用 ToolBar 來替代 ActionBar矗蕊，修改布局中的代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

</FrameLayout>

上述代碼指定一個 xmlns:app 的命名空間是由于很多 Meterial 屬性在5.0之前的系統(tǒng)中并不存在，為了能夠兼容之前的老系統(tǒng)氢架，應(yīng)該使用 app:attribute 這樣的寫法傻咖，從而就可以兼容 Android 5.0 以下的系統(tǒng)了。

接下來修改活動中的代碼如下：

public class MaterialDesignActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material_design);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);// 將 Toolbar 的實例傳入
    }
}

運行效果如下：

Toolbar 的標準界面

上面效果和之前的標題欄差不多岖研，接下來學(xué)習一下 Toolbar 常用的功能卿操，比如修改標題欄上顯示的文字內(nèi)容。這文字內(nèi)容是在 AndroidManifest.xml 中指定的孙援，如下：

<activity 
    android:name=".chapter12.MaterialDesignActivity"
    android:label="Fruits"/>

上面給 activity 增加了一個 android:label 屬性害淤，指定在 Toolbar 中顯示的文字內(nèi)容，若沒指定的話拓售，默認使用 application 中指定的 label 內(nèi)容窥摄，即應(yīng)用名稱。

接下來再添加一些 action 按鈕使 Toolbar 更加豐富一些础淤。右擊 res 目錄→New→Directory崭放，創(chuàng)建一個 menu 文件夾哨苛。然后右擊 menu 文件夾→New→Menu resource file，創(chuàng)建一個toolbar.xml 文件币砂，編寫代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    
    <!-- 通過<item>標簽定義 action 按鈕
         android:id 按鈕id移国；android:icon 按鈕圖標；android:title 按鈕文字
         app:showAsAction 按鈕的顯示位置：
             always 永遠顯示在Toolbar中道伟，若屏幕不夠則不顯示
             ifRoom 屏幕空間足夠時顯示在Toolbar中迹缀，不夠時顯示在菜單中
             never 永遠顯示在菜單中
        （Toolbar中的action只顯示圖標，菜單中的action只顯示文字）-->
    <item
        android:id="@+id/backup"
        android:icon="@mipmap/backup"
        android:title="Backup"
        app:showAsAction="always"/>

    <item
        android:id="@+id/delete"
        android:icon="@mipmap/delete"
        android:title="Delete"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/settings"
        android:icon="@mipmap/settings"
        android:title="Settings"
        app:showAsAction="never"/>
</menu>

然后修改活動中的代碼如下：

public class MaterialDesignActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material_design);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);// 將 Toolbar 的實例傳入
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 加載菜單
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // 設(shè)置點擊事件
        switch (item.getItemId()){
            case R.id.backup:
                ToastUtils.showShort("點擊了備份");
                break;
            case R.id.delete:
                ToastUtils.showShort("點擊了刪除");
                break;
            case R.id.settings:
                ToastUtils.showShort("點擊了設(shè)置");
                break;
        }
        return true;
    }
}

運行效果如下：

帶有 action 按鈕的 Toolbar

好了蜜徽，關(guān)于 Toolbar 的內(nèi)容就先講到這祝懂。當然 Toolbar 的功能遠遠不只這些，更多功能以后再挖掘拘鞋。

12.2 滑動菜單

滑動菜單可以說是 Meterial Design 中最常見的效果之一砚蓬，將一些菜單項隱藏起來，而不是放置在主屏幕上盆色，通過滑動的方式將菜單顯示出來灰蛙。

12.2.1 DrawerLayout

谷歌提供了一個 DrawerLayout 控件，借助這個控件隔躲，實現(xiàn)滑動菜單簡單又方便摩梧。下面介紹下它的用法。

首先它是一個布局宣旱，在布局中允許放入兩個直接子控件仅父，第一個子控件是主屏幕中顯示的內(nèi)容，第二個子控件是滑動菜單顯示的內(nèi)容浑吟。因此笙纤，可以修改布局代碼如下所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--********** 第一個子控件 主屏幕顯示 ***********-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </FrameLayout>

    <!--********** 第二個子控件 滑動菜單顯示 **********-->
    <!-- 注意：屬性 android:layout_gravity 是必須指定的 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="這是滑動菜單" 
        android:background="#fff"/>
    
</android.support.v4.widget.DrawerLayout>

接下來在 Toolbar 的最左邊加入一個導(dǎo)航按鈕，提示用戶屏幕左側(cè)邊緣是可以拖動的组力，點擊按鈕將滑動菜單的內(nèi)容展示出來省容。修改活動中的代碼如下：

public class MaterialDesignActivity extends AppCompatActivity {
    
    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material_design);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);// 將 Toolbar 的實例傳入
        
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true); //讓導(dǎo)航按鈕顯示出來
            actionBar.setHomeAsUpIndicator(R.mipmap.menu);//設(shè)置導(dǎo)航按鈕圖標
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 加載菜單
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // 設(shè)置點擊事件
        switch (item.getItemId()){
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);//打開抽屜
                break;
            
            . . .
        }
        return true;
    }
}

上述代碼值得注意的是在 onOptionItemSelected() 方法中對 HomeAsUp 按鈕的點擊事件進行處理，HomeAsUp 按鈕的 id永遠是 android.R.id.home×亲郑現(xiàn)在重新運行程序腥椒，效果如下：

顯示滑動菜單界面

12.2.2 NavigationView

上面已經(jīng)成功實現(xiàn)了滑動菜單功能，但界面不美觀轩触，谷歌給我們提供了一種更好的方法——使用 NavigationView寞酿，在滑動菜單頁面定制任意布局。

NavigationView 是 Design Support 庫中提供的一個控件脱柱，嚴格按照 Material Design 的要求來設(shè)計的伐弹，并且將滑動菜單頁面的實現(xiàn)變得非常簡單。下面一起來學(xué)習下榨为。

首先惨好，將 Design Support 庫以及開源項目 CircleImageView（實現(xiàn)圖片圓形化煌茴，項目主頁地址：https://github.com/hdodenhof/CircleImageView ）引入到項目中：

compile 'com.android.support:design:24.2.1'
compile 'de.hdodenhof:circleimageview:2.1.0'

在使用 NavigationView 之前，還需要準備兩個東西：在 NavigationView 中用來顯示具體菜單項的 menu 和顯示頭部布局的 headerLayout日川。

（1）準備 menu蔓腐。在 menu 文件夾下創(chuàng)建一個 nav_menu.xml 文件，編寫代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <!--checkableBehavior指定為single表示組中的所有菜單項只能單選 -->
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@mipmap/call"
            android:title="Call"/>
        <item
            android:id="@+id/nav_friends"
            android:icon="@mipmap/friends"
            android:title="Friends"/>
        <item
            android:id="@+id/nav_location"
            android:icon="@mipmap/location"
            android:title="Location"/>
        <item
            android:id="@+id/nav_mail"
            android:icon="@mipmap/mail"
            android:title="Mail"/>
        <item
            android:id="@+id/nav_task"
            android:icon="@mipmap/task"
            android:title="Task"/>
    </group>
</menu>

（2）準備 headerLayout龄句。在 layout 文件夾下創(chuàng)建一個布局文件 nav_header.xml回论，編寫代碼如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

    <!--*************** 頭像 ****************-->
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@mipmap/nav_icon"
        android:layout_centerInParent="true"/>
    
    <!--*************** 郵箱 ****************-->
    <TextView
        android:id="@+id/mail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:text="KXwonderful@gmail.com"
        android:textColor="@color/white"
        android:textSize="14sp"/>

    <!--*************** 用戶名 ****************-->
    <TextView
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/mail"
        android:gravity="center"
        android:text="開心wonderful"
        android:textColor="@color/white"
        android:textSize="14sp"/>

</RelativeLayout>

準備好 menu 和 headerLayout 后，可以使用 NavigationView 了分歇，修改布局代碼傀蓉，將之前的 TextView 替換成 NavigationView，如下：

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--******** 第一個子控件 主屏幕顯示 ********-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </FrameLayout>

    <!--******** 第二個子控件 滑動菜單顯示 ********-->
    <!-- 注意：屬性 android:layout_gravity 是必須指定的 -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>

</android.support.v4.widget.DrawerLayout>

最后职抡，修改活動中的代碼葬燎，添加處理菜單項的點擊事件，如下：

public class MaterialDesignActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material_design);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);// 將 Toolbar 的實例傳入

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true); //讓導(dǎo)航按鈕顯示出來
            actionBar.setHomeAsUpIndicator(R.mipmap.menu);//設(shè)置導(dǎo)航按鈕圖標
        }
        navView.setCheckedItem(R.id.nav_call);//設(shè)置默認選中項
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                mDrawerLayout.closeDrawers();//關(guān)閉抽屜
                ToastUtils.showShort("點擊了"+item.getTitle());
                return true;
            }
        });
    }

    . . .
}

現(xiàn)在重新運行下程序缚甩，效果如下：

NavigationView 界面

上面效果相對之前的美觀了許多谱净，但不要滿足現(xiàn)狀，跟緊腳步擅威，繼續(xù)學(xué)習壕探。

12.3 懸浮按鈕和可交互提示

立體設(shè)計是 Material Design 中一條非常重要的思想，即應(yīng)用程序的界面不僅僅是一個平面裕寨，而應(yīng)該是有立體效果的浩蓉。

12.3.1 FloatingActionButton

FloatingActionButton 是 Design Support 庫中提供的一個控件派继，可以比較輕松地實現(xiàn)懸浮按鈕地效果宾袜。它默認使用 colorAccent 作為按鈕的顏色。下面來具體實現(xiàn)下驾窟。

首先庆猫，在主屏幕布局加入一個 FloatingActionButton，修改布局代碼如下：

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--******** 第一個子控件 主屏幕顯示 ********-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <!-- app:elevation屬性是給FloatingActionButton指定高度绅络，
            值越大月培，投影范圍越大，效果越淡恩急，反之 -->
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@mipmap/done"
            app:elevation="8dp"/>
    </FrameLayout>

    . . .

</android.support.v4.widget.DrawerLayout>

接著杉畜，設(shè)置 FloatingActionButton 的點擊事件，在活動中添加代碼如下：

public class MaterialDesignActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material_design);
        . . .
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ToastUtils.showShort("點擊了懸浮按鈕");
            }
        });
    }
    . . .
}

現(xiàn)在重新運行下程序衷恭，效果如下：

FloatingActionButton 的效果

12.3.2 Snackbar

接下來學(xué)習下 Design Support 庫提供的比 Toast 更加先進的提示工具——Snackbar此叠。

當然，Snackbar 并不是 Toast 的替代品随珠，它們兩者之間有著不同的應(yīng)用場景灭袁。Snackbar 在提示當中加入了一個可交互按鈕猬错，點擊時可以執(zhí)行一些額外的操作。

Snackbar 的用法非常簡單茸歧，修改活動中的代碼如下：

public class MaterialDesignActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material_design);
        . . .
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //ToastUtils.showShort("點擊了懸浮按鈕");
                Snackbar.make(v,"刪除數(shù)據(jù)",Snackbar.LENGTH_SHORT)
                        .setAction("取消", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                ToastUtils.showShort("數(shù)據(jù)恢復(fù)");
                            }
                        }).show();
            }
        });
    }
    . . .
}

現(xiàn)在重新運行下程序倦炒，效果如下：

Snackbar 的效果

可以看到，Snackbar 從屏幕底部出現(xiàn)软瞎，上面有設(shè)置的提示文字和設(shè)置的取消按鈕逢唤。但存在個 bug，這個 Snackbar 把懸浮按鈕給遮擋住了涤浇，解決這個 bug 就要借助 CoordinatorLayout 了智玻。

12.3.3 CoordinatorLayout

CoordinatorLayout 是 Design Support 庫提供的一個加強版的 FrameLayout 布局，它可以監(jiān)聽其所有子控件的各種事件芙代，然后自動幫我們做出最為合理的響應(yīng)吊奢。

CoordinatorLayout 的使用也非常簡單，只需將原來的 FrameLayout 替換一下就可以了纹烹。修改布局代碼如下：

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--******** 第一個子控件 主屏幕顯示 ********-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@mipmap/done"
            app:elevation="8dp"/>
    </android.support.design.widget.CoordinatorLayout>

    . . .

</android.support.v4.widget.DrawerLayout>

現(xiàn)在重新運行下程序页滚，效果如下：

CoordinatorLayout 自動將懸浮按鈕上移

可以看到懸浮按鈕自動向上移，從而不會被遮住铺呵。

上面 Snackbar 好像并不是 CoordinatorLayout 的子控件裹驰，卻也能被監(jiān)聽到，是因為在 Snackbar 中傳入的第一個參數(shù)是用來指定 Snackbar 是基于哪個 View 來觸發(fā)的片挂，上面?zhèn)魅氲氖?FloatingActionButton 本身幻林，而 FloatingActionButton 是 CoordinatorLayout 的子控件。

12.4 卡片式布局

卡片式布局是 Material Design 中提出的一個新概念音念，它可以讓頁面中的元素看起來就像在卡片中一樣沪饺，并且還能擁有圓角和投影。

12.4.1 CardView

CardView 是 appcompat-v7 庫提供的用于實現(xiàn)卡片式布局效果的重要控件闷愤，它也是一個 FrameLayout整葡，只是額外提供了圓角和陰影等效果，有立體感讥脐。

CardView 的基本用法非常簡單遭居，如下：

<!-- app:cardCornerRadius 指定卡片圓角的弧度，值越大弧度越大
     app:elevation 指定卡片的高度旬渠，值越大投影范圍越大俱萍，效果越淡-->
<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardCornerRadius="4dp"
    app:elevation="5dp">
    <TextView
        android:id="@+id/info_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</android.support.v7.widget.CardView>

上面代碼在 CardView 中放了一個 TextView，這個 TextView 就會顯示在一張卡片上告丢。

接下來枪蘑，綜合運用第3章的知識，用RecyclerView 來填充項目的主界面部分，實現(xiàn) OnePiece（海賊王）列表腥寇。

首先成翩，添加如下要用到的依賴庫：

compile 'com.android.support:recyclerview-v7:24.2.1'
compile 'com.android.support:cardview-v7:24.2.1'
compile 'com.github.bumptech.glide:glide:3.7.0'

上面的 Glide 庫是一個圖片加載庫，其項目主頁地址是：https://github.com/bumptech/glide 赦役。

接著麻敌，在布局文件中添加 RecyclerView，如下：

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--******** 第一個子控件 主屏幕顯示 ********-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            . . . />
        
        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_one_piece"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            . . . />
    </android.support.design.widget.CoordinatorLayout>

    . . .

</android.support.v4.widget.DrawerLayout>

接著掂摔，定義一個實體類 Partner术羔，如下：

public class Partner {

    private String name;  // 伙伴名稱

    private int imageId; // 伙伴對應(yīng)頭像的資源id

    private int profileId; // 人物簡介的資源id

    public Partner(String name, int imageId, int profileId) {
        this.name = name;
        this.imageId = imageId;
        this.profileId = profileId;
    }

    public String getName(){
        return name;
    }

    public int getImageId(){
        return imageId;
    }

    public int getProfileId() {
        return profileId;
    }
}

然后為 RecyclerView 的子項指定一個自定義布局，新建 partner_item.xml乙漓，使用 CardView 作為最外層布局级历，如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        
        <!--******** 顯示頭像********-->
        <ImageView
            android:id="@+id/partner_image"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop"/>
        
        <!--******** 顯示名稱********-->
        <TextView
            android:id="@+id/partner_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp"/>

    </LinearLayout>

</android.support.v7.widget.CardView>

接下來為 RecyclerView 準備一個適配器，新建 PartnerAdapter 類如下：

public class PartnerAdapter extends RecyclerView.Adapter<PartnerAdapter.ViewHolder>{
    
    private Context mContext;
    
    private List<Partner> mPartnerList;
    
    static class ViewHolder extends RecyclerView.ViewHolder{
        CardView cardView;
        ImageView partnerImage;
        TextView partnerName;

        public ViewHolder(View itemView) {
            super(itemView);
            cardView = (CardView) itemView;
            partnerImage = (ImageView) itemView.findViewById(R.id.partner_image);
            partnerName = (TextView) itemView.findViewById(R.id.partner_name);
        }
    }
    
    public PartnerAdapter(List<Partner> partnerList){
        mPartnerList = partnerList;
    }
    
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (mContext == null){
            mContext = parent.getContext();
        }
        View view = LayoutInflater.from(mContext).inflate(R.layout.partner_item,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Partner partner = mPartnerList.get(position);
        holder.partnerName.setText(partner.getName());
        Glide.with(mContext).load(partner.getImageId()).into(holder.partnerImage);
    }
    
    @Override
    public int getItemCount() {
        return mPartnerList.size();
    }
}

上述代碼中用到 Glide 加載本地圖片叭披，它會幫我們把圖片壓縮寥殖，因此不用擔心內(nèi)存溢出。

適配器準備好了涩蜘，最后修改活動中的代碼如下：

public class MaterialDesignActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    private Partner[] partners = {
            new Partner("路飛",R.mipmap.partner_luffy,R.string.partner_luffy),
            new Partner("索隆",R.mipmap.partner_zoro,R.string.partner_zoro),
            new Partner("山治",R.mipmap.partner_sanji,R.string.partner_sanji),
            new Partner("艾斯",R.mipmap.partner_ace,R.string.partner_ace),
            new Partner("羅",R.mipmap.partner_law,R.string.partner_law),
            new Partner("娜美",R.mipmap.partner_nami,R.string.partner_nami),
            new Partner("羅賓",R.mipmap.partner_robin,R.string.partner_robin),
            new Partner("薇薇",R.mipmap.partner_vivi,R.string.partner_vivi),
            new Partner("蕾貝卡",R.mipmap.partner_rebecca,R.string.partner_rebecca),
            new Partner("漢庫克",R.mipmap.partner_hancock,R.string.partner_hancock)};
    
    private List<Partner> partnerList = new ArrayList<>();
    
    private PartnerAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material_design);

        . . .

        initPartner();
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rv_one_piece);
        GridLayoutManager layoutManager = new GridLayoutManager(this,2);
        recyclerView.setLayoutManager(layoutManager);
        adapter = new PartnerAdapter(partnerList);
        recyclerView.setAdapter(adapter);
    }

    /**
     * 初始化數(shù)據(jù)嚼贡，隨機挑選50條數(shù)據(jù)
     */
    private void initPartner() {
        partnerList.clear();
        for (int i = 0;i < 50 ;i++){
            Random random = new Random();
            int index = random.nextInt(partners.length);
            partnerList.add(partners[index]);
        }
    }
    . . .
}

現(xiàn)在重新運行下程序，效果如下：

卡片式布局效果

可以看到同诫，精美的圖片成功展示出來了粤策，但 Toolbar 卻被擋住了，這是由于 RecyclerView 和 Toolbar 都是放置在 CoordinatorLayout 中误窖，而 CoordinatorLayout 是一個增強版的 FrameLayout叮盘，其控件在不進行明確定位時默認放在布局的左上角，從而產(chǎn)生了遮擋的現(xiàn)象霹俺。解決這個 bug 就要借助到另外一個工具了——AppBarLayout柔吼。

12.4.2 AppBarLayout

AppBarLayout 是 Design Support 庫提供的一個垂直方向的 LinearLayout，它在內(nèi)部做了很多滾動事件的封裝吭服，并應(yīng)用了一些 Meterial Design 的設(shè)計理念嚷堡。

只需兩步就可以解決前面的遮擋問題，第一步是將 Toolbar 嵌套到 AppBarLayout 中艇棕，第二步給 RecyclerView 指定一個布局行為。修改布局代碼如下：

<android.support.v4.widget.DrawerLayout
    . . .>

    <!--******** 第一個子控件 主屏幕顯示 ********-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
            
        </android.support.design.widget.AppBarLayout>
        
        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_one_piece"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

    . . .

</android.support.v4.widget.DrawerLayout>

現(xiàn)在重新運行下程序串塑，效果如下:

解決遮擋問題

當 AppBarLayout 接收到滾動事件時沼琉，它內(nèi)部的子控件其實是可以指定如何取影響這些事件的，下面就來進一步優(yōu)化桩匪，使當 RecyclerView 向上滾動時打瘪，Toolbar 隱藏，向下滾動時顯示。修改布局代碼如下所示：

<android.support.v4.widget.DrawerLayout
    . . .>

    <!--******** 第一個子控件 主屏幕顯示 ********-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways|snap"/>
            
        </android.support.design.widget.AppBarLayout>
        
        <android.support.v7.widget.RecyclerView
            . . ./>

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

    . . .

</android.support.v4.widget.DrawerLayout>

在 Toolbar 中添加了一個 **app:layout_scrollFlags **屬性闺骚，并指定成 scroll|enterAlways|snap彩扔。其中 scroll 指當 RecyclerView 向上滾動時，Toolbar 會跟著一起向上滾動并隱藏僻爽；enterAlways 指向下滾動時一起向下滾動并顯示虫碉；snap 指當 Toolbar 還沒有完全隱藏或顯示時，會根據(jù)當前滾動的距離自動選擇隱藏還是顯示胸梆。

現(xiàn)在重新運行下程序敦捧，效果如下:

自動顯示或隱藏 Toolbar

12.5 下拉刷新

在 Meterial Design 中，SwipeRefreshLayout 是用于實現(xiàn)下拉刷新的核心類碰镜，它由 support-v4 庫提供兢卵，把要實現(xiàn)下拉刷新功能的控件放置到 SwipeRefreshLayout 中，就能讓這個控件支持下拉刷新绪颖。

SwipeRefreshLayout 用法比較簡單秽荤，修改布局，在 RecyclerView 的外面嵌套一層 SwipeRefreshLayout柠横，如下：

<android.support.v4.widget.DrawerLayout
    . . .>

    <!--******** 第一個子控件 主屏幕顯示 ********-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                . . ./>

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

        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipe_refresh"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/rv_one_piece"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
            
        </android.support.v4.widget.SwipeRefreshLayout>
        
        . . .
    </android.support.design.widget.CoordinatorLayout>

    . . .

</android.support.v4.widget.DrawerLayout>

上述代碼值得注意的是王滤，由于 RecyclerView 變成了 SwipeRefreshLayout 的子控件，因此之前用 app:layout_behavior 聲明布局行為要移到 SwipeRefreshLayout 中才行滓鸠。

接著還要在代碼中處理具體的刷新邏輯雁乡，在活動中添加如下代碼：

public class MaterialDesignActivity extends AppCompatActivity {

    . . .
    private SwipeRefreshLayout swipeRefresh;// 刷新

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material_design);

        . . .
   
        // 下拉刷新
        swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
        swipeRefresh.setColorSchemeResources(R.color.colorPrimary);//設(shè)置刷新進度條顏色
        swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                // 處理刷新邏輯
                refreshPartner();
            }
        });
    }

    /**
     * 下拉刷新數(shù)據(jù)（為簡單起見沒和網(wǎng)絡(luò)交互）
     */
    private void refreshPartner() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(2000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        initPartner();//重新生成數(shù)據(jù)
                        adapter.notifyDataSetChanged();//通知數(shù)據(jù)變化
                        swipeRefresh.setRefreshing(false);//隱藏刷新進度條
                    }
                });
            }
        }).start();
    }

    . . .
}

現(xiàn)在重新運行下程序，效果如下:

實現(xiàn)下拉刷新效果

12.6 可折疊式標題欄

作為本章的尾聲糜俗，最后來實現(xiàn)一個震撼的 Material Design 效果——可折疊式標題欄踱稍。

12.6.1 CollapsingToolbarLayout

CollapsingToolbarLayout 是 Design Support 庫提供的一個作用于 Toolbar 基礎(chǔ)之上的布局，它可讓 Toolbar 的效果變得更加豐富悠抹。

不過珠月，CollapsingToolbarLayout 是不能獨立存在的，只能作為 AppBarLayout 的直接子布局來使用楔敌。而 AppBarLayout 又必須是 CoordinatorLayout 的子布局啤挎。話不多說，開始吧卵凑。

首先創(chuàng)建一個額外的活動 PartnerActivity 來作為海賊的簡介界面庆聘，編寫其對應(yīng)的布局文件 activity_partner.xml 如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--******************* 標題欄的界面 ****************-->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <!-- android:theme 指定主題
        app:contentScrim 指定CollapsingToolbarLayout在趨于折疊以及折疊之后的背景色
        exitUntilCollapsed 指CollapsingToolbarLayout隨著滾動完成折疊后就保留在界面上，不再移出界面-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- app:layout_collapseMode 指定當前控件在在CollapsingToolbarLayout折疊過程中的折疊模式
             parallax 指折疊過程中會產(chǎn)生一定的錯位偏移
             pin 指在折疊過程中位置始終保持不變-->
            <ImageView
                android:id="@+id/partner_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>

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

    <!--******************* 伙伴的簡介內(nèi)容 ****************-->
    <!--NestedScrollView 在 ScrollView 基礎(chǔ)上增加了嵌套響應(yīng)滾動事件的功能勺卢，內(nèi)部只能放一個直接子布局 -->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="15dp"
                android:layout_marginStart="15dp"
                android:layout_marginEnd="15dp"
                android:layout_marginTop="35dp"
                app:cardCornerRadius="4dp">

                <TextView
                    android:id="@+id/partner_profile"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:lineSpacingMultiplier="2"/>

            </android.support.v7.widget.CardView>

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <!--******************* 懸浮按鈕 ****************-->
    <!-- app:layout_anchor 指定一個瞄點-->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@mipmap/comment"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end"/>

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

編寫完布局 activity_partner.xml 后伙判，開始編寫功能邏輯，修改活動 PartnerActivity 的代碼如下：

public class PartnerActivity extends AppCompatActivity {

    public static final String PARTNER_NAME = "partner_name";  

    public static final String PARTNER_IMAGE_ID = "partner_image_id";
    
    public static final String PARTNER_PROFILE_ID = "partner_profile_id";
    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_partner);

        Intent intent = getIntent();
        String partnerName = intent.getStringExtra(PARTNER_NAME); //海賊名稱
        int partnerImageId = intent.getIntExtra(PARTNER_IMAGE_ID,R.mipmap.partner_luffy);//海賊圖片id
        int partnerProfileId = intent.getIntExtra(PARTNER_PROFILE_ID,R.string.partner_luffy);//海賊資料id

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        ImageView partnerImageView = (ImageView) findViewById(R.id.partner_image_view);
        TextView partnerProfile = (TextView) findViewById(R.id.partner_profile);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
        collapsingToolbar.setTitle(partnerName); //設(shè)置標題
        Glide.with(this).load(partnerImageId).into(partnerImageView);//設(shè)置圖片
        partnerProfile.setText(getString(partnerProfileId));//設(shè)置內(nèi)容
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                // 返回上一個活動
                finish();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

最后黑忱，為實現(xiàn)點擊 RecyclerView 跳轉(zhuǎn)到海賊詳情界面宴抚，還需修改適配器 PartnerAdapter 的代碼勒魔，添加點擊事件如下：

public class PartnerAdapter extends RecyclerView.Adapter<PartnerAdapter.ViewHolder>{

    . . .

    @Override
    public ViewHolder onCreateViewHolder(final ViewGroup parent, int viewType) {
        if (mContext == null){
            mContext = parent.getContext();
        }
        View view = LayoutInflater.from(mContext).inflate(R.layout.partner_item,parent,false);

        final ViewHolder holder = new ViewHolder(view);
        holder.cardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Partner partner = mPartnerList.get(position);
                Intent intent = new Intent(mContext,PartnerActivity.class);
                intent.putExtra(PartnerActivity.PARTNER_NAME,partner.getName());
                intent.putExtra(PartnerActivity.PARTNER_IMAGE_ID,partner.getImageId());
                intent.putExtra(PartnerActivity.PARTNER_PROFILE_ID,partner.getProfileId());
                mContext.startActivity(intent);
            }
        });
        return holder;
    }

    . . .
}

好了，現(xiàn)在重新運行下程序菇曲，效果如下:

海賊詳情展示效果

上面展示的界面雖說已經(jīng)很華麗了冠绢，但海賊背景圖片和系統(tǒng)的狀態(tài)欄總感覺有些不搭。下面就進一步提升一下常潮。

12.6.2 充分利用系統(tǒng)狀態(tài)欄控件

為改善上面的不搭弟胀，接下來將海賊王背景圖和狀態(tài)欄融合到一起。這邊提供兩個方法：

方案 1

借助 android:fitsSystemWindows 這個屬性實現(xiàn)蕊玷。將 ImageView 布局結(jié)構(gòu)中的所有父控件都設(shè)置上這個屬性并且指定為 True邮利，修改 activity_partner.xml 如下：

<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:id="@+id/partner_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:fitsSystemWindows="true"/>

            . . .

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

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

然后還要在程序的主題中將狀態(tài)欄顏色指定為透明色才行，即在主題中將屬性 **android:statusBarColor **的值指定為 @android:color/transparent 就可以了垃帅，但問題是這個屬性在 Android 5.0 系統(tǒng)開始才有的延届，因此需要準備兩個同名不同內(nèi)容的主題來實現(xiàn)。

針對5.0及以上的系統(tǒng)贸诚，在 res 目錄下創(chuàng)建一個 values-v21 目錄方庭，然后在此目錄創(chuàng)建一個 styles.xml 文件如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="PartnerActivityTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

針對5.0以下的系統(tǒng)，還需要在 value/styles.xml 文件定義一個同名主題酱固，但內(nèi)容為空械念，如下：

<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>
     <!-- 5.0以下使用主題 -->
    <style name="PartnerActivityTheme" parent="AppTheme">
    </style>
</resources>

最后修改 AndroidManifest.xml 中的代碼，讓 PartnerActivity 使用這個主題运悲，如下：

<activity 
    android:name=".chapter12.PartnerActivity"
    android:theme="@style/PartnerActivityTheme">
</activity>

這樣就大功告成了龄减，只要在 5.0 及以上系統(tǒng)運行程序，效果如下：

背景圖和狀態(tài)欄融合的效果

方案 2

方案1雖然實現(xiàn)了融合效果班眯，但在低于5.0的系統(tǒng)上還是不搭殴穴，方案2就來稍微改善一下壳鹤。

方案2也要在 values-v21 目錄下的 styles.xml 中新建一個主題 AppTheme.NoActionBar，如下：

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

在 value/styles.xml 中也新建一個主題 AppTheme.NoActionBar刃滓，如下：

<style name="AppTheme.NoActionBar" >
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

接下來修改 AndroidManifest.xml 中的代碼人柿，讓 PartnerActivity 使用這個主題何乎，如下：

 <activity
     android:name=".chapter12.PartnerActivity"
     android:theme="@style/AppTheme.NoActionBar">
 </activity>

最后在 PartnerActivity 中添加如下代碼：

public class PartnerActivity extends AppCompatActivity {
    . . .
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_partner);

        translucentStatusBar();
        . . .
    }

    /**
     * 狀態(tài)欄著色
     */
    private void translucentStatusBar() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0及以上
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4到5.0
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }
    }

   . . .
}

現(xiàn)在只要在 4.4 及以上系統(tǒng)運行程序就能有如下效果了：