在 Fragment 中定位 FloatingActionButton 的问题答案

【问题标题】：Problem with positioning FloatingActionButton in Fragment在 Fragment 中定位 FloatingActionButton 的问题
【发布时间】：2021-11-14 06:17:41
【问题描述】：

我在将 FAB 定位在 Fragment 中时遇到问题。 FAB 在左上角，但我需要它在右下角。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.vrhcaby.VrhcabyFragment">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textAlignment="center"
    android:src="@mipmap/dice_180"
    android:layout_margin="100px" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@android:drawable/ic_dialog_email" />

 </RelativeLayout>

我有什么问题？

【问题讨论】：

您想在Activity或Fragment中的哪个位置添加FloatingActionButton？

标签： java android android-layout android-fragments

【解决方案1】：

正如我所读到的，FAB 不能很好地与相对布局一起使用，您应该改用 Coordinator Layout。

首先在 build.gradle(Module:app) 中包含其依赖项

dependencies {
    ...
    implementation 'androidx.coordinatorlayout:coordinatorlayout:1.1.0'
    ...
}

然后像这样声明协调器布局而不是相对布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.vrhcaby.VrhcabyFragment">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textAlignment="center"
        android:src="@mipmap/dice_180"
        android:layout_margin="100px" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

如果您想了解更多信息，可以阅读有关 FAB 的更多信息here

【讨论】：

非常感谢您的帮助。现在一切都按预期工作:)

【解决方案2】：

相对布局不支持 fab 而协调器布局支持。你可以做这样的事情。

<androidx.coordinatorlayout.widget.CoordinatorLayout 

xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<ImageView
    android:id="@+id/ivPic"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/badimalika"
    android:scaleType="centerCrop"
    />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@android:drawable/ic_dialog_email"
    app:layout_anchorGravity="bottom|end"
    app:layout_anchor="@id/ivPic"
    />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

【讨论】：