Material Design控件之FloatingActionButton「终于解决」

Material Design控件之FloatingActionButton「终于解决」这是我参与11月更文挑战的第18天,活动详情查看:2021最后一次更文挑战 在Material Design设计规范中,提出了一些控件的基本准则规范,我们来学习下Material Design中的控件

这是我参与11月更文挑战的第18天,活动详情查看:2021最后一次更文挑战

在Material Design设计规范中,提出了一些控件的基本准则规范,我们来学习下Material Design中的控件。

按钮由文字或图标组成,但是它们的目的是相同的,就是起到连接一种过渡效果,能清晰表达与点击展示后的内容关系。主要的控件类型:

  • 悬浮响应按钮(Floating action button), 点击后会产生墨水扩散效果的圆形按钮。
  • 浮动按钮(Raised button), 常见的方形纸片按钮,点击后会产生墨水扩散效果。
  • 扁平按钮(Flat button), 点击后产生墨水扩散效果,和浮动按钮的区别是没有浮起的效果。

我们看下几个实例图:

悬浮响应按钮(Floating action button): float_action_button

浮动按钮(Raised button): Raised button

扁平按钮(Flat button): 这里写图片描述

特点:
(1)、悬浮响应按钮
悬浮响应按钮是促进动作里的特殊类型。 是一个圆形的漂浮在界面之上的、拥有一系列特殊动作的按钮,这些动作通常和变换、启动、以及它本身的转换锚点相关。悬浮响应按钮有两种尺寸: 默认尺寸和迷你尺寸。 迷你尺寸仅仅用于配合屏幕上的其他元素制造视觉上的连续性。
(2)、浮动按钮
浮动按钮使按钮在比较拥挤的界面上更清晰可见。能给大多数扁平的布局带来层次感。
(3)、扁平按钮
扁平按钮一般用于对话框或者工具栏, 可避免页面上过多无意义的层叠。

#####使用技巧:
按钮类型应该基于主按钮、屏幕上容器的数量以及整体布局来进行选择。

首先,审视一遍你的按钮功能: 它是不是非常重要而且应用广泛到需要用上悬浮响应按钮?

然后,基于放置按钮的容器以及屏幕上层次堆叠的数量来选择使用浮动按钮还是扁平按钮。而且应该避免过多的层叠。

最后,检查你的布局。 一个容器应该只使用一种类型的按钮。 只在比较特殊的情况下(比如需要强调一个浮起的效果)才应该混合使用多种类型的按钮。

all

#####按钮类型特点 (1)、对话框中使用扁平按钮作为主要按钮类型以避免过多的层次叠加。
(2)、根据特定的布局来选择使用扁平按钮或者浮动按钮。对于扁平按钮,应该在内部四周留出足够的空间(内边距)以使按钮清晰可见。
(3)、如果需要一个对用户持续可见的功能按钮,应该首先考虑使用悬浮响应按钮。如果需要一个非主要、但是能快速定位到的按钮,则可以使用底部固定按钮。

下面我们就来看看如何在实际的开发中使用Material Design新增的FloatingActionButton。

1、控件所在包及环境配置:在gradle中添加依赖

 compile 'com.android.support:design:22.2.0'

所在包路径:

android.support.design.widget.FloatingActionButton

2、我们看下FloatingActionButton的定义:

	public class FloatingActionButton extends ImageView

发现它就是一个ImageView,所以我们可以按照ImageView的来使用。

FloatingActionButton的使用

1、我们新建一个工程,在xml布局文件中:

	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:fitsSystemWindows="true">
	    <android.support.design.widget.FloatingActionButton
	        android:id="@+id/fab"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:layout_alignParentBottom="true"
	        android:layout_alignParentRight="true"
	        android:layout_margin="@dimen/fab_margin"
	        android:src="@android:drawable/ic_input_add" />
	</RelativeLayout>

2、使用很简单,我们看下效果图:
(1)、Api16的模拟器: api16

(2)、Api17的模拟器: api17

我们发现在Api17的模拟器上才是正常效果。原因就是我们没设置app:borderWidth属性,设置即可。

3、FloatingButton自定义属性:

  • app:backgroundTint – 设置FAB的背景颜色。
  • app:rippleColor – 设置FAB点击时的背景颜色。
  • app:borderWidth – 该属性尤为重要,如果不设置0dp,那么在4.1的sdk上FAB会显示为正方形,而且在5.0以后的sdk没有阴影效果。所以设置为borderWidth=”0dp”。
  • app:elevation – 默认状态下FAB的阴影大小。
  • app:pressedTranslationZ – 点击时候FAB的阴影大小。
  • app:fabSize – 设置FAB的大小,该属性有两个值,分别为normal和mini,对应的FAB大小分别为56dp和40dp。
  • src – 设置FAB的图标,Google建议符合Design设计的该图标大小为24dp。
  • app:layout_anchor – 设置FAB的锚点,即以哪个控件为参照点设置位置。
  • app:layout_anchorGravity – 设置FAB相对锚点的位置,值有 bottom、center、right、left、top等。

补充,我们在使用app自定义属性的时候,不要忘记添加命名空间。

xmlns:app="http://schemas.android.com/apk/res-auto"

至此,FloatingActionButton基本使用介绍完毕。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
转载请注明出处: https://daima100.com/13289.html

(0)

相关推荐

  • git pll_git的push和pull

    git pll_git的push和pull讲师简介:杨杰,PalletOne开发工程师,分布式存储DAG及内存管理模块支持毕业于北京化工大学计算机专业。

    2023-07-13
    135
  • Python函数初探:定义和调用

    Python函数初探:定义和调用Python函数是一组封装好的、可重用的、相互独立的代码块。具体来说,函数可以接收参数,执行一些代码,然后返回结果。在Python中定义和调用函数都非常简单,本文将从以下几个方面对Python函数进行详细的介绍。

    2024-02-07
    88
  • dnf史诗碎片(dnf110版本史诗碎片)

    dnf史诗碎片(dnf110版本史诗碎片)

    2023-09-02
    214
  • 未来数据库应具备什么核心能力?

    未来数据库应具备什么核心能力?上周六,我们开启了 The Future of Database 系列 的第一期直播,我司 CTO 黄东旭及 Engineering VP 申砾畅聊了“未来的数据库会是什么样?”这个颇具想象力的话题…

    2023-02-18
    164
  • MongoDB学习笔记:副本集[通俗易懂]

    MongoDB学习笔记:副本集[通俗易懂]本文更新于2022-01-08,使用MongoDB 4.4.5。 单台服务器下创建副本集 确保/data/db目录存在且当前系统用户有读写权限。例如(需根据实际情况设置权限): su root mkd

    2023-05-05
    137
  • MySQL前缀索引「建议收藏」

    MySQL前缀索引「建议收藏」有时候需要索引很长的字符字段列,这会增加索引的存储空间以及降低索引的查询效率,一种策略是可以使用哈希索引,还有一种就是使用前缀索引。 前缀索引是选择字符列的前n个字符作为索引,这样可以大大节约索引空…

    2023-03-04
    154
  • mysql使用技巧_MySQL常用命令

    mysql使用技巧_MySQL常用命令上篇文章介绍了如何创建合适的MySQL索引,今天再一块学一下如何更规范、更合理的使用MySQL?
    合理规范的使用MySQL,可以大大减少开发工作量和线上问题,并提升SQL查询性能。
    我精心总结了这16

    2023-05-29
    142
  • http叫什么协议_HTTP请求报文

    http叫什么协议_HTTP请求报文最近一段时间在空闲之余拜读了一下《图解HTTP协议》,收货颇丰。以前不懂的地方在读完这本书之后,豁然开朗。于是花了一些时间总结一下,其中我也查阅了一些其他资料来补充进去,希望这篇文章可以给大家带来帮助。如果各位觉得我写的还不错的话,还望大家多多收藏点在支持哦! TCP/IP体系…

    2023-07-27
    123

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注