【安卓学习之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

相关推荐
小弥儿35 分钟前
GitHub今日热榜 | 2026-09-18:腾讯双项目上榜
学习·开源
知识分享小能手3 小时前
深度学习学习教程,从入门到精通,深度生成模型 —— 知识点详解与代码实现(20)
人工智能·深度学习·学习
m4Rk_3 小时前
【论文阅读】Agent 记忆机制(74):CompassMem——从相似度检索走向事件图上的记忆导航
论文阅读·人工智能·学习·开源·github
小李不想当小白3 小时前
DMA直接存储器存取(STM32标准库学习笔记)
笔记·stm32·单片机·嵌入式硬件·学习·分享
2601_949950635 小时前
练题簿在线练题全流程:从资料导入到模拟考试与错题复盘
学习·考研·小程序·刷题·小程序推荐
别动我齐刘海5 小时前
ROS2 Jazzy + C++ 实战路线——基础学习2
c++·人工智能·vscode·python·学习·机器学习·机器人
古法安卓6 小时前
Android-休眠唤醒后onLocationChanged没有数据问题排查
android·java·android studio
水云桐程序员7 小时前
量子力学概论,量子力学概念总结
笔记·科技·学习·量子计算
Htr_9 小时前
Creem 2.0 使用指南:面向 AI 构建时代的资金平台
android·数据库·人工智能·ui·photoshop
三克的油9 小时前
java-学习1
java·开发语言·学习