Android踩坑日记:FloatingActionButton的设置大小问题

2024-04-26 11:58

本文主要是介绍Android踩坑日记:FloatingActionButton的设置大小问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

FloatingActionButton(FAB) 是 Android 5.0 新特性——Material Design 中的一个控件,是一种悬浮的按钮。FloatingActionButton 是 ImageView 的子类,因此它具备ImageView的全部属性

  • 基本使用

1,需要在gradle文件中先注册依赖:

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

2,FAB基本属性

  <android.support.design.widget.FloatingActionButtonandroid:id="@+id/fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="20.0dip"android:onClick="click"android:src="@mipmap/ic_launcher"app:backgroundTint="#30469b"app:borderWidth="0.0dip"app:elevation="5.0dip"app:fabSize="normal"app:layout_anchor="@id/container"app:layout_anchorGravity="right|bottom"app:pressedTranslationZ="10.0dip"app:rippleColor="#a6a6a6" />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。
android:src - 设置FAB的图标,Google建议符合Design设计的该图标大小为24dp。
app:layout_anchor - 设置FAB的锚点,即以哪个控件为参照点设置位置。
app:layout_anchorGravity - 设置FAB相对锚点的位置,值有 bottom、center、right、left、top等。

3,我的问题
咋一看,就是把FloatingActionButton添加到布局文件设置好位置和图标就行,在项目中,设计给了这样的切图标注。

项目中的浮动按钮

然后我把那个大笔的切图放进FloatingActionButton中时,发现现实不对劲
这里写图片描述

图片严重缩小了我的xml代码

    <android.support.design.widget.FloatingActionButtonandroid:id="@+id/m_main_fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="16dp"android:src="@drawable/m_main_new_article_icon"app:borderWidth="0.0dip"app:fabSize="normal"app:backgroundTint="@color/m_main_green"android:clickable="true"app:layout_anchor="@id/m_main_recycleview"app:layout_anchorGravity="bottom|right"/>

后来查阅Material Design规范http://wiki.jikexueyuan.com/project/material-design/components/buttons-floating-action-button.html ,https://material.io/guidelines/components/buttons-floating-action-button.html#,
可以看出官方推荐中间建议使用24x24dp的小图,如加号,分享,叉叉等
根据谷歌的设计规范,drawable的尺寸应该是24dp。

fabSize=normal
fabSize=mini

本来以为设计给的图不对,后来发现及时设计将那个笔的图切成24dp*24dp,我放进去页会显得很小,不好看,后来经过师父帮忙发现设置android:scaleType=”center”会把中间的小图放到最大。

 <android.support.design.widget.FloatingActionButton
        android:id="@+id/m_main_fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="16dp"android:src="@drawable/m_main_new_article_icon"app:borderWidth="0.0dip"app:fabSize="normal"app:backgroundTint="@color/m_main_green"android:clickable="true"app:layout_anchor="@id/m_main_recycleview"app:layout_anchorGravity="bottom|right"android:scaleType="center"/><!--  添加android:scaleType="center"会把中间的小图放到最大-->

效果图:

添加android:scaleType="center"会把中间的小图放到最大

官方建议,使用FloatingActionButton 结合 CoordinatorLayout 使用,即可实现悬浮在任意控件的任意位置。同时可以实现与CoordinatorLayout 内的其他view协调动画。

  • 协调动画
    暂更…
    查阅资源:
    1,Floating Action Button-Android M新控件
    2,【Android - 控件】之MD - FloatingActionButton的使用
    3,Android FloatingActionButton(FAB) 悬浮按钮

这篇关于Android踩坑日记:FloatingActionButton的设置大小问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/937529

相关文章

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Web服务器-Nginx-高并发问题

《Web服务器-Nginx-高并发问题》Nginx通过事件驱动、I/O多路复用和异步非阻塞技术高效处理高并发,结合动静分离和限流策略,提升性能与稳定性... 目录前言一、架构1. 原生多进程架构2. 事件驱动模型3. IO多路复用4. 异步非阻塞 I/O5. Nginx高并发配置实战二、动静分离1. 职责2

解决升级JDK报错:module java.base does not“opens java.lang.reflect“to unnamed module问题

《解决升级JDK报错:modulejava.basedoesnot“opensjava.lang.reflect“tounnamedmodule问题》SpringBoot启动错误源于Jav... 目录问题描述原因分析解决方案总结问题描述启动sprintboot时报以下错误原因分析编程异js常是由Ja

Android协程高级用法大全

《Android协程高级用法大全》这篇文章给大家介绍Android协程高级用法大全,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友跟随小编一起学习吧... 目录1️⃣ 协程作用域(CoroutineScope)与生命周期绑定Activity/Fragment 中手

MySQL 表空却 ibd 文件过大的问题及解决方法

《MySQL表空却ibd文件过大的问题及解决方法》本文给大家介绍MySQL表空却ibd文件过大的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录一、问题背景:表空却 “吃满” 磁盘的怪事二、问题复现:一步步编程还原异常场景1. 准备测试源表与数据

解决Nginx启动报错Job for nginx.service failed because the control process exited with error code问题

《解决Nginx启动报错Jobfornginx.servicefailedbecausethecontrolprocessexitedwitherrorcode问题》Nginx启... 目录一、报错如下二、解决原因三、解决方式总结一、报错如下Job for nginx.service failed bec

SysMain服务可以关吗? 解决SysMain服务导致的高CPU使用率问题

《SysMain服务可以关吗?解决SysMain服务导致的高CPU使用率问题》SysMain服务是超级预读取,该服务会记录您打开应用程序的模式,并预先将它们加载到内存中以节省时间,但它可能占用大量... 在使用电脑的过程中,CPU使用率居高不下是许多用户都遇到过的问题,其中名为SysMain的服务往往是罪魁

SQL Server 查询数据库及数据文件大小的方法

《SQLServer查询数据库及数据文件大小的方法》文章介绍了查询数据库大小的SQL方法及存储过程实现,涵盖当前数据库、所有数据库的总大小及文件明细,本文结合实例代码给大家介绍的非常详细,感兴趣的... 目录1. 直接使用SQL1.1 查询当前数据库大小1.2 查询所有数据库的大小1.3 查询每个数据库的详

MySQ中出现幻读问题的解决过程

《MySQ中出现幻读问题的解决过程》文章解析MySQLInnoDB通过MVCC与间隙锁机制在可重复读隔离级别下解决幻读,确保事务一致性,同时指出性能影响及乐观锁等替代方案,帮助开发者优化数据库应用... 目录一、幻读的准确定义与核心特征幻读 vs 不可重复读二、mysql隔离级别深度解析各隔离级别的实现差异

C++ vector越界问题的完整解决方案

《C++vector越界问题的完整解决方案》在C++开发中,std::vector作为最常用的动态数组容器,其便捷性与性能优势使其成为处理可变长度数据的首选,然而,数组越界访问始终是威胁程序稳定性的... 目录引言一、vector越界的底层原理与危害1.1 越界访问的本质原因1.2 越界访问的实际危害二、基