AndroidASD完全解析01之NavigationView

在2015年GoogleIO大會上，Google除了推出Android L之外，還推出了一個(gè)全新的支持庫Android? Support Design Library，這個(gè)庫給我們提供了8個(gè)具有規(guī)范的Merterial Design風(fēng)格控件。這8個(gè)控件分別是：NavigationView，TextInputLayout，F(xiàn)loatingActionButton，Snackbar，TabLayout，CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout，接下來我們會寫一系列的文章介紹這個(gè)ASD庫，TabLayout我們在前面已經(jīng)介紹過了，想了解的猛戳這里，下面我們開始學(xué)習(xí)這個(gè)ASD庫吧。

在Android Studio中使用這個(gè)庫需要在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è)簡單的布局而已。在上一個(gè)布局文件中，app:menu="@menu/menu_main"這句代碼是給NavigationView添加一個(gè)menu，一般在AS中不會默認(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屬性就會有分割線，不設(shè)置的話不會有。好了，到這里基本把側(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的主題，不然會報(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上下文對象，DrawerLayout，第三個(gè)可以直接用ToolBar，最后就是兩個(gè)普通的值了。

必須要用 actionBarDrawerToggle.syncState();這一句，不然不起作用。

mNavigationView.setNavigationItemSelectedListener(this); 這一句是給NavigationView里面的Item設(shè)置監(jiān)聽。

下面我們看一下最終的效果


總的來說這個(gè)控件的使用不是很復(fù)雜，猛戳這里可以看到NavigationView的國內(nèi)鏡像API。NavigationView這個(gè)控件就介紹到這里了，如果有什么錯(cuò)誤的歡迎留言指出。下一篇我們會介紹一下另外一個(gè)控件：TextInputLayout，這個(gè)使用也很簡單，但是效果很好。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. Toolbar 1.使用Toolbar，首先需要將系統(tǒng)的ActionBar隱藏，打開res/values／s...
    figure_ai閱讀 1,182評論 1贊 3
  • ￥開啟￥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程，因...
    小菜c閱讀 7,294評論 0贊 17
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,716評論 25贊 709
  • 這篇主要是講排版，就是在你看網(wǎng)頁、博客、論壇這些的時(shí)候，注意文字的字體、行距、重點(diǎn)標(biāo)出等是否合乎邏輯，以及易讀性。...
    大夢Power閱讀 633評論 0贊 2
  • 大家好，我今天想說的是把自己的角色演好。人生如戲，為了這人生大戲，唯有把自己的角色演好。 說到角色，我就想起同舟共...
    輕旅忠耀閱讀 209評論 0贊 0

友情鏈接更多精彩內(nèi)容