《第一行代码Android》学习总结第十二章 Material Design

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

一、Toolbar

（一）创建Toolbar

         Material控件中的一个控件，类似于ActionBar。

1、将res/values/styles.xml文件中的parent属性改为Theme.AppCompat.Light.NoActionBar。

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

2、修改activity_main中代码，将Toolbar放在一个FrameLayout内。

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

        Toolbar高度设置为ActionBar的高度，android:theme属性为Toolbar的主题，app:popupThem属性单独将弹出的菜单项指定为淡色主题。

3、修改MainActivity中代码。

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//得到Toolbar实例
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar); //使用Toolbar同时使其外观与功能与ActionBar一致
    }
}

（二）修改标题栏显示文字的内容

1、修改AndroidManifest中< activity>的label属性。

  <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="Fruits">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application>

（三）在Toolbar中添加action按钮

1、准备几张图片作为按钮的图标，放在drawable目录下。

2、右击res目录→New→Directory，创建一个menu文件夹。然后右击menu文件夹→New→Menu resource file，创建一个toolbar.xml文件。

<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/backup"
        android:title="Backup"
        app:showAsAction="always"/>
    <item
        android:id="@+id/delete"
        android:icon="@drawable/delete"
        android:title="Delete"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/settings"
        android:icon="@drawable/settings"
        android:title="Settings"
        app:showAsAction="never"/>
</menu>

        其中通过<item>标签定位action按钮，app:showAsAction属性指定按钮显示的位置。

always表示永远显示在Toolbar中，如果屏幕空间不够这不显示。

ifRoom表示屏幕空间足够的情况下显示则Toolbar中，不够的话显示在菜单中。

never则表示永远显示在菜单中。

3、修改MainActivity中代码。

public class MainActivity extends AppCompatActivity {
……
    @Override
public boolean onCreateOptionsMenu(Menu menu) {
//加载toolbar.xml文件
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }
    @Override
public boolean onOptionsItemSelected(MenuItem item) {
//处理点击事件
        switch (item.getItemId()){
            case R.id.backup:
                Toast.makeText(this, "You Click Backup", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "You Click Delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this, "You Click Settings", Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }
}

二、滑动菜单

        滑动菜单是将一些菜单选项隐藏起来，而不是放置在主屏幕中，然后通过滑动的方式将菜单显示出来。

（一）DrawerLayout

        DrawerLayout控件是一个布局，它允许放入两个直接子控件，第一个子控件为主屏幕中显示的内容。第二个子控件为滑动菜单中显示的内容。

1、修改activity_main中代码，使DrawerLayout嵌套FrameLayou和TextView两个子控件。

<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 >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="This is menu"
        android:textSize="30sp"
        android:background="#FFF"/>
</android.support.v4.widget.DrawerLayout>

        其中第二个子控件android:layout_gravity属性是必须指定的，它告诉DrawerLayout滑动菜单是从屏幕左边还是右边出现，left、right、start和end选项。

2、在Toolbar的最左边加入导航按钮，点击该按钮也可将滑动菜单中的内容显示出来。

public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
        android.support.v7.app.ActionBar actionBar = getSupportActionBar();
        if(actionBar != null){
//让导航按钮显示出来
            actionBar.setDisplayHomeAsUpEnabled(true);
//设置导航按钮图标
            actionBar.setHomeAsUpIndicator(R.drawable.menu);
        }
}
……
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
//HomeAsUp按钮的id永远为android.R.id.home
            case android.R.id.home:
//展示滑动菜单，其中参数必须与XML文件中定义的一致
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
            ……
            default:
        }
        return true;
    }
}

（二）NavigationView

        NavigationView是Material Support库中提供的一个控件，使滑动菜单页面的实现变得十分简单。

1、在app/build.gradle