UI设计—Material Design实战(3)之悬浮按钮和可交互提示

最新推荐文章于 2025-05-28 15:00:37 发布
最新推荐文章于 2025-05-28 15:00:37 发布
阅读量1.2k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： android 文章标签： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43468891/article/details/91878100

UI设计—Material Design实战(3)之悬浮按钮和可交互提示

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

https://blog.youkuaiyun.com/qq_43468891/article/details/90623986

​ Material Design中有一条非常重要的设计思想，它就是立面设计。在官方给出的实例中，最简单的且最具代表性的就是悬浮按钮了。

FloatingActionButton

​ FloatingActionButton 是Design Support库中提供的一个控件，这个控件可以帮助我们比较轻松地实现悬浮按钮的效果，下面我们来具体实现吧。首先需要准备一张图标，然后修改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:addStatesFromChildren="false">

        <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" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            app:backgroundTint="#2EB634"
            app:elevation="8dp" />
    </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>

其中layout_gravity属性指定将这个控件放置在屏幕的右下角，app:elevation属性是给FloatingActionButton指定一个高度值，高度值越大投影的范围就越大，但是投影的效果越淡，反之高度值越小投影的范围就越小，但是投影的效果越浓。

接下来需要处理点击事件FloatingActionButton，修改MainActicity中的代码：

package com.example.materialtext;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
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.view.View;
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);
        final 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;
                }
            });

        }
        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,
                        "This is Button",Toast.LENGTH_LONG).show();
            }
        });
    }
    @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;
    }
}

​ 其实FloatingActionButton只是一个普通的按钮没有什么特殊用法，当然也是Android开发的一个悬浮按钮。

Snackbar

Snackbar允许在提示中加入一个可交互按钮，当用户点击一个按钮时还可以进行一些额外的逻辑操作，接下来我们看看他的用法吧。修该:MainActivity中的代码：

package com.example.materialtext;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
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.view.View;
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);
        final 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;
                }
            });

        }
        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Snackbar.make(view,"Data deleted",Snackbar.LENGTH_SHORT)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this,"Data restored",
                                        Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();
            }
        });
    }
    @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;
    }
}

​ 这里调用了Snackbar的mack()方法来创建一个Snackbar对象,make()方法的第一个参数需要传入一个View，只要是当前界面布局的任意一个View都可以，Snackbar会使用这个View来自动查找最外层的布局，用于展示Snackbar。第二个参数是Snackbar中显示的内容，第三个参数是Snackbar显示的时长。

​ 紧接着这里调用了一个setAction()方法来设置一个动作，从而让Snackbar不仅仅是一个提示，而是可以和用户进行交互的，简单一点，我们在动作按钮的点击事件里面弹出一个Toast提示，最后用show()方法让Snackbar显示出来。效果如下：

在这里插入图片描述

这里有一个bug，就是这个Snackbar把我们的悬浮按钮给遮住了，这时我们可以采用CoordinatorLayout解决。

CoordinatorLayou

CoordinatorLayou可以说是一个加强版FraneLayout,这个布局也是由Design Support库提供的。其使用方法非常简单，只需要将原来的FraneLayout替换掉就行了。修改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">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:addStatesFromChildren="false">

        <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" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            app:backgroundTint="#2EB634"
            app:elevation="8dp" />
    </android.support.design.widget.CoordinatorLayout>

    <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>

效果如下：
在这里插入图片描述
​ 可以看到，悬浮按钮自动向上偏移了Snackbar的同等高度，从而确保不会被遮挡住，当Snackbar消失的时候，悬浮按钮会自动向下偏移回到原来的位置。

​ 本节内容就到这里了，下一节：UI设计—Material Design实战(4)之卡片式布局

Android kotlin系列讲解（实战篇）最佳的UI体验 - Material Design
彬sir哥的博客
07-28 1940
UI体验 - Material Design
12-Material Design实战(UI)
m0_46355846的博客
03-19 3410
最佳的UI体验,Material Design实战 什么是Material Design 精美的UI设计语言 学习Material Design中的控件 1. Toolbar 还记得我们每次打开的程序的标题栏吗？啊对，那不是toolbar做的.但是,那是actionbar做的,Toolbar可以说是Actionbar的升级版了。Toolbar不仅有Actionbar的所有功能,而且还更加灵活. Actionbar是默认显示的 其实这是在项目中指定的主题来显示的 <manifest xmlns:andr
一个material design风格的悬浮button
04-25
类似iPhone辅助悬浮球button，点击弹出多个圆形button
android悬浮按钮设计,说说 Android 的 Material Design 设计（三）——悬浮按钮与交互式提示栏...
weixin_33459498的博客
05-26 271
Material Design 的设计理念是应用程序的界面应该是有立体效果的，立体效果最具代表性的就是悬浮按钮啦O(∩_∩)O~1 悬浮按钮(FloatingActionButton)FloatingActionButton 是 Design Support 库中提供的控件，使用它就可以实现悬浮按钮效果。在 drawable 目录下新增一张图标(tip.png)，然后修改布局文件：xmlns:ma...
实现iOS风格的自适应悬浮按钮教程
最新发布
weixin_42577243的博客
05-28 1018
虚拟悬浮按钮是一种用户界面设计元素，模仿了真实世界中的物理按钮体验。它不固定于屏幕的特定位置，能够自动靠边并浮动在应用程序的界面上方。这种设计为用户提供了更加直观的交互方式，同时也为设计师在布局和功能上提供了灵活性。在iOS开发中，UIView是构建用户界面的基础。它是一个矩形区域，可以处理自己的显示和事件处理。要自定义一个UIView，我们首先需要了解它的基本属性和方法。frame：这个矩形属性定义了视图在父视图坐标系统中的位置和大小。bounds。
【亲测免费】 探索优雅的SwiftUI悬浮按钮：FloatingButton
gitblog_00096的博客
05-16 519
探索优雅的SwiftUI悬浮按钮：FloatingButton 在构建iOS应用时，简洁而高效的设计元素是成功的关键。今天，我们向您推荐一款精心打造的SwiftUI开源库——FloatingButton，它是一款可高度自定义的悬浮菜单按钮，能够为您的应用添加一道亮丽的风景线。 项目介绍 FloatingButton 是由Exyte开发的一款基于SwiftUI的小巧组件，旨在提供一种优雅的方式来展现...
利用UIWindow创建悬浮按钮
Tai Chi's Blog
01-03 1070
创建全局属性@property(strong,nonatomic)UIWindow *giftWindow; @property(strong,nonatomic)UIButton *giftBtn; @property (strong,nonatomic) UIImageView *giftImgView;创建按钮,window,imageView- (void)giftButton { _
悬浮按钮显示与隐藏交互效果、工具栏展开收起交互效果、导航栏中切换账号效果、步骤流程切换效果
WW_998的博客
07-03 1361
悬浮按钮显示与隐藏交互效果 实现：当点击悬浮按钮时，按钮移动后以一定效果弹出选项面板，单击选项面板时原路返回。 添加矩形框（当中web），置于底层，填充颜色，将工具符号转换为动态面板“悬浮按钮”，菜单为“弹出选项” 将弹出选项设置为悬浮按钮的一个状态“弹出选项”，居中，按钮为状态“工具按钮” 3.在工具按钮处添加热区覆盖，点击热区，设置交互效果，使其先移动到中间，等待再以一定效果切换动态面板状态 4.弹出选项的交互效果设置 5.预览 工具栏展开收起交互效果 将要展开的内容形成组
【Android】UI拓展之滑动菜单、悬浮按钮、CoordinatorLayout布局等
Patrick_yuxuan的博客
08-31 1506
是一个特殊的布局容器，用于在屏幕的边缘创建一个可以滑动的菜单。是 Android 中一个常用的控件，用于在界面上显示卡片样式的布局。它提供了一个带阴影和圆角效果的容器，使得内容更加美观。内的一个视图，提供了侧滑菜单的实现。它用于显示应用的导航菜单，通常包含一个菜单列表或多个菜单项。属性用于设置控件的阴影效果，即控件与其父布局的相对高度。实现复杂的交互效果，比如滚动联动、浮动操作按钮的显示/隐藏等。是 Android 提供的一个高级布局容器，它扩展了。的值，可以改变控件的阴影强度，从而增强其视觉层次感。
Android使用Material Design实现悬浮按钮
大山喵写博客的地方
08-22 1362
前言 ​ 本文是对《Android第一行代码》第十二章《最佳UI体验——Material Design实战》中关于悬浮按钮实现的学习和记录，主要内容包括—— FloatingActionButton控件 Snackbar控件 CoordinatorLayout布局 其实关于悬浮按钮的实现十分简单，Design Support库中做了大量的封装，只需要运用以上3个基础控件就可以完成一个最简单的...
实现Material Design风格的悬浮按钮功能
Material Design风格的悬浮按钮是一种在移动应用和网页中越来越常见的UI组件，它不仅提供美观的视觉效果，更提升了用户的交互效率。在实现时，开发者会关注以下几点： 1. **设计规范遵循**：在设计时，遵循Material...
高级UI-FloatingActionButton
cj5785
04-06 2466
FloatingActionButton为悬浮按钮，就是常见的那种悬浮在控件上，可以调出其他菜单的按钮 FloatingActionButton的特有属性 app:backgroundTint 按钮的背景颜色 app:backgroundTintMode 按钮背景颜色的模式 app:borderWidth 该属性如果不设置0dp，那么在4.x的sdk上FAB会显示为正方形，而且在5.0以后的sdk...
悬浮按钮（实现代码）
Natty的博客
08-09 2941
一、倒依赖 //悬浮按钮 compile 'com.android.support:design:26.1.0' 二、在Xml中 &lt;android.support.design.widget.FloatingActionButton android:id="@+id/mXuanFu" android:layout_width="wrap_content" android:layou...
定制悬浮动作按钮：打破传统，释放创新
gitblog_00049的博客
05-23 388
定制悬浮动作按钮：打破传统，释放创新 项目介绍 在移动应用开发中，【Custom Floating Action Button】是一个非常出色的库，它为传统的Google支持库中的悬浮动作按钮提供了更加丰富和个性化的替代方案。这个开源项目由Robert Levonyan创建，其目标是让开发者能够轻松实现自定义的、带有文本的浮动按钮，以提升界面的交互性和美观度。 项目技术分析 该项目基于Kotlin...
Android实现悬浮按钮的合理的可交互提示
JunLi_YNU的博客
08-08 755
Android实现悬浮按钮的合理的可交互提示使用FloatingActionButton,Snackbar,CoordinatorLaout的合并使用。这是三个分别是悬浮按钮控件、可交互提示、能监听布局中所有控件并作出合理响应的布局。 Android实现悬浮按钮的合理的可交互提示的实现 1.悬浮按钮的实现FloatingActionButton &lt;android.support.de...
react+umi+ant 后台消息提示悬浮框
JeffanChen的博客
08-14 1320
这次主要写的就是在components/GlobalHeader/AvatarDropDown.jsx和utils/axios.js 初始状态 报错后效果 点击铃铛后，右上角数字消失 由于我这边ERROR返回的时候设置了相应的格式，所以你们直接套用可能并不会有这种效果 点击清除后 并且该消息提示可以一直悬浮于屏幕右上角位置，个人感觉效果挺满意的 AvatarDropDown.jsx import { Avatar, Icon, Menu, Spin, Badge,Button, message, M
Antd表格鼠标悬浮某一行显示操作按钮
weixin_40476977的博客
03-16 1463
【代码】Antd表格鼠标悬浮某一行显示操作按钮。
小小图标功能大，10个最佳Material Design 图标资源你不可错过
aimeeth的博客
05-24 8769
Material design至发布以来，已然形成了其鲜明的设计风格，并渐渐成为统一 Android Mobile、Android Tablet、Desktop Chrome 等全平台设计语言规范。基于这样的趋势，设计师们对 Material Design 的青睐程度以及运用熟练度也越来越明显了。Material design能给用户带来最贴近真实场景的使用体验，实现简洁直观的效果，这一切都和设计...
Material icons 全图标一览
热门推荐
boywcx的博客
12-17 8万+
只因网站太难打开，所以在这放预览图给各位客官解解馋 icon地址：https://material.io/tools/icons/?icon=sd_storage&amp;style=baseline  
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值