Android:使用更大的图标创建更大的浮动操作按钮

Question

我想创建一个更大的浮动动作按钮(FAB),超过通常的56 dp,里面有一个更大的图标.(为了我的目的,一个图标永远不会自我解释,所以我将创建一个包含短文本的png文件,并使用此png作为图标.)

增加FAB的大小可以正常工作:
因为我不使用mini-FloatingActionButton,我重新定义了迷你按钮大小.
在我的layout-xml中我指定:

<android.support.design.widget.FloatingActionButton
    ...
    app:fabSize="mini"
    ....

在dimensions.xml中,我重新定义了mini-fab的大小:

<dimen name="fab_size_mini">80dp</dimen>

但是,我没有设法在FAB上获得更大的图标.我在材料图标库中尝试了不同dp的图标 - 没有成功.在FAB布局上设置填充也不起作用.

有什么建议？谢谢!

Answer 1

您可以尝试在以下位置重新定义fab图像大小的最大大小dimensions.xml:

<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_fab_size_mini" tools:override="true">80dp</dimen>
    <dimen name="design_fab_content_size" tools:override="true">48dp</dimen>
</resources>

必须确保覆盖设计库中的原始资源.尝试design_fab_image_size而不是design_fab_content_size如果这不适合你.

小心使用,因为这是一个黑客而不是一个实际的解决方案.如果在将来的Design Library版本中更改了资源的名称,则解决方案可能无效.我的意见是坚持设计库中定义的大小,因为它是基于Material Design的推荐设计指南,使您的整体应用看起来很好.

Answer 2

我偶然发现了这个,然后通过反复试验找到答案.看来,可以增加浮动操作按钮的大小,如果您同时设置layout:width并layout:height以match_parent和在的FrameLayout(包住浮动操作按钮没有要,但有道理的,因为你只是想设置的大小按钮).

然后将FrameLayout的宽度和高度设置为您想要的任何值.

我赞成了Grace Coder的答案,因为它确实解决了这个问题,但我认为这种方法更安全,可能更理想.

<FrameLayout
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/chronometer"
    android:layout_centerHorizontal="true">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/chronometer"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:clickable="true"
        android:src="@android:drawable/ic_btn_speak_now"
        android:id="@+id/record_fab" />
</FrameLayout>

您可以在我拍摄的屏幕截图中看到差异:

顶级FAB使用我的代码/解决方法,而底部FAB使用标准(大多数不可更改)维度.

Answer 3

用于改变晶圆厂尺寸使用

app:fabCustomSize="70dp"

对于图标大小

app:maxImageSize="50dp"

例子

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/button_start"
            style="@style/Widget.MaterialComponents.FloatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:backgroundTint="@android:color/holo_blue_bright"
            app:fabCustomSize="70dp"
            app:layout_anchor="@id/bottom_app_bar"
            app:rippleColor="@android:color/holo_blue_dark"
            app:srcCompat="@drawable/ic_play"
            app:layout_anchorGravity="center|top"
            android:focusable="true"
            app:maxImageSize="40dp"
            app:tint="@color/white_overlay_1"
            />

Answer 4

从设计支持库27.1.0开始,有一种设置自定义FAB大小的官方方法:app:fabCustomSizeXML属性和相应的setCustomSize方法.为了增加图标大小,您可以使用android:scaleType="center"更大的drawable.更新: android:scaleType现在已经坏了,请fab.setScaleType(ImageView.ScaleType.CENTER)改用.

其他提出的解决方案有一些缺点:

• 重新定义默认FAB维度不能应用于单个按钮,并且本质上是一个黑客(使用可能会发生变化的非公共API).
• 在FrameLayout中包装FAB(或仅设置FAB layout_width和layout_height所需的大小,具有相同的效果)在Lollipop前设备上看起来非常糟糕.更新:现在也在Lollipop之后(见下面的截图).
• 设置scaleX并scaleY需要调整边距(因为视觉FAB尺寸现在与其布局尺寸不匹配)并缩放不可缩放的部分:按钮边框和(前Lollipop)阴影宽度.

在API 19(左)和API 21(右)上呈现的示例布局:

Answer 5

要调整 FAB 内图标的大小：

app:maxImageSize="100dp"

整个例子：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_marginEnd="25dp"
    android:layout_marginBottom="25dp"
    android:src="@drawable/ic_add"
    app:fabCustomSize="100dp"
    app:maxImageSize="75dp" />