Android:浮动按钮图标未居中

Posted

技术标签:

【中文标题】Android:浮动按钮图标未居中【英文标题】:Android: Floating Button Icon is not centred 【发布时间】:2017-05-19 12:34:11 【问题描述】:

我正在尝试在我的应用中创建一个浮动按钮。按钮在那里,但按钮中的图像有点向上(见图)。

我无法弄清楚它有什么问题。以下是浮动按钮的部分 XML。

<android.support.design.widget.FloatingActionButton
        android:id="@+id/buttonUp"
        android:layout_
        android:layout_
        android:layout_marginRight="16dp"
        android:layout_marginTop="480dp"
        android:clickable="true"
        android:scaleType="center"
        android:src="@drawable/btn_back_to_top_3x"
        app:layout_anchor="@id/layout"
        app:layout_anchorGravity="bottom|right|end"
        app:backgroundTint="@android:color/background_light"
        app:fabSize="normal" />

按钮显示我想要的位置。唯一的问题似乎是里面的图像不是中心。为什么会这样?

编辑: 环顾四周后,我意识到图像本身存在问题,图像实际上没有居中并且底部有空间(这导致图像被向上推)。

【问题讨论】:

@Charuka 是的,这是正确的原因,抱歉我刚才没有检查。忙着处理一些突发的问题。谢谢 【参考方案1】:

我也遇到过同样的问题。以下解决方案对我有用

app:fabCustomSize="40dp"

【讨论】:

app:fabCustomSize 值不应始终为 40dp。取决于每个视图我必须使用 50dp【参考方案2】:

您应该将 fabCustomSize 值设置为 FAB 的确切大小:

<android.support.design.widget.FloatingActionButton
        android:layout_
        android:layout_
        app:fabCustomSize="60dp"
        android:src="@drawable/plus_icon"
        app:rippleColor="@color/colorPrimaryDark" />

【讨论】:

谢谢!为什么这是必要的?【参考方案3】:

我只是设置了 app:fabCustomSize=”40dp”(需要的大小)并将高度和宽度设置为 wrap_content 然后问题解决了

【讨论】:

【参考方案4】:

原因是您的图片尺寸不合适!

浮动操作按钮默认圆形大小为 56 x 56dp , 为了获得最适合的效果,请使用它作为您的背景图片!

如果你想要一个迷你的应该是:40 x 40dp

如果您只想更改内部图标(仅图标),请使用 24 x 24dp 图标作为默认尺寸

为了再次测试这一点,我从互联网上下载了一个图像并将其缩小到 56dp,并保留了一个小空间来平衡它(我不擅长 Photoshop)

并将其添加到您的 FB 视图中,并将背景设为黄色以使其清晰。让我们看看

输出:

这意味着它取决于您添加的图像及其大小,如果您想要全背景,您甚至可以使用imageButton

参考:https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button

【讨论】:

您好,请不要删除您的原始答案并复制下面的答案好吗?谢谢。 @Demindiro 回滚编辑或标记它以供版主这样做。【参考方案5】:

您只需添加 app:fabCustomSize="40dp" 它对我有用

【讨论】:

app:fabCustomSize="40dp" 也为我工作。感谢 *** 社区。​​span> 这和第二个答案一模一样,这有什么不同或有什么帮助?【参考方案6】:

这里是设置三个选项一起调整导航按钮的图标大小

    布局宽度和高度。

    在 nav.Button 内更改图标大小 ~ 使用 (maxImageSize="..dp")。

    更改晶圆厂尺寸 ~ 使用 (app:fabCustomSize="..dp") 或 (app:fabSize="") 您可以在此处尝试三个选项(“mini”或“auto”或“normal”)。 例如:

    <com.google.android.material.floatingactionbutton.FloatingActionButton
     android:layout_
     android:layout_
     app:maxImageSize="20dp"
     app:fabSize="mini"/>
    

【讨论】:

【参考方案7】:

尝试修复你的高度和宽度...

    android:layout_
    android:layout_

请以另一种方式调整底部的布局..因为这里哟

 android:layout_marginTop="480dp" 

这不是我的建议尝试将 FloatingActionButton 设置在相对布局中的正确方法..并像这个属性一样设置..

    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"

【讨论】:

为什么不是 android:layout_marginBottom?你不认为 marginTop 会在不同的屏幕上产生问题吗? 感谢您的建议,我找到了问题(原来是图像不居中,底部有一些空间,不敢相信我没有注意到它) .但是感谢您的布局建议。【参考方案8】:

这通常在使用自定义大小的浮动操作按钮(FAB)时出现,因为默认情况下,android 只支持 40dp FAB。最好的方法是覆盖它,通过告诉您的视图您正在使用自定义大小的 FAB,并为其赋予与 value 相同的大小。

例如,在使用 60dp x 60dp FAB 时,这样就可以解决问题。

app:fabCustomSize="60dp"

【讨论】:

【参考方案9】:

除了上述答案,无论您为 FAB 设置什么尺寸,都设置为 fabCustomSize

例如,如果宽度和高度为“48dp”,则将 fabCustomSize 设置为“48dp”:​​

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_
    android:layout_
    android:backgroundTint="@color/grey"
    android:src="@drawable/ic_baseline_arrow_back"
    app:fabCustomSize="48dp" />

【讨论】:

【参考方案10】:

使用 (https://github.com/futuresimple/android-floating-action-button) 并将 fab:fab_icon="@drawable/ic_fab_star" 设置为中心图标

【讨论】:

【参考方案11】:

最好的解决方案是不要硬编码 FAB 的维度。

图标将以属性android:scaleType="center"居中

<android.support.design.widget.FloatingActionButton
                android:id="@+id/search_fab"
                android:layout_
                android:layout_
                android:scaleType="center"
                android:layout_marginEnd="10dp"
                android:src="@drawable/fab_search_icon"
                app:backgroundTint="@color/colorPrimary"
                app:elevation="4dp"
                app:fabSize="normal"/>

【讨论】:

这不起作用.. 设置 app:fabCustomSize="40dp" 是我的解决方案 @mDonmez 这对你有好处。您也可以在编辑后的帖子中查看代码。

以上是关于Android:浮动按钮图标未居中的主要内容,如果未能解决你的问题,请参考以下文章

我在哪里可以找到 android studio 中浮动操作按钮的图标? [复制]

如何将宽度设置为“填充父项”的android按钮中的图标和文本居中

使用浮动操作按钮更改图标颜色

图标未在 FloatingActionButton 的中心对齐

文本标签图标在浮动操作按钮内,而不是矢量图标标签

android gridview 如何点击item中的一个组合控件的图标按钮触发整个item