UI设计—Material Design实战（2）之滑动菜单

最新推荐文章于 2023-08-27 20:55:19 发布
最新推荐文章于 2023-08-27 20:55:19 发布
阅读量455 收藏 1
点赞数 1
分类专栏： android 文章标签： android ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43468891/article/details/90623986
版权

UI设计—Material Design实战（2）之滑动菜单

上一节:UI设计—Material Design实战之Toolbar

https://blog.csdn.net/qq_43468891/article/details/90582267

DrawerLayout

本节效果：

在这里插入图片描述
滑动菜单可以说是Material Design中最经常见到的效果之一了，许多应用中都有滑动菜单的功能。谷歌提供了DrawerLayout控件就可以实现滑动菜单的功能。DrawerLayout的用法，首先它是一个布局，在布局中允许放入两个直接子控件，第一个控件是主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容。因此对activity_main.xml中的代码进行修改（在第一节UI设计—Material Design实战（1）之Toolbar中的代码进行修改）：

<?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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </FrameLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:layout_gravity="start"
        android:text="This is menu"
        android:textSize="30sp"
        android:background="#FFF"/>

</android.support.v4.widget.DrawerLayout>

​ 这里最外层的控件使用了DrawerLayout，这个控件是由support-v4库提供的。第二个子控件需要注意，android:layout_gravity这个属性是必须指定的，，因为我们要告诉DrawerLayou滑动菜单是在屏幕的左边还是右边，left是左边，right是右边，start表示根据系统语言进行判断。

Material Design建议是在Toolbar的最左边加入一个导航按钮点击了按钮也会将滑动菜单的按钮展示出来。

在MainActivity中的代码，首先要添加一张导航按钮图标

package com.example.materialtext;

import android.os.Bundle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

/**
 * @author J.Min
 */
public class MainActivity extends AppCompatActivity {
    
    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mDrawerLayout=findViewById(R.id.drawer_layout);
        ActionBar actionBar = getSupportActionBar();
        if(actionBar !=null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        }
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item){
        switch (item.getItemId()) {
            case android.R.id.home:
            mDrawerLayout.openDrawer(GravityCompat.START);
            break;
            case R.id.backup:
                Toast.makeText(this, "You clicked Backup", Toast.LENGTH_LONG).show();
            case R.id.delete:
                Toast.makeText(this, "You clicked Delete", Toast.LENGTH_LONG).show();
            case R.id.settings:
                Toast.makeText(this, "You clicked Settings", Toast.LENGTH_LONG).show();
                break;
            default:
        }
        return true;
    }

}

​ 这里首先调用了findViewById（）方法得到了DrawerLayout的是例，然后调用了getSupprtAtionBar()方法得到了ActionBar的实例。接着调用ActionBar的setDisplayHomeAsUpEnabled()方法让导航按钮显示出来，又调用了setHomeAsUpIndicator()方法来设置一个导航按钮。

​ 接下来在onOptionsItemSelected()方法中对HomeAsUp按钮进行点击事件处理，HomeAsUp按钮的id永远都是android.R.id.home。

NavigationView

这一部分就是优化我们的滑动菜单，这里我们要使用的控件是NavigationView，它是Desigh Support库提供的一个控件，既然是Desigh Support库提供的，我们就需要将这个库引用到我们的项目中。打开app/build.dradle文件，在dependencies闭包中添加以下内容：

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    implementation 'com.android.support:design:28.0.0'
    implementation 'de.hdodenhof:circleimageview:2.1.0'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

​ 这里添加了两行依赖关系，第一行是Design Support 库，第二行是一个开源项目CircleImageView。CircleImageView的项目地址是：http://github.com/hdodenhof/CircleImageView。

​ 在开始NavigationView之前，我们先准备准备好两个东西，headerLayout和menu。我们先来准备menu，它是用来在NavigationView中显示具体的菜单项的。这里需要准备好几张图片作为按钮的图标，并将他们放在drawable目录下。然后右击menu文件夹→New→Mew resourc file,创建一个nav_menu.xml文件，代码如下：

<?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/nac_call"
        android:icon="@drawable/nav_call"
        android:title="Call"/>
    <item
        android:id="@+id/nac_friends"
        android:icon="@drawable/nav_friends"
        android:title="Friends"/>
    <item
        android:id="@+id/nac_location"
        android:icon="@drawable/nav_location"
        android:title="Location"/>
    <item
        android:id="@+id/nac_mail"
        android:icon="@drawable/nav_mail"
        android:title="Mail"/>
    <item
        android:id="@+id/nac_task"
        android:icon="@drawable/nav_task"
        android:title="Tasks"/>

    </group>
</menu>

​ 我们首先在

中嵌套了一个标签，然后将group的checkableBehavior属性指定为single。group表示一个组，group的checkableBehavior指定single表示组中所有菜单为单选。

​ headerLayout是一个可以随意定制的布局，我们就在这里放置头像，用户名，邮箱地址。这里要准备一张图片把它放在drawable目录下。这里我把格式设置为200*200。让后右击layout文件夹→New→Layout resource file,创建一个nav_headr.xml文件。修改其中代码：

<?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="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/main"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="MaterialText@QQ.com"
        android:textColor="#FFF"
        android:textSize="14sp"/>

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/mail"
        android:text="JMin"
        android:textColor="#FFF"
        android:textSize="14sp"/>

</RelativeLayout>

​ 其中最外层是一个RelaitiyeLayout,我们将它的宽度为match_parent，高度为180dp，CircleImageView是一个用于将图片圆形化的控件。

​ 现在使用NavigationView控件修改activity_main.xml的代码：

<?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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </FrameLayout>

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

</android.support.v4.widget.DrawerLayout>

​ 这里我们把之前的TextView换成了NavigationView,通过app:menu和app:headerLayout属性将我们准备好的menu和headerLayou设置进去，这样我们的NavigationView定义就完成了。不过我们还要去处理菜单项的点击事件，修改MainActivity中的代码：

package com.example.materialtext;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

/**
 * @author J.Min
 */
public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mDrawerLayout=findViewById(R.id.drawer_layout);
        NavigationView navView= (NavigationView) findViewById(R.id.nav_view); 
        ActionBar actionBar = getSupportActionBar();
        if(actionBar !=null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
            navView.setCheckedItem(R.id.nac_call);
            navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected( MenuItem item) {
                    mDrawerLayout.closeDrawers();
                    return false;
                }
            });
        }
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item){
        switch (item.getItemId()) {
            case android.R.id.home:
            mDrawerLayout.openDrawer(GravityCompat.START);
            break;
            case R.id.backup:
                Toast.makeText(this, "You clicked Backup", Toast.LENGTH_LONG).show();
            case R.id.delete:
                Toast.makeText(this, "You clicked Delete", Toast.LENGTH_LONG).show();
            case R.id.settings:
                Toast.makeText(this, "You clicked Settings", Toast.LENGTH_LONG).show();
                break;
            default:
        }
        return true;
    }

}

这里先获取到了NavigationView的实例，让后调用它的setCheckedItem()方法将Call菜单设置为默认选中。接着调用了setNavigationItemSelectedListener()方法来设置一个菜单选中事件的监听器，当点击任意菜单选项时就会回调到onNavigationItemSelected()方法中。

这节的内容就到这里了，下一节讲UI设计—Material Design实战（3）之悬浮按钮和可交互提示。
https://blog.csdn.net/qq_43468891/article/details/91878100

Tyan0033
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MaterialDesign学习笔记2：TabLayout+ViewPaper实现滑动切换
tangvim的流媒体开发小屋
09-28 787
TabLayout+ViewPaper实现滑动切换。 涉及到的控件： 1. TabLayout 2. ViewPaper
MaterialDesign风格下拉菜单jquery插件.zip
07-11
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
Material Design Lite组件之菜单
骑着代码去流浪
05-30 707
1.介绍Material Design Lite（MDL）菜单组件是一个用户界面元素，允许用户从多个选项中选择一个。 选择通常会导致动作启动，设置更改或其他可观察的效果。 菜单选项总是以两个或更多的集合呈现，并且可以根据需要以编程方式启用或禁用选项。 当用户被要求在一系列选项中进行选择时会出现菜单，并且通常在做出选择后被收回。菜单是用户界面中已建立但非标准化的功能，并允许用户进行选择以指导软件的活...
前端项目实战叁佰贰拾肆material ui-带有菜单的应用栏
qq_41632427的博客
08-27 50
前端
【Android】 _UI设计_图片滑动样式
cungudafa的博客
11-30 704
目的： ImageSwitcher控件控制图片滑动样式 效果： 新建AndroidStudio项目 xml样式 imageSwitcherActivity.xml &amp;amp;amp;amp;amp;lt;?xml version=&amp;amp;amp;amp;quot;1.0&amp;amp;amp;amp;quot; encoding=&amp;amp;amp;amp;quot;utf-8&amp
WPF设计UI框架：MaterialDesign
最新发布
11-21
MaterialDesignDemo是官方提供的Demo，提供的各式各样的UI实现示例和代码。 比如你要用某个按钮的样式，打开左侧菜单选择button,找到想要的按钮，点右下角复制代码即可添加到你的项目中。
Android开发MaterialDesign设计风格UI示例演示集
06-01
Android开发MaterialDesign设计风格UI示例演示集
WPF MaterialDesign开源免费UI组件的简单使用
08-20
Material Design是一个很好用的WPF样式库和控件集，对于稍微有点WPF基础的开发者非常友好。简单好用是我的第一感：直接使用NuGet就可以获取到资源包，通过其官方的DemoApp(MaterialDesignDemo)很容易使用控件和样式...
Material Design 暗色主题设计指南.docx
06-10
一份超全面的Material Design 暗色主题设计指南。 最近，Material Design 中新增了关于暗色主题的设计规范。暗色主题（Dark theme）是指在 UI 界面中使用大面积的深色来构成界面的一种设计，它是产品默认主题的一种...
tutorial-react-tree-menu:带有MaterialUI和TypeScript的示例多级ReactJS和React-Router树菜单
05-27
教程：具有MaterialUI和TypeScript的ReactJS多级导航菜单 使用MaterialUI和TypeScript构建ReactJS多层导航菜单 作者提示 如果单个阶段具有相同文件的多个变体，则应将其嵌入创建场变体 {FileName} .tsx->最终结果{FileName} -v {versionNumber} -version-description.tsx ... etc 这允许将相同文件的多个版本嵌入到文章中 中号代码嵌入： 阶段1 第二阶段 第三阶段 阶段4
MaterialDesign UI
05-03
MaterialDesign的一个小Demo，各位看管可以去我博客看文章
Material Design风格侧边栏UI设计
12-13
这是一款非常实用的Material Design风格侧边栏UI设计效果。该Material Design风格侧边栏支持4种侧边栏定位方式和4种不同的侧边栏主题效果。并且侧边栏的顶部还可以使用图片和颜色两种模式。
Material Design风格侧边栏菜单变形效果
12-13
这是一款使用CSS3和少量jQuery代码来制作的Material Design风格侧边栏菜单变形效果。该侧边栏菜单开始时是一个汉堡包按钮，当用户点击该按钮之后，按钮会变形展开为右侧固定的侧边栏菜单。
WPF项目模板-抽屉式菜单-Material Design UI-现代风格
07-07
这是一个WPF项目的模板，运用了现代风格的UI，抽屉式的主菜单，以及谷歌的Material Design的套件。
让你的布局更加酷炫——Material Design滑动菜单
PushYE的博客
06-24 878
1
Material-UI menuItem和NavLink组合使用时的样式控制
weixin_33705053的博客
11-02 575
最近在使用material-ui做左侧导航的时候遇到了一点难缠的小问题，由于传统中a标签包裹子元素组成链接的思维习惯，加上MenuItem标签不能包裹子元素，导航部分一开始采用NavLink包裹MenuItem的结构： [/*data*/].map(link => <NavLink key={link.ic...
UI——Material Design设计之滑动菜单详解
yangxun0727l的博客
05-09 1443
滑动菜单           滑动菜单是Material Design 中最常见的效果之一。           所谓的滑动菜单就是将一些菜单选项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动的方式将菜单显示出来。这种方式既节省了屏幕空间，又实现了非常好的动画效果，是Material Design中推荐的做法。               DrawerLayout
【Material Design视觉设计语言】UI组件设计（九）：菜单
08-28 2260
作者：郭孝星 微博：郭孝星的新浪微博 邮箱：allenwells@163.com 博客：http://blog.csdn.net/allenwells Github：https://github.com/AllenWells 菜单是临时的一张纸（paper），由按钮（button）、动作（action）、点（pointer）或者包含至少两个菜单项的其他控件触发。每一个菜单项是一个离散的选
material design设计
08-13
Material Design是一种由Google推出的用户界面（UI）设计语言，旨在提供一种统一的设计风格和规范，适用于各种不同的平台和设备。 Material Design的设计思想来源于现实世界的材料和纸张等物质。它强调使用虚拟的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值