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

简介: 界面无小事(一): RecyclerView+CardView了解一下界面无小事(二): 让RecyclerView展示更多不同视图界面无小事(三):用RecyclerView + Toolbar做个文件选择器界面无小事(四):来写个滚动选择器吧!界面...

界面无小事(一): 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, 自己实现就可麻烦了. 喜欢记得点赞, 有意见或者建议评论区见, 暗中关注我也是可以的~


目录
相关文章
|
3月前
404错误页面简约清新源码 非常好看
404错误页面简约清新源码 非常好看,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
22 0
404错误页面简约清新源码 非常好看
|
4月前
2024简约唯美的个人引导页源码
2024简约唯美的个人引导页源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
108 4
|
5月前
|
JSON Java API
个人作品-微信服务号菜单管理神器
个人作品-微信服务号菜单管理神器
32 0
|
11月前
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!(一)
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!
|
6月前
|
存储 SQL PHP
彩虹外链网盘界面UI美化版超级简洁好看
彩虹外链网盘界面UI美化版超级简洁好看
106 0
|
6月前
|
图形学
如何在微信小游戏制作工具中做出好看的粒子效果?
如何在微信小游戏制作工具中做出好看的粒子效果?
105 1
|
11月前
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!(二)
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!
|
存储 Java API
一个精美的主界面窗口功能的设计和实现原来如此简单,万字肝爆
一个精美的主界面窗口功能的设计和实现原来如此简单,万字肝爆
113 0
|
图形学
如何做出好看的粒子效果
嗨!大家好,我是小蚂蚁。 微信小游戏制作工具提供了简单的粒子插件,使用起来简单明了(如果你用过Unity的粒子组件就知道这个有多简单明了了),虽然功能相对简单,可设置的属性也有限,但是我们仍然能够用它在游戏中做出漂亮的效果。 比如说在彩虹星球大冒险中,所有的爆炸都是使用的粒子效果来实现的。
133 0
|
开发者
不会美术如何做出好看的游戏
我不会美术怎么做游戏嘞?这也是一个经常有人问的问题,尤其是对于很多的技术而言,想要自己做个游戏,却苦于自己搞不定美术,上网找素材,东拼西凑看起来缺乏整体性,找人画的话价格昂贵,找美术合作的话,又不太容易找的到合适的。 那对于不会美术的人来讲,是不是就做不出游戏了?或者说就做不出好看的游戏了?当然不是。
137 0