图标未在 FloatingActionButton 的中心对齐

Posted 2023-04-19

【中文标题】图标未在 FloatingActionButton 的中心对齐

【英文标题】：Icon not aligning in the center of FloatingActionButton

【发布时间】：2021-12-06 10:27:51

【问题描述】：

我正在为我的音乐播放器应用程序设计此活动。我有三个浮动操作按钮来执行 Play、Next 和 Previous strong> 动作。

但是，我希望“下一个”和“上一个”按钮比“播放”按钮略小。为此，我调整了此活动的 xml 文件中两个按钮的高度和宽度。

<!-- Prev. Button -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_
    android:layout_
    android:id="@+id/id_prev"
    android:layout_centerVertical="true"
    android:layout_marginEnd="22dp"
    android:layout_toStartOf="@+id/play_pause"
    android:src="@drawable/ic_skip_previous"/>    

<!-- Play. Button -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_
    android:layout_
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:focusable="true"
    android:clickable="true"
    android:id="@+id/play_pause"
    android:src="@drawable/ic_play"/>

<!-- Next. Button -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/id_next"
    android:layout_
    android:layout_
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:layout_marginStart="22dp"
    android:layout_toEndOf="@+id/play_pause"
    android:clickable="true"
    android:focusable="true"
    android:src="@drawable/ic_skip_next" /> 

我面临的问题是，每次我将浮动操作按钮的高度和宽度更改为 45dp 或任何其他大小时，按钮内的图标都会被推到右下角。下一张图片显示了我在说什么。

如何让浮动操作按钮内的 Next 和 Prev 图标完美地停留在居中并仍将两个按钮的大小保持在 45dp？

【参考方案1】：

您应该添加 fabSize="mini" 属性，而不是将 45dp 设置为 layout_width 和 layout_height 而不是 wrap_content。

<!-- Prev. Button -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_
    android:layout_
    android:id="@+id/id_prev"
    android:layout_centerVertical="true"
    android:layout_marginEnd="22dp"
    android:layout_toStartOf="@+id/play_pause"
    android:src="@drawable/ic_skip_previous"
    app:fabSize="mini" />    

【参考方案2】：

您可以改用 scale 属性...

android:scaleX="0.9"

android:scaleY="0.9"

或者在java中......

使用setScaleX 和setScaleY 属性...

【讨论】：

这也产生了我想要的结果，谢谢你分享这个答案。