博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
NavigationViewDemo【和DrawerLayout搭配使用实现侧滑导航视图界面】
阅读量:6856 次
发布时间:2019-06-26

本文共 5114 字,大约阅读时间需要 17 分钟。

版权声明:本文为HaiyuKing原创文章,转载请注明出处!

前言

主要记录NavigationView的使用,而一般情况下NavigationView是和DrawerLayout搭配使用的,还有ToolBar。不过本Demo中没有使用ToolBar,而是模拟ToolBar区域做了一个简单布局。

效果图

代码分析

1、使用NavigationView需要引用Design Support库;

2、NavigationView需要用到menu和headerLayout,menu是用来在NavigationView中显示具体的菜单项的,headerLayout则是用来在NavigationView中显示头部布局的。

使用步骤

一、项目组织结构图

注意事项:

1、  导入类文件后需要change包名以及重新import R文件路径

2、  Values目录下的文件(strings.xml、dimens.xml、colors.xml等),如果项目中存在,则复制里面的内容,不要整个覆盖

二、导入步骤

(1)在build.gradle中引入design支持库【版本号跟appcompat保持一致】

apply plugin: 'com.android.application'android {    compileSdkVersion 27    defaultConfig {        applicationId "com.why.project.navigationviewdemo"        minSdkVersion 16        targetSdkVersion 27        versionCode 1        versionName "1.0"        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"    }    buildTypes {        release {            minifyEnabled false            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'        }    }}dependencies {    implementation fileTree(dir: 'libs', include: ['*.jar'])    implementation 'com.android.support:appcompat-v7:27.1.1'    implementation 'com.android.support.constraint:constraint-layout:1.1.2'    testImplementation 'junit:junit:4.12'    androidTestImplementation 'com.android.support.test:runner:1.0.2'    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'    //引入design库    implementation 'com.android.support:design:27.1.1'}

(2)修改styles.xml文件中的样式为NoActionBar【主要用于ToolBar,本Demo中没有使用ToolBar,而是模拟了ToolBar的区域,但是也需要设置为NoActionBar】

(3)参考《》进行activity界面的布局

(4)将nav_drawer_header.xml复制到项目中【根据实际情况修改UI布局

nav_drawer_header.xml

(5)将nav_drawer_menu.xml复制到项目的menu目录中【根据实际情况修改

nav_drawer_menu.xml

(6)在styles.xml添加以下代码

(7)在colors.xml中添加以下代码

#3F51B5
#303F9F
#FF4081
#434343

(8)添加用到的资源图片【这里添加的是demo中使用到的,根据实际情况添加合适的图片资源】

三、使用方法

package com.why.project.navigationviewdemo;import android.os.Bundle;import android.support.annotation.NonNull;import android.support.design.widget.NavigationView;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.AppCompatActivity;import android.view.Gravity;import android.view.MenuItem;import android.view.View;import android.widget.ImageView;import android.widget.Toast;public class MainActivity extends AppCompatActivity {    private ImageView mImgMenu;    /**导航栏左侧的侧边栏的父容器*/    private DrawerLayout mDrawerLayout;    //导航视图    private NavigationView mNavigationView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initViews();        initEvents();    }    private void initViews() {        mImgMenu = findViewById(R.id.img_menu);        mDrawerLayout = findViewById(R.id.id_drawerLayout);        mNavigationView = findViewById(R.id.nav_view);    }    private void initEvents() {        //用户图标的点击事件        mImgMenu.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                mDrawerLayout.openDrawer(Gravity.LEFT);            }        });        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(@NonNull MenuItem item) {                switch(item.getItemId()){                    case R.id.menu_info:                        Toast.makeText(MainActivity.this, "个人信息", Toast.LENGTH_SHORT).show();                        break;                    case R.id.menu_pwd:                        Toast.makeText(MainActivity.this, "修改密码", Toast.LENGTH_SHORT).show();                        break;                    case R.id.menu_setting:                        Toast.makeText(MainActivity.this, "设置", Toast.LENGTH_SHORT).show();                        break;                    case R.id.menu_about:                        Toast.makeText(MainActivity.this, "关于", Toast.LENGTH_SHORT).show();                        break;                    case R.id.menu_exit:                        Toast.makeText(MainActivity.this, "退出", Toast.LENGTH_SHORT).show();                        break;                }                //关闭侧滑菜单                mDrawerLayout.closeDrawers();                return true;            }        });    }}

补充

如果想要更改侧边栏的menu中图标和文本的间距,需要在Activity中执行下面的java代码:

mNavigationView.setItemIconPadding(getResources().getDimensionPixelOffset(R.dimen.navigation_icon_padding));//设置侧边栏图标和文本的间距

 其中,R.dimen.navigation_icon_padding的值在dimens.xml文件中设置。

混淆配置

参考资料

《第一行代码(第2版)》

项目demo下载地址

你可能感兴趣的文章
阿里云发布Apsara SA系列混合云存储阵列
查看>>
GoJS教程:链接模版
查看>>
QListWidget方式显示缩略图
查看>>
金三银四:蚂蚁金服JAVA后端面试题及答案之二面
查看>>
Ubuntu 外网不通解决方案
查看>>
OSChina 周六乱弹 —— 历史总是惊人的相似
查看>>
MySQL 大小写
查看>>
Lync 2013部署图片赏析-证书服务安装配置
查看>>
HTML5 本地缓存 (web存储)
查看>>
tomcat redis session共享(包含redis安全设置)
查看>>
iptables中DNAT、SNAT和MASQUERADE的作用
查看>>
kvm命令学习记录
查看>>
小菜鸡进阶之路-First week
查看>>
ORACLE 10g SYSAUX表空间快速增长之WRH$_ACTIVE_SESSION_HISTORY篇
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
子数组的和的最大值(包括升级版的首尾相连数组)
查看>>
LeetCode - Nth Highest Salary
查看>>
9.ORM数据访问
查看>>
/dev/null &
查看>>