第一行代码——第十二章：最佳的UI体验——Material Design实战

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lhk147852369/article/details/84565984

目录：

12.1 什么是 Material Design

12.2 Toolbar

12.3 滑动菜单

12.3.1 DrawerLayout

12.3.2 NavigationView

12.4 悬浮按钮和可交互提示

12.4.1 FloatingActionButton

12.4.2 SnackBar

12.4.3 CoordinatorLayout

12.5 卡片式布局

12.5.1 CardView

12.5.2 AppBarLayout

12.6 下拉刷新

12.7 可折叠式标题栏

12.7.1 CollapsingToolbarLayout

12.7.2 充分利系统状态栏空间

12.8 小结与点评

---

知识点：

12.1 什么是 Material Design

Material Design是由谷歌的设计工程师基于优秀的设计原则，结合丰富的创意和科学技术所发明的一套全新的界面设计语言，包含了视觉、运动、互动效果等特性。

12.2 Toolbar

虽然对于Toolbar你暂时应该还是比较陌生的，但是对于ActionBar，你就应该有点熟悉了，由于其设计的原因，被限定只能位于活动的顶部，从而不能实现一些 Material Design 的效果，因此官方已不建议使用 ActionBar 了，而推荐使用 Toolbar。

首先修改默认主题，隐藏ActionBar：

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

修改布局文件：

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

接下来修改活动中的代码如下：

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 的实例传入
    }
}

如此即可。

接下来添加一些action按钮，右击 res 目录→New→Directory，创建一个 menu 文件夹。然后右击 menu 文件夹→New→Menu resource file，创建一个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
        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>

在活动页面添加相关操作

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.backup:
                Toast.makeText(this, "Backup", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "Delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show();
                break;
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;
        }

        return true;
    }

12.3 滑动菜单

滑动菜单可以说是Material Design中最常见的效果之一了，虽说这个功能看起来挺复杂的，不过借助谷歌提供的各种工具，我们可以轻松的实现这个炫酷的功能了。

12.3.1 DrawerLayout

借助DrawerLayout实现滑动菜单，首先它是一个布局，在布局中允许放入两个直接子控件，第一个子控件施主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容。

布局代码：

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

接下来在导航栏上添加左侧按钮：

  void initActionBar() {
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.mipmap.menu);
        }
    }

对于侧滑菜单做一些处理：

在按返回键时：

  @Override
    public void onBackPressed() {
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

在按导航键时：

      case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;

12.3.2 NavigationView

使用 NavigationView，在滑动菜单页面定制任意布局

首先，将 Design Support 库以及开源项目 CircleImageView（实现图片圆形化，项目主页地址：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 文件夹下创建一个 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 文件夹下创建一个布局文件 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="[email protected]"
        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); //让导航按钮显示出来
            actionBar.setHomeAsUpIndicator(R.mipmap.menu);//设置导航按钮图标
        }
        navView.setCheckedItem(R.id.nav_call);//设置默认选中项
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                mDrawerLayout.closeDrawers();//关闭抽屉
                ToastUtils.showShort("点击了"+item.getTitle());
                return true;
            }
        });
    }

    . . .
}

12.4 悬浮按钮和可交互提示

立体设计是 Material Design 中一条非常重要的思想，也就是说，按照Material Design的理念，应用程序的界面不仅仅是一个平面，而应该是有立体效果的。

12.4.1 FloatingActionButton

FloatingActionButton 是 Design Support 库中提供的一个控件，可以比较轻松地实现悬浮按钮地效果。它默认使用 colorAccent 作为按钮的颜色。下面来具体实现下。

布局添加如下：

  <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:headerLayout="@layout/nav_header"
        app:itemIconTint="@color/colorAccent"
        app:menu="@menu/nav_menu" />

设置点击事件：

fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
            Toast.makeText(Main4Activity.this, "Data resotred", Toast.LENGTH_SHORT).show();
            }
        });

12.4.2 SnackBar

SnackBar 允许咋提示当中加入一个可交互的按钮，当用户点击按钮的死后可以执行一些额外的逻辑操作。

比如（防止误删）：

 Snackbar.make(view, "Data delete", Snackbar.LENGTH_SHORT)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                Toast.makeText(Main4Activity.this, "Data resotred", Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();

效果如下（提示遮挡了内容，不急，继续往下看）：

12.4.3 CoordinatorLayout

CoordinatorLayout 是 Design Support 库提供的一个加强版的 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>

效果如下：

12.5 卡片式布局

卡片式布局是 Material Design 中提出的一个新概念，它可以让页面中的元素看起来就像在卡片中一样，并且还能拥有圆角和投影。

12.5.1 CardView

是 appcompat-v7 库提供的用于实现卡片式布局效果的重要控件，它也是一个 FrameLayout，只是额外提供了圆角和阴影等效果，有立体感。

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

12.5.2 AppBarLayout

Design Support 库提供的一个垂直方向的 LinearLayout，它在内部做了很多滚动事件的封装，并应用了一些 Meterial Design 的设计理念。

一会 会解决下面 列表遮挡问题，主要是

app:layout_behavior="@string/appbar_scrolling_view_behavior"

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

12.6 下拉刷新

在 Meterial Design 中，SwipeRefreshLayout 是用于实现下拉刷新的核心类，它由 support-v4 库提供，把要实现下拉刷新功能的控件放置到 SwipeRefreshLayout 中，就能让这个控件支持下拉刷新。

在内容外嵌套：

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

            <!--appbar_scrolling_view_behavior 唯一的作用是把自己（使用者）放到AppBarLayout的下面-->
            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

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

上述代码值得注意的是，由于 RecyclerView 变成了 SwipeRefreshLayout 的子控件，因此之前用 app:layout_behavior 声明布局行为要移到 SwipeRefreshLayout 中才行。

修改活动：

// 下拉刷新
        swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
        swipeRefresh.setColorSchemeResources(R.color.colorPrimary);//设置刷新进度条颜色
        swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                // 处理刷新逻辑
                refreshPartner();
            }
        });

 处理刷新逻辑（模拟）

/**
     * 下拉刷新数据（为简单起见没和网络交互）
     */
    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();//重新生成数据
                        adapter.notifyDataSetChanged();//通知数据变化
                        swipeRefresh.setRefreshing(false);//隐藏刷新进度条
                    }
                });
            }
        }).start();
    }

12.7 可折叠式标题栏

12.7.1 CollapsingToolbarLayout

CollapsingToolbarLayout 是 Design Support 库提供的一个作用于 Toolbar 基础之上的布局，它可让 Toolbar 的效果变得更加丰富。

不过，CollapsingToolbarLayout 是不能独立存在的，只能作为 AppBarLayout 的直接子布局来使用。而 AppBarLayout 又必须是 CoordinatorLayout 的子布局。

新建活动 修改布局页面：

<?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:orientation="vertical"
    >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:id="@+id/appBar"
        >
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/coolapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <!--app:layout_collapseMode="parallax"  折叠模式 pin始终不变 parallax 错位偏移   -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:id="@+id/fruit_image_view"
                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.v7.widget.Toolbar>


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


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

    <!--增加了 嵌套相应滚动事件-->
    <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_marginTop="35dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="15dp"
                app:cardCornerRadius="4dp"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/fruit_content_text"
                    android:layout_margin="10dp"
                    />


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

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

    <!--layout_anchor 指定锚点  gravity 右下角-->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:src="@mipmap/tele"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end"
        />

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

12.7.2 充分利系统状态栏空间

让背景图和状态栏融合到一起

借助 android:fitsSystemWindows 这个属性实现。将 ImageView 布局结构中的所有父控件都设置上这个属性并且指定为 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>

然后还要在程序的主题中将状态栏颜色指定为透明色才行，即在主题中将属性 **android:statusBarColor **的值指定为 @android:color/transparent 就可以了，但问题是这个属性在 Android 5.0 系统开始才有的，因此需要准备两个同名不同内容的主题来实现。

针对5.0及以上的系统，在 res 目录下创建一个 values-v21 目录，然后在此目录创建一个 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以下的系统，还需要在 value/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>
     <!-- 5.0以下使用主题 -->
    <style name="PartnerActivityTheme" parent="AppTheme">
    </style>
</resources>

最后修改 AndroidManifest.xml 中的代码，让 PartnerActivity 使用这个主题，如下：

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

12.8 小结与点评

郭霖总结：

学完了本章的所有知识，你有没有觉得无比兴奋呢?反正我是这么觉得的。本章我们的收获实在是太多了，从一个什么都没有的空项目，经过一章的学习，最后实现了一个功能如此丰富、界面如此华丽的应用，还有什么事情比这个更让我们有成就感吗?

本章中我们充分利用了Design Spport库. spport-v4库、appcompat-v7库，以及一些开源项目来实现一个了高度Material化的应用程序，能将这些库中的相关控件熟练掌握，你的Material Design技术就算是合格了。

不过说到底。我们仍然还是在以个开发者的思维给你讲解 Material Desing侧重于如何去实现这些效果。而实际上，Materila Design 的设计思维和设计理念才是更加重要的东西，当然这部分内容应该是Ui设计人员去学习的，如果你也感兴趣的话，可以参考一下Material Design的官方文章：https://material.google.com/

现在你已经足足学习了12章的内容，对Android 应用程序开发的理解应该比较深刻了。目前系统性的知识几乎都已经讲完了，但是还有一些零散的高级技巧在等待着你，那么就让我们赶快进入到下一张的学习当中吧。

我的总结：

在我看完这12章的时候确实是比较累的， 后来也是有些偷懒了，没有去敲代码，这样的学习效率是不高的，在我写这篇文章时，对于之前学的很多东西，脑子里都记不起来，或许是年级的问题，也或许是我学习方式不对，下不为例。