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

相关推荐
帅帅的记忆43 分钟前
uniapp项目调用原生android studio的sdk文件(即aar文件)
android·uni-app·android studio
用户69371750013841 小时前
Kimi K3 综合能力处于全球第一梯队
android·前端·后端
kitsch0x971 小时前
论文学习_MalSkillBench: A Runtime-Verified Benchmark of Malicious Agent Skills
学习
阿pin1 小时前
Android随笔-BroadcastReceiver
android·broadcast
Z5998178411 小时前
c#软件开发学习笔记--分组、游标与临时表、分页
笔记·学习·c#
治愈系贝壳2 小时前
ARM ---day1
linux·arm开发·学习
qdprobot2 小时前
齐护AIOT科创社团学习套件桌面总程AiTall V3版人工智能Mixly图形化编程AI小智物联网AI具身智能应用椴木科创作品
人工智能·物联网·学习
遇乐的果园2 小时前
前端学习笔记-vue列表处理
前端·vue.js·学习
小弥儿2 小时前
GitHub今日热榜 | 2026-07-16:AI知识库与反AI味设计成今日双主线
人工智能·学习·github
菩提树下的打坐3 小时前
CI 中的测试分层:让金字塔真正落地
学习·ci/cd