博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
界面无小事(六):来做个好看得侧拉菜单!
阅读量:6574 次
发布时间:2019-06-24

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


目录

  • 效果图
  • 前言
  • DrawerLayout
  • Toolbar
  • fragment
  • NavigationView
  • CircleImageView
  • 最后

效果图

不多废话, 来看效果图, 喜欢再看源码:


前言

这次来说说侧拉菜单. 虽然现在手机越来越大, 但也不至于说直接把侧拉菜单全部展示出来, 因为很多时候, 它没有展示的必要. 这次会涉及的内容是DrawerLayout, Toolbar, NavigationView, 都是与material design相关的.


DrawerLayout

看下主视图布局代码:

复制代码

这里在DrawerLayout中塞进了三个布局, android:layout_gravity="end"代表右侧拉布局, android:layout_gravity="start"代表左侧拉布局, 没写代表主界面布局. 具体细节后面再说, 记得导包:

compile 'com.android.support:design:25.3.1'复制代码

Toolbar

Toolbar我是很喜欢用的, 可以放置很多按钮, 通过设置隐藏等, 看起来也依然简洁.我在就写过Toolbar的使用. 然后在效果图中, 点击Toolbar的左侧按钮, 会展开左侧的菜单. 菜单内容就是我在中写的, 具体代码就是mDlMain.openDrawer(GravityCompat.START);. 点击右侧按钮, 会展开右侧菜单, 代码是mDlMain.openDrawer(GravityCompat.END);, 右侧菜单我们后面再说.

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {    switch (item.getItemId()) {        case android.R.id.home:            mDlMain.openDrawer(GravityCompat.START);            break;        case R.id.username:            mDlMain.openDrawer(GravityCompat.END);            break;    }    return true;}复制代码

fragment

仔细观察的同学会发现点击左侧菜单的第一个和第二个按钮会切换主界面字符串的颜色, 其实不单单是切换颜色, 我重新放置了fragment. 当然了, 切换fragment不是什么难事.

myRVAdapter.setOnItemClickListener(new MyRVAdapter.OnItemClickListener() {    @Override    public void onItemClick(View view, int position) {        Toast.makeText(getApplicationContext(),                "click: " + position, Toast.LENGTH_SHORT).show();        FragmentTransaction ft = fm.beginTransaction();        switch (position) {            case 0:                ft.replace(R.id.ll_content, new Fragment1());                break;            case 1:                ft.replace(R.id.ll_content, new Fragment2());                break;            default:                break;        }        ft.commit();        mDlMain.closeDrawer(GravityCompat.START);    }    @Override    public void onItemLongClick(View view, int position) {        Toast.makeText(getApplicationContext(),                "long click: " + position, Toast.LENGTH_SHORT).show();    }});复制代码

我最想说的一点就是, 即使切换了fragment, 但是Toolbar依旧是存在的, 这点要注意.


NavigationView

这是用来实现右侧菜单的. 主要要实现两个部分, 就是布局文件中写的header和menu部分. header部分是布局代码, 而menu部分是menu代码. 关于CircleImageView部分, 后面有说. 这里要说的是菜单部分, 将两个按钮设置成单选条目组, 就和单选按钮组是一样的了.

复制代码
复制代码
复制代码

CircleImageView

这是个异常实用的, 使用起来也很简单, 目的就是把普通图片变成圆形图片, 还可以加个白框或者黑框. 从效果图来看, 还是很不错的.


最后

这次的很简单, 就是融合了之前的内容, 并把google提供的侧拉面板和菜单面板的使用学会, 感谢google, 自己实现就可麻烦了. 喜欢记得点赞, 有意见或者建议评论区见, 暗中关注我也是可以的~


转载地址:http://logjo.baihongyu.com/

你可能感兴趣的文章
(已解决)iOS真机运行 Xcode报错(libpng error: CgBI: unhandled critical chunk)
查看>>
比较好的参考文章
查看>>
C#版(击败97.76%的提交) - Leetcode 557. 反转字符串中的单词 III - 题解
查看>>
OSCache操作详解+标签使用
查看>>
sql语句之查询操作
查看>>
angularJS表达式详解!
查看>>
jquery的一点点认识
查看>>
localhost或本机ip无法连接数据库问题解决与原因
查看>>
git的基本使用
查看>>
Latent Semantic Analysis (LSA) Tutorial第一部分(转载)
查看>>
【CF311E】biologist
查看>>
将vim打造成python开发工具
查看>>
sql中去掉字段的所有空格
查看>>
添加头像
查看>>
Django 模板层
查看>>
Html5学习进阶一 视频和音频
查看>>
ap.net core 教程(三)
查看>>
【转】虚拟机下安装小红帽Linux9.0图解
查看>>
经验的总结,需要记录。
查看>>
我的家庭私有云计划-21
查看>>