FAB 内的中心图像

Question

几天前我有完美的FAB，现在图像不居中，这让我发疯！这是我现在得到的：

我正在使用 CardView 内的按钮。这是按钮 xml 标签：

<android.support.design.widget.FloatingActionButton
            android:id="@+id/btn_options"
            style="@style/fab"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginEnd="@dimen/fab_margin"
            android:layout_marginTop="20dp"
            android:elevation="10dp"
            android:scaleType="center"
            android:src="@drawable/ic_options"
            android:tint="@color/colorPrimary"
            card_view:layout_constraintEnd_toEndOf="parent"
            card_view:layout_constraintTop_toTopOf="parent" />

这是可绘制文件：ic_options.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
<path
    android:fillColor="#FF000000"
    android:pathData="M12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,10c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2zM12,16c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2z"/>
</vector>

奇怪的是，当我将 FAB 的宽度和高度更改为 wrap_content 时，它会正确居中，但按钮会变大，我不希望这样……像这样：

这个问题发生在我对整个项目进行了一些更改之后，这取决于 Android Studio Inspector。但是，这个布局没有改变，我只是不知道发生了什么！

Do you have any idea?

编辑：

卡片查看代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    style="@style/AppTheme"
    android:layout_width="match_parent"
    android:layout_height="170dp"
    android:layout_gravity="top"
    app:ignore="NamespaceTypo"
    android:layout_marginEnd="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="12dp"
    card_view:cardCornerRadius="2dp"
    >


<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="400dp"
        android:layout_height="220dp"
        android:contentDescription="@string/contentDescription_mapBackground"
        android:foreground="@drawable/map_overlay" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="@dimen/fab_margin"
        card_view:layout_constraintEnd_toStartOf="@+id/btn_options"
        card_view:layout_constraintStart_toStartOf="parent">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:letterSpacing="0.04"
            android:textColor="@color/colorWhite"
            android:textSize="17sp" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:drawableStart="@drawable/ic_marker2"
            android:drawableTint="@color/white"
            android:textColor="@color/colorWhite"
            android:textSize="12sp" />


    </LinearLayout>


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/btn_options"
            style="@style/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/fab_margin"
            android:layout_marginTop="20dp"
            android:elevation="10dp"
            android:scaleType="center"
            android:src="@drawable/ic_options"
            android:tint="@color/colorPrimary"
            app:fabCustomSize="40dp"
            card_view:layout_constraintTop_toTopOf="parent"
            card_view:layout_constraintEnd_toEndOf="parent"
            />


</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

Answer 1

您可以使用 android:layout_width="wrap_content" android:layout_height="wrap_content" 和 app:fabSize="mini" 或 app:fabCustomSize="40dp"。

适合你吗？

Answer 2

使用 app:fabCustomSize 属性而不是硬编码大小。

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_options"
    app:fabCustomSize="100dp"
    />

Answer 3

不要将图像设置为 cardview，而是尝试在 cardview 中沿 fab 添加 imageview 小部件，然后将重力设置为 imageview 的中心

Answer 4

在我的应用程序中，我有一个以 cardviews 作为项目的 recyclerview，在 cardview 的相对布局内有一个 fab，但 cardview 在垂直线性布局内，并且 fab 图标按预期定位。
如果很容易将 fab 放在布局中或将 cardview 放在布局中。
我知道这没有意义，但你的问题很奇怪

Answer 5

就我而言，我是这样解决这个问题的：

android:fabSize="mini" // mini - 40dp
android:match_parent="40dp"
android:wrap_content="40dp"

所以你应该设置 fab 按钮的大小 android:match_parent android:wrap_content 相似

Answer 6

我遇到了与 material 中的 FloatingActionButton 相同的问题，我能够通过添加 maxImageSize 来解决它，如下所示：

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_print"
        app:maxImageSize="@dimen/_6m" />

其中 src drawable 大小为 24 x 24，dimen 为 48dp。

FAB 内的中心图像

Center image inside FAB

android

android-cardview

floating-action-button