界面无小事(六):来做个好看得侧拉菜单!

界面无小事(一): RecyclerView+CardView了解一下
界面无小事(二): 让RecyclerView展示更多不同视图
界面无小事(三):用RecyclerView + Toolbar做个文件选择器
界面无小事(四):来写个滚动选择器吧!
界面无小事(五):自定义TextView
界面无小事(六):来做个好看得侧拉菜单!
github传送门

---

目录

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

---

效果图

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

---

前言

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

---

DrawerLayout

看下主视图布局代码:

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout 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/dl_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.so.knowledge.ui.activity.DrawerLayout.DrawerActivity"> <RelativeLayout android:id="@+id/ll_content" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/tb_main" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <TextView android:id="@+id/tv_content" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="@string/username" android:textColor="@android:color/holo_blue_dark" android:textSize="@dimen/thirty_sp" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:background="@android:color/white"> <android.support.v7.widget.RecyclerView android:id="@+id/rv_fun_list" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="vertical" /> </RelativeLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_user_info" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="end" app:headerLayout="@layout/nav_header" app:menu="@menu/nav_menu" /> </android.support.v4.widget.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);, 右侧菜单我们后面再说.

@Override public 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部分, 后面有说. 这里要说的是菜单部分, 将两个按钮设置成单选条目组, 就和单选按钮组是一样的了.

<android.support.design.widget.NavigationView android:id="@+id/nav_user_info" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="end" app:headerLayout="@layout/nav_header" app:menu="@menu/nav_menu" /> 

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="@dimen/hundred_eighty_dp" android:background="@color/colorPrimary" android:padding="@dimen/sixteen_dp"> <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/civ_avatar" android:layout_width="@dimen/sixty_four_dp" android:layout_height="@dimen/sixty_four_dp" android:layout_centerInParent="true" android:src="@drawable/avatar" app:civ_border_color="@android:color/white" app:civ_border_width="@dimen/two_dp" /> <TextView android:id="@+id/tv_email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="@string/email" android:textColor="@android:color/white" /> <TextView android:id="@+id/tv_username" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/tv_email" android:text="@string/username" android:textColor="@android:color/white" /> </RelativeLayout> 

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_share" android:icon="@mipmap/ic_launcher" android:title="@string/share" /> <item android:id="@+id/nav_loc" android:icon="@mipmap/ic_launcher" android:title="@string/loc" /> </group> </menu> 

---

CircleImageView

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

---

最后

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

---