【安卓学习之FloatingActionButton】按钮太小

█ FloatingActionButton

在 AndroidX Material 库中,fabSize 默认aut0,系统会根据屏幕宽度自动选择尺寸:

屏幕宽度 ≥ 470dp‌:使用 ‌normal‌ 尺寸 (‌56dp × 56dp‌)。这是手机和平板最常见的情况。

‌屏幕宽度 < 470dp‌:使用 ‌mini‌ 尺寸 (‌40dp × 40dp‌)。这通常适用于非常小的屏幕或特定布局场景。

c 复制代码
    <attr name="fabSize">
      <!-- A size which will change based on the window size. -->
      <enum name="auto" value="-1"/>
      <!-- The normal sized button. -->
      <enum name="normal" value="0"/>
      <!-- The mini sized button. -->
      <enum name="mini" value="1"/>
    </attr>
c 复制代码
<dimen name="design_fab_border_width">0.5dp</dimen>
<dimen name="design_fab_elevation">6dp</dimen>
<dimen name="design_fab_image_size">24dp</dimen>
<dimen name="design_fab_size_mini">40dp</dimen>
<dimen name="design_fab_size_normal">56dp</dimen>
<dimen name="design_fab_translation_z_hovered_focused">6dp</dimen>
<dimen name="design_fab_translation_z_pressed">6dp</dimen>

█ 按钮太小

设备配置

屏幕-分辨率(px):360 ✘ 640(不包含‌系统导航栏等系统 UI 占据的区域)

应用-分辨率(px):360 ✘ 583

应用-分辨率(dp):303 ✘ 491

应用-最小宽度(sw-dp):303

density:1.1875

widthPixels:360

heightPixels:583

刚好默认使用 ‌mini‌ 尺寸,通过修改 layout_width 和 layout_height值,无法修改大小;

因为 FAB 内部有特定的测量逻辑 (onMeasure) 来维持其圆形和阴影效果。

将 fabSize 设置为 normal

设置 fabCustomSize‌和maxImageSize‌

c 复制代码
‌app:fabCustomSize‌: 按钮背景(圆形容器)的大小。
‌app:maxImageSize‌:  中间图标图片的最大显示大小。

重新定义 design_fab_size_normal 的值

█ 效果

c 复制代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:orientation="vertical">

    <!--开关,空白处点击后隐藏-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" />
        
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="0dp"
            app:borderWidth="0dp"
            android:backgroundTint="#ffffff"
            android:src="@drawable/button_mic" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" />
        
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="0dp"
            app:borderWidth="0dp"
            android:backgroundTint="#ffffff"
            app:fabSize="normal"
            android:src="@drawable/button_speaker" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" />
        
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="0dp"
            app:borderWidth="0dp"
            android:backgroundTint="#ffffff"
            app:fabCustomSize="60dp"
            app:maxImageSize="40dp"
            android:src="@drawable/button_camera" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" />

    </LinearLayout>
    
</LinearLayout>
c 复制代码
 <style name="MyFAB">
        <item name="elevation">0dp</item>
        <item name="borderWidth">0dp</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="backgroundTint">#4D000000</item>
        <item name="android:scaleType">centerInside</item>
        <item name="fabSize">normal</item>
        <item name="android:layout_marginLeft">10dp</item>
        <item name="android:layout_marginTop">5dp</item>
</style>

█ 免责声明

博主分享的所有文章内容,部分参考网上教程,引用大神高论,部分亲身实践,记下笔录,内容可能存在诸多不实之处,还望海涵,本内容仅供学习研究使用,切勿用于商业用途,若您是部分内容的作者,不喜欢此内容被分享出来,可联系博主说明相关情况通知删除,感谢您的理解与支持!

转载请注明出处:
https://blog.csdn.net/ljb568838953/article/details/161084284

相关推荐
fox_lht5 小时前
15.4.循环和迭代器的性能比较
开发语言·后端·学习·rust
淮南颂恩少儿编程C++6 小时前
在淮南:编程信息学培训与 C++ 信奥赛:从 CSP 到 NOI 的进阶之路
人工智能·学习·青少年编程
十月的皮皮6 小时前
C语言学习笔记20260612-菱形图案打印(两种写法)
c语言·笔记·学习
故渊at6 小时前
第十三板块:Android 综合架构与未来演进 | 第三十一篇:Android 架构演进与 Fuchsia OS 的挑战
android·架构·宏内核·微内核·fuchsia·ipc 性能博弈
aqi006 小时前
一文速览 HarmonyOS 6.1.1 推出的十个新特性
android·华为·harmonyos·鸿蒙·harmony
chase。6 小时前
【学习笔记】RIGVid:通过模仿生成视频实现机器人操作,无需物理演示
笔记·学习·音视频
matrixmind16 小时前
aiomysql:异步场景下的 MySQL 驱动
android·数据库·mysql·其他
随遇丿而安6 小时前
第8周:弹窗 / 提示组件全功能与弹窗优化
android
zh_xuan6 小时前
诡异Bug:输入框删除字符,却越删越多
android·bug
不爱土豆唯爱马铃薯7 小时前
MC-030 | 从学习到生产
学习