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

相关推荐
知识分享小能手20 分钟前
概理论与数理统计学习教程,从入门到精通,在数理统计中应用R软件(22)
开发语言·学习·r语言
AFinalStone26 分钟前
Android 7系统无障碍服务(四)AccessibilityEvent 的产生与投递
android·无障碍服务
智购科技无人售货机工厂43 分钟前
2026自动售货机热敏打印模块集成:从串口驱动到小票自动裁切的工程实践~YH
android·stm32·单片机·嵌入式硬件·系统架构
陈年老古董1 小时前
CentOS编译安装Python3.11完整教程
linux·笔记·学习·centos·python3.11
戈文波Geir-Wenbo Ge1 小时前
深度七步:从学习到主宰
学习
A13345551 小时前
苹果安卓手机播放器推荐:2026无广告4K怎么选
android·智能手机
clorinda1 小时前
OpenCV实战学习记录:图像拼接与答题卡识别
人工智能·opencv·学习
red_redemption1 小时前
自由学习记录(221)
学习·renderdoc
sel_92 小时前
【OPD论文导读(二)】OPD(On-Policy Distillation)全景调研:十篇论文讲透“在自己生成的内容上学习“这件事
人工智能·python·深度学习·学习·算法·语言模型
动词ing2 小时前
【学习笔记】数据结构(数组长度和关键特性+快慢指针+左右指针)
数据结构·笔记·学习