如何将浮动操作按钮放置在约束布局内的屏幕右下角？答案

【问题标题】：How to place floating action button to right bottom of screen inside Constraint Layout?如何将浮动操作按钮放置在约束布局内的屏幕右下角？
【发布时间】：2018-08-10 16:22:44
【问题描述】：

我在顶部有一个ScrollView，在里面我有一个ConstraintLayout。将高度设置为match_parent 在 ConstraintLayout 中不起作用，因此高度与屏幕不匹配。在我的ConstraintLayout 内部，我有一个浮动操作按钮，它不会停留在屏幕的右下方，而是停留在ConstraintLayout 的右下方。

我的屏幕图像

如何让浮动操作按钮停留在屏幕右下方？

【问题讨论】：

分享xml代码...
你需要从 ConstraintLayout 开始。然后将浮动按钮和滚动视图放入其中。所以浮动按钮不会滚动
你不能这样做。 FAB 必须在 CL 之外，因为 CL 可能不适合屏幕

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

【解决方案1】：

如果您的 FAB 在约束布局内，请尝试这样

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:clickable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/icon" />
</android.support.constraint.ConstraintLayout>

【讨论】：

【解决方案2】：

 <android.support.design.widget.FloatingActionButton
    android:id="@+id/contactBtn"
    android:layout_width="53dp"
    android:layout_height="62dp"
    android:clickable="true"
    android:layout_gravity="bottom|right"
    app:srcCompat="@android:drawable/ic_menu_send" />

这对我有用..

android:layout_gravity="bottom|right"

【讨论】：

【解决方案3】：

尝试使用CoordinatorLayout，而不是像下面这样限制布局

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbarMain"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbarMain"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay">
    </android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="60dp">

    ........
    ........
</RelativeLayout> 

  <android.support.design.widget.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"
    android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

更多信息请通过this tutorial.

【讨论】：

【解决方案4】：

我所做的是将 FAB 放在与应用栏相同的级别，使其独立于该页面上呈现的内容本身（使用协调器布局）。

尝试将 FAB 放在应用栏级别而不是内容级别。看看它是否有效。

【讨论】：

【解决方案5】：

尝试将 FAB 放在与约束布局的父级相同级别的 XML 中。那应该解决它！不仅如此，还要确保你的父布局不是线性布局！

【讨论】：

不应该是评论吗？