Android学习笔记：界面设计Material Design的基本使用方法（一）

话不多说直接进入正题。

本文所有使用到的图标资源下载地址：https://pan.baidu.com/s/1kWhs8mF

使用到的图标、图片都在里面，按照文件夹名即可快速找到需要的资源。

新建项目MaterialDesignTest，一切默认。

一、标题栏Toolbar

要想使用Toolbar，就必须替换掉默认的ActionBar。替换步骤分两步：

1、隐藏ActionBar

2、定义Toolbar

ActionBar根据指定的AppTheme主题来显示的，找到主题的定义位置，修改主题即可达到隐藏ActionBar的目的。打开res/values/styles.xml。

<resources>

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

将parent指定的主题修改来隐藏ActionBar，两种修改方式：

Theme.AppCompat.NoActionBar		        //深色主题，即界面主体颜色深色，陪衬色为浅色
Theme.AppCompat.Light.NoActionBar	//浅色主题，即界面主体颜色浅色，陪衬色为深色

这里选择浅色主题，即修改parent值为：

parent="Theme.AppCompat.Light.NoActionBar"

接下来就是使用Toolbar，修改activity_main.xml：

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

为了兼容Android 5.0以前的系统，使用了xmlns:app命名空间，定义了高度为actionBar高度，背景颜色为colorPrimary，设置Toolbar的主题和弹出菜单的主题分别为深色和浅色。

修改MainActivity中的代码：

package com.my.materialdesigntest;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

    }
}

运行程序：

它现在已经不是ActionBar了，而是Toolbar，接下来的任务就是丰富这个标题栏的内容。

1、为标题栏修改标题

打开AndroidManifest.xml文件，找到application标签，加入以下内容。

<application
    
	...
    
	<activity android:name=".MainActivity"
              android:label="Fruits">
        
		...
		
    </activity>
</application>

这样MainActivity的标题栏就被修改成了Fruits，不修改默认显示应用程序名，当然也可以在资源文件夹下指定标题，方便日后维护。

2、为标题栏添加按钮

右击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="@drawable/ic_backup"
        android:title="Backup"
        app:s