1.NavigationView是什么

我们做抽屉菜单的时候，左边滑出来的那一部分的布局都是由我们自己来定义的，自己写的话，花点时间也能做出来好看的侧拉菜单，但总是要耗费时间，于是Google在5.0之后推出了NavitationView，就是我们左边滑出来的那个菜单。这个菜单整体上分为两部分，上面一部分叫做HeaderLayout，下面的那些点击项都是menu，这样的效果如果我们要自己写肯定也能写出来，但是没有必要，既然Google提供了这个控件，那我们就来看看这个控件要怎么用吧。

首先所有的东西都放在一个DrawerLayout中

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.iblood.ui.HomeActivity">

    <!--主布局-->
    <include layout="@layout/layout_zhu"/>

    <!--侧滑布局-->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity = "left"
        app:headerLayout="@layout/cehua_head"
        app:menu="@menu/menu">
        <Button
            android:text="申请成为寄养家庭"
            android:background="#e59707"
            android:paddingLeft="40px"
            android:paddingRight="40px"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

首先，根布局就是DrawerLayout，在根布局之后又主要分为三大块，第一块就是我们主界面的内容，第二块是左边拉出来的布局，第三块是右边拉出来的布局（不需要右边侧拉就不用写，这样的话整个布局就只分为两大块），那么系统怎么知道我们这个布局是主布局还是侧拉菜单的布局？请注意左边侧拉菜单布局android:layout_gravity="left"这个属性和右边菜单布局的android:layout_gravity="right"这个属性，哈哈，这下应该明白了吧，系统通过layout_gravity属性的值来判断这个布局是左边菜单的布局还是右边菜单的布局，如果没有这个属性，那不用说，肯定是主界面的布局。

app:headerLayout="@layout/header_layout"表示引用一个头布局文件

app:menu="@menu/main"表示引用一个menu作为下面的点击项

Button 是下面的一个切换按钮

头布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20px"
    android:id="@+id/cehua_tou"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/iv"
        android:layout_margin="10px"
        android:layout_gravity="center"
        android:layout_width="80px"
        android:layout_height="80px"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher"/>
    <LinearLayout
        android:orientation="vertical"
        android:layout_gravity="center"
        android:layout_width="0px"
        android:layout_weight="1"
        android:layout_height="wrap_content">

        <TextView
            android:text="aaa"
            android:id="@+id/cehua_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="aaa"
            android:id="@+id/cehua_dianhua"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <ImageView
        android:src="@drawable/enter"
        android:layout_width="30px"
        android:layout_height="30px"
        android:layout_gravity="center"/>

</LinearLayout>

menu文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:id="@+id/a" >
        <item
            android:id="@+id/cehua_xiaoxi"
            android:icon="@drawable/messages"
            android:title="消息"/>
        <item
            android:id="@+id/cehua_chongwu"
            android:icon="@drawable/pet"
            android:title="宠物"/>
    </group>
    <group android:id="@+id/b">
        <item
            android:id="@+id/cehua_dingdan"
            android:icon="@drawable/order_details"
            android:title="订单"/>
        <item
            android:id="@+id/cehua_qianbao"
            android:icon="@drawable/collection_account"
            android:title="钱包"/>
        <item
            android:id="@+id/cehua_xuzhi"
            android:icon="@drawable/about"
            android:title="须知"/>
    </group>
    <group android:id="@+id/c">
        <item
            android:id="@+id/cehua_shezhi"
            android:icon="@drawable/setting"
            android:title="设置"/>

    </group>
    <group android:id="@+id/d">
        <item
            android:title=""/>
    </group>
</menu>

在布局文件中添加app:itemIconTint="@color/blue"属性改变背景颜色

代码中navigationView.setItemIconTintList(null); 显示原本颜色

其实不用<group>标签也可以，但是加上它在给个id的话会分隔item显得逼格高一些

1.app:itemBackground="@color/colorAccent"设置每一个item的背景颜色

2.app:itemTextColor=""设置item的背景颜色

头布局点击事件

//侧滑头布局
View headerView = navView.getHeaderView(0);
View cehua_tou = headerView.findViewById(R.id.cehua_tou);
cehua_tou.setOnClickListener(this);

item点击事件

//侧滑item点击事件
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        //允许条目点击
        item.setCheckable(true);
        switch (item.getItemId()){
            case R.id.cehua_xiaoxi:
                Toast.makeText(HomeActivity.this, "11111111111111", Toast.LENGTH_SHORT).show();
                break;
            case R.id.cehua_chongwu:
                Toast.makeText(HomeActivity.this, "22222222222222", Toast.LENGTH_SHORT).show();
                break;
        }
        return false;
    }
});

侧滑栏简单实现

1.NavigationView是什么

猜你喜欢