Android Support Design Library之NavigationView

此安卓支持库中需要讲解的第二个View就是NavigationView,相信大家在开发中经常会用到抽屉,那么谷歌也为大家提供了这个功能,并不需要去Github去下载使用开源的软件。NavigationView基本满足日常开发抽屉的所有要求,且效率也高。下面我们看下效果图后,将详细介绍其使用方式。

1.NavigationView与DrawerLayout的天作之合

NavigationView完整包名+类名如下:android.support.design.widget.NavigationView

而DrawerLayout完整包名+类名如:android.support.v4.widget.DrawerLayout

其两者搭配起来的XML布局文件如下:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

<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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:fitsSystemWindows="true">

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

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

<LinearLayout
            android:id="@+id/linearlayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"/>

</LinearLayout>

<android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer_menu"/>

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

属性解释如下:

①android:fitsSystemWindows="true":此属性在标题栏与抽屉中都设置了,保证系统状态栏与抽屉和标题一体化,因为我的测试手机是小米IS,Andorid 4.1的系统,该功能在5.0以上的手机才能显示其效果,故此测试图没有效果。

②app:headerLayout="@layout/drawer_header"也就是下图的区域:

这里在一般APP中都放的头像,我们这里只是做介绍,只要要drawer_header写你的任意布局,那么在此区域就会显示你所需要的界面。

③app:menu="@menu/drawer_menu":也就是下图所示区域:

也就是抽屉中的各种菜单选项。

2.实现抽屉中的菜单选项

在res/menu文件下新建drawer_menu.xml文件,写入如下代码:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/lyj_menu_datou"
            android:icon="@drawable/blog_tag_parent_expert"
            android:checked="true"
            android:title="我是大头"/>
        <item
            android:id="@+id/lyj_menu_xiaotou"
            android:icon="@drawable/blog_tag_parent_honorary_expert"
            android:title="我是小头"/>
        <item
            android:id="@+id/lyj_menu_chilun"
            android:icon="@drawable/blog_tag_parent_system_maintenance"
            android:title="我是齿轮"/>
    </group>
    <item android:title="其他">
        <menu>
            <item
                android:icon="@drawable/blog_tag_parent_cloud_computing"
                android:title="我是云盘"/>
            <item
                android:icon="@drawable/blog_tag_parent_comprehensive"
                android:title="我是标签"/>
        </menu>
    </item>
</menu>

属性解释如下:

①android:checkableBehavior="single":代表group所有菜单中,只能一次选择一个。

②android:checked="true":默认选中菜单项,此处为“我是大头”

③<item android:title="其他">:通过子菜单的形式,可以显示分割线与子标题

3.关联抽屉与标题栏

在继承自AppCompatActivity的Activity中,将标题栏设置显示为如下方式:

Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);
toolbar.setTitle("我是大头");
setSupportActionBar(toolbar);

那么将抽屉与标题栏关联要用到ActionBarDrawerToggle。其构造方法有五个参数,按顺序依次如下:

㈠上下文

㈡DrawerLayout

㈢toolbar

㈣打开标识

㈤关闭标识

四与五不显示,仅做标识用。关联抽屉与标题栏代码如下:

DrawerLayout drawerLayout=(DrawerLayout)findViewById(R.id.drawerlayout);
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar,
                R.string.drawer_open, R.string.drawer_close);
mDrawerToggle.syncState();//初始化状态
drawerLayout.setDrawerListener(mDrawerToggle);

使用setDrawerListener方式设置监听开关的打开与关闭。这样就实现了当按下菜单栏左侧按钮的时候,抽屉会打开。

4.设置NavigationView菜单选项的监听事件

该View给我们提供了菜单的监听回调方法:

setNavigationItemSelectedListener其需要实现的接口如下:

public interface OnNavigationItemSelectedListener {
        boolean onNavigationItemSelected(MenuItem var1);
    }

接口方法就一个,且参数就是菜单。下面我将实现其监听:

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                switch (menuItem.getItemId()){//获取菜单itemID
                    case R.id.lyj_menu_datou:
                        getSupportFragmentManager().beginTransaction().replace(R.id.linearlayout,new DrawerFragment("我是大头")).commit();
                        toolbar.setTitle("我是大头");
                        break;
                    case R.id.lyj_menu_xiaotou:
                        getSupportFragmentManager().beginTransaction().replace(R.id.linearlayout,new DrawerFragment("我是小头")).commit();
                        toolbar.setTitle("我是小头");
                        break;
                    case R.id.lyj_menu_chilun:
                        getSupportFragmentManager().beginTransaction().replace(R.id.linearlayout,new DrawerFragment("我是齿轮")).commit();
                        toolbar.setTitle("我是齿轮");
                        break;
                    default:
                        break;
                }
                menuItem.setChecked(true);//设置菜单选中
                drawerLayout.closeDrawers();//当选中菜单后,就要关闭抽屉
                return false;
            }
        });

根据菜单ID,设置fragment界面。最后效果图,就是博文开始的图片。

5.导入支持库

昨天讲解忘记了,需要配置如下信息,方能使用控件:

dependencies {
    compile fileTree(dir: ‘libs‘, include: [‘*.jar‘])
    compile ‘com.android.support:appcompat-v7:23.0.1‘
    compile ‘com.android.support:design:23.0.1‘
    compile ‘com.android.support:recyclerview-v7:23.0.1‘
    compile ‘com.android.support:cardview-v7:23.0.1‘
}

红色标记为导入的代码。

??

时间: 2024-10-21 03:41:59

Android Support Design Library之NavigationView的相关文章

Android Support Design Library之CoordinatorLayout

Android Support Design Library是5.0的安卓支持库,最低兼容版本是Android 2.2,可以说是一个良心的产品,以前编写Android程序总需要考虑到版本的问题,现在使用这个Android支持库开发可以不需要考虑这类问题,这可以说是另一种开发语言,下面我们将一一介绍里面的每个控件的使用方式以及其扩展特效. 1.什么是CoordinatorLayout 从其英文名字可知道其为"协调者",组织"协调"子View的父View,其继承自Fra

安卓Android Support Design Library——Snackbar

介绍: Snackbar是Android Support Design Library库支持的一个控件,用于在界面下面提示一些关键信息,跟Toast不同的地方是SnackBar允许用户向右滑动消除它,同时,也允许在SnackBar中设定一个Action,当用户点击了SnackBar里面的按钮的时候,可以进行一些操作,所以,功能绝对是很强大的. 官方推荐使用CoordinatorLayout(另一个Android Support Design Library库支持的控件)容纳.因为使用这个控件,可

Android Support Design Library 之 TabLayout

在 Android 3.0 的时候 ,我们知道可以通过 ActionBar 来创建 tab 实现导航,但是呢,不容易自定义 ,而且现在 ActionBar 被 Toolbar 取代的话,这让很多应用都抛弃了这个 ActionBar 的 tab,选择自己来写一个 tab.不过在 support v4 包中,有个PagerTitleStrip   和 PagerTabStrip,我觉得很丢脸,为何有这么丑的控件出现 ?于是在应用中我们还是选择了自己写一个 tab.今天,在 Android Desig

Android Support Design Library之TextInputLayout

相信普通的用户在使用手机的时候经常遇到一个输入框没输入的时候会有灰色的提示,可一旦输入些许字符后,用户很快忘记了这个输入框要输入什么,但是退回去却又要重新输入,对于用户的这个要求,谷歌看在眼里,在2015推出了TextInputLayout来满足这个需求.那么对于怎么使用这个控件,我将用模仿网易邮箱大师的登录界面来一一告诉大家怎么畅快的玩起来. 下面来看看,我们将要实现的界面. 1.TextInputLayout在布局里面的那些事 对于TextInputLayout并不能单独的使用,必须配合Ed

Android Support Design Library之FloatingActionButton

为了文章的精彩,前三个标题实现FloatingActionButton的特效,最后一节讲解其属性详情. 1.自定义Behavior实现掌阅底部菜单与按钮联动效果. 我们来看看掌阅的菜单效果: 以前没有这个支持库的时候,需要写两个动画,一个按钮的动画一个菜单的动画,现在因为有了Behavior,那么一个在另一个的相对位置就可以实现其效果. 另外标记一下这个库最重要的知识点就是Behavior,其他的与基本控件无异.下面我们来实现其效果. 自定义Behavior代码: public class LY

Android Support Design练手[DrawerLayout、CoordinatorLayout、CollapsingToolbarLayout...]

先po一张效果图 PS:原谅题主的懒惰吧.. 看着是不是很酷炫,那是因为5.0的动画做得好,代码其实没有多少,搞清楚这个布局的层次关系很重要. 废话不多说了,先来看布局文件 最外层是一个DrawerLayout,它里面可以嵌套(一个?)container和多个drawer 在这个demo中DrawerLayout包含了一个CoordinatorLayout , ListView , NavigationView CoordinatorLayout  作为 container的根布局 listVi

高逼格UI-ASD(Android Support Design)

绪 今年的Google IO给我们android开发着带来了三样很屌很屌的library: ASD(Android Support Design) APL(Android Percent Layout) DBL(Data Binding Library) 这三个库都是很屌很屌的库,第一个可以让我们在低版本的Android上使用Material Design,第二个是为了更好的适配,提供了基于百分比的Layout;至于第三个,能让Activity更好负责MVC中C的职责,让我们开发者更少的去fin

android.support.design.widget.AppBarLayout 在android5.0+底部显示空白条问题

在最外层使用 RelativeLayout作为根节点,同时设置 android:fitsSystemWindows="true"问题解决. <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://

Caused by: android.view.InflateException: Binary XML file line #12: Error inflating class android.support.design.widget.TabLayout,TableLayout引起页面崩溃

在使用TableLayout的时候,运行引用程序直接Crash. FATAL EXCEPTION: main Process: com.edaixi.activity, PID: 9703 java.lang.RuntimeException: Unable to start activity ComponentInfo{com.edaixi.activity/com.edaixi.activity.PriceCenterActivity}: android.view.InflateExcept