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

效果图

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

效果图


前言

这次来说说侧拉菜单. 虽然现在手机越来越大, 但也不至于说直接把侧拉菜单全部展示出来, 因为很多时候, 它没有展示的必要. 这次会涉及的内容是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依旧是存在的, 这点要注意.


官方文档 这是用来实现右侧菜单的. 主要要实现两个部分, 就是布局文件中写的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, 自己实现就可麻烦了. 喜欢记得点赞, 有意见或者建议评论区见, 暗中关注我也是可以的~


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android先生

Android爬坑之旅:软键盘挡住输入框问题的终极解决方案

开发做得久了,总免不了会遇到各种坑。 而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑——来来来,我们慢慢看。

35620
来自专栏用户3030674的专栏

Android 性能优化——之控件的优化

  前面讲了图像的优化,接下来分享一下控件的性能优化,这里主要是面向自定义View的优化。

14630
来自专栏向治洪

Selector使用

Selector使用 Selector使其能够在不同的状态下更换某个View的背景图片。 <?xml version="1.0" encoding="utf-8...

23580
来自专栏李蔚蓬的专栏

3.1 Android控件架构

通常情况下,在Activity中使用setContentView()方法来设置一个布局,在调用该方法后,布局内容才真正显示出来。下面来看一下Android界面的...

11910
来自专栏项勇

笔记82 | 在ScrollView中加载 需要全部展开ListView

wifi列表需要动态加载更新 所有的wifi列表需要全部展开显示 直接把listView放到一个scrollview中放的话,listView只会显示一个ite...

8710
来自专栏Android点滴积累

Android动画:模拟开关按钮点击打开动画(属性动画之平移动画)

在Android里面,一些炫酷的动画确实是很吸引人的地方,让然看了就赏心悦目,一个好看的动画可能会提高用户对软件的使用率。另外说到动画,在Android里面支...

31670
来自专栏封碎

Android画图之Bitmap(二) 博客分类: Android Android

    前面一篇博文Android画图之Bitmap(一) 介绍了简单的把 Bitmap 画到屏幕上,以及缩放 Bitmap 以铺满屏幕。对 Bitmap 的操...

18910
来自专栏分享达人秀

CheckBox和RadioButton使用大全

本期先来学习Button的两个子控件,无论是单选还是复选,在实际开发中都是使用的较多的控件,相信通过本期的学习即可轻松掌握。 一、CheckBox ...

528100
来自专栏分享达人秀

自定义ProgressBar打造酷炫进度条

Android系统默认的ProgressBar往往都不能满足实际开发需要,一般都会开发者自定义ProgressBar。 在Android开发中,...

1.4K50
来自专栏developerHaoz 的安卓之旅

Android 一个酷炫的图表制作框架

最近项目中需要制作柱形图以及折线图,所以便在网上搜索了一下这方面的开源框架,最后找到了这个酷炫的框架,不仅支持各种各样的图形制作,包括折线图、柱形图、饼状图等,...

15420

扫码关注云+社区

领取腾讯云代金券