在2015年GoogleIO大會(huì)上，Google除了推出Android L之外宪巨，還推出了一個(gè)全新的支持庫(kù)Android? Support Design Library，這個(gè)庫(kù)給我們提供了8個(gè)具有規(guī)范的Merterial Design風(fēng)格控件溜畅。這8個(gè)控件分別是：NavigationView捏卓，TextInputLayout，F(xiàn)loatingActionButton慈格，Snackbar怠晴，TabLayout贿肩，CoordinatorLayout，AppBarLayout龄寞，CollapsingToolbarLayout汰规，接下來我們會(huì)寫一系列的文章介紹這個(gè)ASD庫(kù)，TabLayout我們?cè)谇懊嬉呀?jīng)介紹過了物邑，想了解的猛戳這里溜哮，下面我們開始學(xué)習(xí)這個(gè)ASD庫(kù)吧。
在Android Studio中使用這個(gè)庫(kù)需要在gradle中添加如下代碼：
compile 'com.android.support:design:24.0.0'
這一篇我們開始學(xué)習(xí)第一個(gè)控件：NavigationView
概述
側(cè)滑菜單在我們開發(fā)中非常常用色解，例如QQ等應(yīng)用茂嗓，在沒有這個(gè)NavigationView之前，我們考慮的是通過FrameLayout+DrawerLayout實(shí)現(xiàn)科阎，現(xiàn)在有了這個(gè)控件述吸，我們就不在需要再考慮那么多了。有了NavigationView之后锣笨，我們只需要寫一下布局就可以實(shí)現(xiàn)了蝌矛，而且非常符合Google的MD設(shè)計(jì)風(fēng)格，效果也非常好错英，并且向下兼容到2.1入撒，下面我們來學(xué)習(xí)使用一下這個(gè)強(qiáng)大的控件吧！
使用
使用起來非常easy椭岩，只需要寫一下布局文件就可以了茅逮，下面我們通過一個(gè)例子實(shí)現(xiàn)一下：
首先是布局文件代碼：
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.adsdemo.MainActivity">
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
android:id="@+id/nv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:fitsSystemWindows="true"
app:headerLayout="@layout/head_layout"
app:menu="@menu/menu_main"/>
NavigationView與DrawerLayout一起使用，NavigationView類似于一個(gè)Framelayout判哥，android:layout_gravity="left"這句代碼設(shè)置從屏幕左邊滑出献雅。app:headerLayout="@layout/head_layout"這句是添加一個(gè)頭布局，代碼如下：
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_marginTop="10dp"
android:background="#81C784"
android:orientation="vertical">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:src="@mipmap/ic_account_circle"/>
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="用戶名"
android:textColor="#ffffff"
android:textSize="18sp"/>
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="不要只是路過"
android:textColor="#ffffff"
android:textSize="18sp"/>
這里沒有什么好解析的塌计，就是一個(gè)簡(jiǎn)單的布局而已挺身。在上一個(gè)布局文件中，app:menu="@menu/menu_main"這句代碼是給NavigationView添加一個(gè)menu夺荒，一般在AS中不會(huì)默認(rèn)創(chuàng)建menu文件夾瞒渠，需要自己創(chuàng)建，直接在res目錄下創(chuàng)建即可技扼，menu_main的代碼如下：
android:id="@+id/menu_has_icon"
android:checkableBehavior="none">
android:id="@+id/menu_nv"
android:icon="@mipmap/ic_app"
android:title="NavigationView實(shí)例"/>
android:id="@+id/menu_til"
android:icon="@mipmap/ic_friends"
android:title="TextInputLayout實(shí)例"/>
android:id="@+id/menu_fab"
android:icon="@mipmap/ic_messages"
android:title="FloatingActionButton實(shí)例"/>
android:id="@+id/menu_sb"
android:icon="@mipmap/ic_notification"
android:title="Snackbar實(shí)例"/>
android:id="@+id/menu_not_icon"
android:checkableBehavior="none">
android:id="@+id/menu_cl"
android:title="CoordinatorLayout實(shí)例"/>
android:id="@+id/menu_al"
android:title="AppBarLayout實(shí)例"/>
android:id="@+id/menu_ctl"
android:title="CollapsingToolbarLayout實(shí)例"/>
android:id="@+id/menu_other"
android:checkableBehavior="none">
android:id="@+id/ic_setting"
android:icon="@mipmap/ic_app"
android:title="設(shè)置"/>
android:id="@+id/ic_search"
android:icon="@mipmap/ic_search"
android:title="搜索"/>
在menu中伍玖，如果給group設(shè)置id屬性就會(huì)有分割線，不設(shè)置的話不會(huì)有剿吻。好了窍箍，到這里基本把側(cè)滑菜單的布局搞定了，下面我們來看看Activity的代碼：
package com.example.adsdemo;
import android.graphics.Color;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
private DrawerLayout mDrawerLayout;
private NavigationView mNavigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitleTextColor(Color.WHITE);
setSupportActionBar(toolbar);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
mNavigationView = (NavigationView) findViewById(R.id.nv);
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
mDrawerLayout.addDrawerListener(actionBarDrawerToggle);
actionBarDrawerToggle.syncState();
mNavigationView.setNavigationItemSelectedListener(this);
}
/**
*NavigationView里面Item監(jiān)聽事件
*
*@param item
*@return
*/
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_nv:
ToastUtils.showToast(this, "NavigationView使用實(shí)例");
break;
case R.id.menu_til:
ToastUtils.showToast(this, "TextInputLayout使用實(shí)例");
break;
case R.id.menu_fab:
ToastUtils.showToast(this, "FloatingActionButton使用實(shí)例");
break;
case R.id.menu_sb:
ToastUtils.showToast(this, "Snackbar使用實(shí)例");
break;
case R.id.menu_cl:
ToastUtils.showToast(this, "CoordinatorLayout使用實(shí)例");
break;
case R.id.menu_al:
ToastUtils.showToast(this, "AppBarLayout使用實(shí)例");
break;
case R.id.menu_ctl:
ToastUtils.showToast(this, "CollapsingToolbarLayout使用實(shí)例");
break;
case R.id.ic_setting:
ToastUtils.showToast(this, "設(shè)置");
break;
case R.id.ic_search:
ToastUtils.showToast(this, "搜索");
break;
}
mDrawerLayout.closeDrawer(GravityCompat.START);
return true;
}
}
這一句setSupportActionBar(toolbar)中，給Activity設(shè)置一個(gè)ToolBar椰棘，需要給當(dāng)前的Activity換一個(gè)沒有Actionbar的主題纺棺，不然會(huì)報(bào)錯(cuò)，或者也可以直接在整個(gè)APP中換一個(gè)沒有ActionBar的主題邪狞。
然后下面就是給DrawerLayout設(shè)置一個(gè)addDrawerListener祷蝌，因?yàn)锳ctionBarDrawerToggle已經(jīng)實(shí)現(xiàn)了DrawerLayout.DrawerListener這個(gè)接口，所以我們可以直接用ActionBarDrawerToggle帆卓，里面的五個(gè)參數(shù)分別是：Context上下文對(duì)象巨朦，DrawerLayout，第三個(gè)可以直接用ToolBar剑令，最后就是兩個(gè)普通的值了糊啡。
必須要用 actionBarDrawerToggle.syncState();這一句，不然不起作用吁津。
mNavigationView.setNavigationItemSelectedListener(this); 這一句是給NavigationView里面的Item設(shè)置監(jiān)聽棚蓄。
下面我們看一下最終的效果
總的來說這個(gè)控件的使用不是很復(fù)雜，猛戳這里可以看到NavigationView的國(guó)內(nèi)鏡像API碍脏。NavigationView這個(gè)控件就介紹到這里了梭依，如果有什么錯(cuò)誤的歡迎留言指出。下一篇我們會(huì)介紹一下另外一個(gè)控件：TextInputLayout潮酒，這個(gè)使用也很簡(jiǎn)單睛挚，但是效果很好。
