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

sean_yang

发布于 2018-09-04 11:22:44

6610

发布于 2018-09-04 11:22:44

文章被收录于专栏：Sorrower的专栏 Sorrower的专栏Sorrower的专栏

效果图

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

效果图

前言

这次来说说侧拉菜单. 虽然现在手机越来越大, 但也不至于说直接把侧拉菜单全部展示出来, 因为很多时候, 它没有展示的必要. 这次会涉及的内容是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, 自己实现就可麻烦了. 喜欢记得点赞, 有意见或者建议评论区见, 暗中关注我也是可以的~

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.08.02 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

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

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

前言

DrawerLayout

Toolbar

fragment

NavigationView

CircleImageView

最后

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐