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

相关推荐
aqi009 小时前
鸿蒙版本的电子书阅读APP开放源码啦
android·华为·ai编程·harmonyos·鸿蒙
墨天梦9 小时前
B19_SunnyWeather到阅读客户端
android·kotlin
敬往事一杯酒哈9 小时前
海康 AGV 导航读码器学习
学习
美狐美颜sdk10 小时前
直播APP源码可以直接接入视频美颜sdk吗?技术方案详解
android·人工智能·音视频·美颜sdk·直播美颜sdk
qq_2842740511 小时前
机械原理笔记:平面机构自由度计算(复合铰链、局部自由度、虚约束)与四杆机构入门(含考点)
笔记·学习·平面·自动化·制造
qq_2842740512 小时前
数控铣床与加工中心笔记:铣刀与刀柄系统、G54试切对刀、镜像加工指令、孔加工工艺(钻扩铰镗)与固定循环G73/G83/G81/G76/G87/G84
笔记·学习·自动化·制造
用户693717500138413 小时前
2026,程序员的时代拐点到了
android·前端·后端
Titan202413 小时前
MySQL访问个人学习笔记
笔记·学习·mysql
小雪崩14 小时前
嵌入式学习 day64:字符设备驱动
学习
个 人 练 习 生14 小时前
C++ string 类模拟实现:从底层理解字符串(上)
开发语言·c++·经验分享·学习·程序人生