AndroidASD完全解析01之NavigationView

在2015年GoogleIO大会上,Google除了推出Android L之外,还推出了一个全新的支持库Android  Support Design Library,这个库给我们提供了8个具有规范的Merterial Design风格控件。这8个控件分别是:NavigationView,TextInputLayout,FloatingActionButton,Snackbar,TabLayout,CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout,接下来我们会写一系列的文章介绍这个ASD库,TabLayout我们在前面已经介绍过了,想了解的猛戳这里,下面我们开始学习这个ASD库吧。

在Android Studio中使用这个库需要在gradle中添加如下代码:

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

这一篇我们开始学习第一个控件:NavigationView

概述

侧滑菜单在我们开发中非常常用,例如QQ等应用,在没有这个NavigationView之前,我们考虑的是通过FrameLayout+DrawerLayout实现,现在有了这个控件,我们就不在需要再考虑那么多了。有了NavigationView之后,我们只需要写一下布局就可以实现了,而且非常符合Google的MD设计风格,效果也非常好,并且向下兼容到2.1,下面我们来学习使用一下这个强大的控件吧!

使用

使用起来非常easy,只需要写一下布局文件就可以了,下面我们通过一个例子实现一下:

首先是布局文件代码:


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类似于一个Framelayout,android:layout_gravity="left"这句代码设置从屏幕左边滑出。app:headerLayout="@layout/head_layout"这句是添加一个头布局,代码如下:


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

这里没有什么好解析的,就是一个简单的布局而已。在上一个布局文件中,app:menu="@menu/menu_main"这句代码是给NavigationView添加一个menu,一般在AS中不会默认创建menu文件夹,需要自己创建,直接在res目录下创建即可,menu_main的代码如下:


android:id="@+id/menu_has_icon"

android:checkableBehavior="none">

android:id="@+id/menu_nv"

android:icon="@mipmap/ic_app"

android:title="NavigationView实例"/>

android:id="@+id/menu_til"

android:icon="@mipmap/ic_friends"

android:title="TextInputLayout实例"/>

android:id="@+id/menu_fab"

android:icon="@mipmap/ic_messages"

android:title="FloatingActionButton实例"/>

android:id="@+id/menu_sb"

android:icon="@mipmap/ic_notification"

android:title="Snackbar实例"/>

android:id="@+id/menu_not_icon"

android:checkableBehavior="none">

android:id="@+id/menu_cl"

android:title="CoordinatorLayout实例"/>

android:id="@+id/menu_al"

android:title="AppBarLayout实例"/>

android:id="@+id/menu_ctl"

android:title="CollapsingToolbarLayout实例"/>

android:id="@+id/menu_other"

android:checkableBehavior="none">

android:id="@+id/ic_setting"

android:icon="@mipmap/ic_app"

android:title="设置"/>

android:id="@+id/ic_search"

android:icon="@mipmap/ic_search"

android:title="搜索"/>

在menu中,如果给group设置id属性就会有分割线,不设置的话不会有。好了,到这里基本把侧滑菜单的布局搞定了,下面我们来看看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监听事件

*

*@param item

*@return

*/

@Override

public boolean onNavigationItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.menu_nv:

ToastUtils.showToast(this, "NavigationView使用实例");

break;

case R.id.menu_til:

ToastUtils.showToast(this, "TextInputLayout使用实例");

break;

case R.id.menu_fab:

ToastUtils.showToast(this, "FloatingActionButton使用实例");

break;

case R.id.menu_sb:

ToastUtils.showToast(this, "Snackbar使用实例");

break;

case R.id.menu_cl:

ToastUtils.showToast(this, "CoordinatorLayout使用实例");

break;

case R.id.menu_al:

ToastUtils.showToast(this, "AppBarLayout使用实例");

break;

case R.id.menu_ctl:

ToastUtils.showToast(this, "CollapsingToolbarLayout使用实例");

break;

case R.id.ic_setting:

ToastUtils.showToast(this, "设置");

break;

case R.id.ic_search:

ToastUtils.showToast(this, "搜索");

break;

}

mDrawerLayout.closeDrawer(GravityCompat.START);

return true;

}

}

这一句setSupportActionBar(toolbar)中,给Activity设置一个ToolBar,需要给当前的Activity换一个没有Actionbar的主题,不然会报错,或者也可以直接在整个APP中换一个没有ActionBar的主题。

然后下面就是给DrawerLayout设置一个addDrawerListener,因为ActionBarDrawerToggle已经实现了DrawerLayout.DrawerListener这个接口,所以我们可以直接用ActionBarDrawerToggle,里面的五个参数分别是:Context上下文对象,DrawerLayout,第三个可以直接用ToolBar,最后就是两个普通的值了。

必须要用 actionBarDrawerToggle.syncState();这一句,不然不起作用。

mNavigationView.setNavigationItemSelectedListener(this); 这一句是给NavigationView里面的Item设置监听。

下面我们看一下最终的效果


AndroidASD完全解析01之NavigationView_第1张图片

总的来说这个控件的使用不是很复杂,猛戳这里可以看到NavigationView的国内镜像API。NavigationView这个控件就介绍到这里了,如果有什么错误的欢迎留言指出。下一篇我们会介绍一下另外一个控件:TextInputLayout,这个使用也很简单,但是效果很好。

你可能感兴趣的:(AndroidASD完全解析01之NavigationView)