FAB 内的中心图像答案

【问题标题】：Center image inside FABFAB 内的中心图像
【发布时间】：2018-10-25 12:57:05
【问题描述】：

几天前我有完美的 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。但是，这个布局没有改变，我只是不知道它发生了什么！

你有什么想法吗？

编辑：

卡片查看代码：

<?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>

【问题讨论】：

只是一个想法，因为您还没有解决您的问题：将此属性 app:useCompatPadding="true" 设置为您的晶圆厂。还有一个问题，您的活动类是否扩展了 Activity 而不是 AppCompatActivity？
没用，我的活动扩展了 AppCompatActivity ，而这个 CardView 实际上是 recyclerview 中项目的布局。
还有一个：在我的应用程序中，我有一个 recyclerview，其中 cardviews 作为项目，并且在 cardview 的相对布局内有一个 fab，但 cardview 在垂直线性布局内，并且 fab 图标按预期定位。如果很容易将 fab 放在布局中，或者将 cardview 放在布局中。我知道这没有意义，但你的问题很奇怪。
谢谢！我实际上把cardview放在一个相对的布局中，把fab放在cardview之外，它现在可以工作了！
@forpas 如果你愿意写你的评论作为答案，我很乐意接受。

标签： android android-cardview floating-action-button

【解决方案1】：

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

它适合你吗？

【讨论】：

不幸的是它没有用，但是当我把工厂放在cardview之外（只是为了测试它）它工作了！但我不知道这里的cardview有什么问题..我需要工厂在cardview里面。

【解决方案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"
    />

【讨论】：

不幸的是它没有用，但是当我把工厂放在cardview之外（只是为了测试它）它工作了！但我不知道这里的cardview有什么问题..我需要工厂在cardview里面。
我会测试这个案例，然后告诉你解决方案
你能用 CardView 发布你的完整代码吗，你可以在发布前删除不必要的视图。
我现在编辑了我的问题并添加了 cardview 代码。
您使用的是哪个版本的支持 appcomact 库？

【解决方案3】：

就我而言，我已经这样解决了这个问题：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我在材料中的 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 可绘制尺寸为 24 x 24，尺寸为 48dp。

【讨论】：