Android 的 Material Design 初次尝试。

Android 的 Material Design 初次尝试。

抽屉导航

android.support.v4.widget.DrawerLayout 抽屉控件，他下面包含两大块，第一块为主屏幕显示的布局，第二块为抽屉布局。

tools:openDrawer="start"//在布局中可以用这个属性控制抽屉布局显示出来

可以通过以下操作对DrawerLayout进行操作：

mDrawerLayout.openDrawer(GravityCompat.START);//开启抽屉，这里的方向应该和NavigationView的layout_gravity相同
mDrawerLayout.closeDrawers();//关闭抽屉

NavigationView

全类名：android.support.design.widget.NavigationView 。我们需要导入design包。

compile 'com.android.support:design:23.4.0'

在Material Design中，Navigation drawer 导航抽屉，被设计用于应用的导航菜单，作为一种可默认隐藏，通过手势或者按钮拖出来的导航菜单。
NavigationView 的典型用途就是配合 DrawerLayout 作为体重的导航菜单的内容部分。NavigationView 是一个导航菜单的框架，使用 menu 资源填充菜单数据项，可以简单快捷的实现一个风格统一的导航菜单。NavigationView有一些配置如下：

android:layout_gravity="start"//设置菜单方位，start为左边拖拽出来，end为右边拖拽出来
app:headerLayout="@layout/nev_header"//设置菜单的header部分布局
app:menu="@menu/drawer_actions"//设置菜单项
android:fitsSystemWindows="true"

通过以上设置，就能够在主屏幕的左边拖拽出导航菜单啦。

典型的布局代码如下：

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

    <!--Content-->
    <LinearLayout
        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="wrap_content">

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


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

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

        <FrameLayout
            android:id="@+id/fl_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">


        </FrameLayout>

    </LinearLayout>

    <!--Drawer Navigation-->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nev_header"
        app:menu="@menu/drawer_actions">


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

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

Toolbars

全类名：android.support.v7.widget.Toolbar

说明：

Toolbars are versatile and can be used in many different ways.

Toolbar 的使用：

Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
ActionBar ab = getSupportActionBar();
ab.setHomeAsUpIndicator(R.drawable.ic_menu);
//设置home图标是否显示
ab.setDisplayHomeAsUpEnabled(true);

AppBarLayout

全类名：android.support.design.widget.AppBarLayout

说明：

The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.

AppBar 即以前我们称之为的 ActionBar，是一种用来展示信息、界面导航、搜索以及其他操作的一种特殊的工具栏。

The nav icon at the left side of the app bar can be:
- A control to open a navigation drawer.
- An up arrow for navigating upward through your app’s hierarchy.
- Omitted entirely if no navigation is required from this screen.
- The title in the app bar reflects the current page. It can be an app title, page title, or a page filter.

Icons on the right side of the app bar are app-related actions. The menu icon opens the overflow menu, which contains secondary actions and menu items like help, settings, and feedback.