android design库的使用（一）

2017-01-24

android5.0带来的Material Design是非常惊艳的，为了能让这个的设计支持低版本的版本，google提供了design库。
今天我们的主角是android的抽屉菜单DrawerLayout及配套使用的一些控件。

最简单的例子就是用Android Studio自带的功能,我们新建一个Activity在模本中选择Navigation drawer Activity 然后finish，这样抽屉菜单就生成了，然后你会看到一个activity与4个layout。
我们先看一下效果

效果还不错吧，现在我们来看看布局

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <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/nav_header_main"
        app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>

DrawerLayout是抽屉菜单，include是主页的内容，NavigationView是菜单的内容
我们来看看主页的内容app_bar_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.jsqix.dongqing.demo.MainActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_main" />
    <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="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>

然后是cotent_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.jsqix.dongqing.demo.MainActivity"
    tools:showIn="@layout/app_bar_main">
</RelativeLayout>

最后是nav_header_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        app:srcCompat="@android:drawable/sym_def_app_icon" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android.studio@android.com" />
</LinearLayout>

及menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Import" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools" />
    </group>
    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
        </menu>
    </item>
</menu>

现在我们来分析一下布局，首先是drawer，里面包含主页与菜单，菜单是通过head与menu来组装，然后主页里面就是CoordinatorLayout包裹的内容，里面AppBarLayout包裹着Toolbar，还有一个content，最后是FloatingActionButton，content就是我们需要写的布局代码。

今天我们就分析NavigationView的使用
通过上面布局我们知道NavigationView主要有两个部分组成，head与menu。head是NavigationView的头，一般用来显示头像等，menu就是一些菜单。android:layout_gravity="start" 代表是左滑菜单，相应的end便是右滑菜单（建议用start代替left，end代替right，这样可以国际化）。
我们再来分析菜单
布局文件必须使用menu标签作为根节点。除了menu标签外，还有另外两个标签用于设置菜单项和分组，这两个标签是item和group。menu标签没有任何属性，但可以嵌套在item标签中，表示子菜单的形式。不过item标签中不能再嵌入item标签。

item标签的属性
- id，这个大家都知道
- menuCategory，同种菜单项的种类
- orderInCategor，同种类菜单的排列顺序，值越大越靠前
- title，标题
- titleCondensed，短标题，当title太长时会显示该属性值
- icon，图标
- alphabeticShortcut，字母快捷键
- numericShortcut，数字快捷键
- checkable，是否带复选框
- checked，复选框的默认选中
- visible，可不可见
- enable，可不可操作
group标签的属性
- menuCategory，菜单组的种类
- orderInCategory，菜单组的排序
- checkableBehavior，该组所有菜单项上显示的选择组件，all为CheckBox，single为RadioButton，none为正常的菜单项
- visible，菜单组是否可见
- enable，菜单组是否可操作

这样我们便可以生产菜单menu文件了。

菜单的事件操作

head中必须通过

1 2	NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); View headerView=navigationView.getHeaderView(0);

通过headerView的findViewById找到相应的组件来进行操作。

menu中setNavigationItemSelectedListener来监听

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
@Override
public boolean onNavigationItemSelected(MenuItem item) {
}

到这里基本上是完成了滑动菜单，但是这还是不够的。
NavigationView 默认是随主题的，菜单默认是灰色的，group菜单选中之后默认是colorPrimary的颜色，如果你需要修改,可以通过如下属性

app:itemIconTint，设置图片的颜色
app:itemTextColor，设置字体颜色
app:itemBackground，设置背景颜色
app:itemTextAppearance，设置字体的TextAppearance

如果你的菜单还需要其他什么功能，比如QQ在右下角显示设置，主题等操作，可以在NavigationView中写你想要的布局如

...
<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/nav_header_main"
    app:menu="@menu/activity_main_drawer">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:paddingBottom="15dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">
        <TextView
            android:id="@+id/btn_set"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@mipmap/ic_menu_set"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:text="设置"
            android:textColor="@color/black" />
        <TextView
            android:id="@+id/btn_theme"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="20dp"
            android:drawableLeft="@mipmap/ic_menu_theme"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:text="主题"
            android:textColor="@color/black" />
    </RelativeLayout>
</android.support.design.widget.NavigationView>
···

如果这些还不能满足你，可以试试MaterialDrawer功能强大，可定制高，还支持主题切换。