固定在 ScrollView 和 Constraintlayout 中的浮动操作按钮

Question

我有 xml 个带有 ScrollView 的文件，该文件的子项具有 Constraintlayout。我正在尝试的是尽管滚动，但仍将浮动操作按钮固定在屏幕上的同一位置。我尝试使用 android:layout_alignParentBottom="true" android:layout_alignParentEnd="true" 和 layout_anchorGravity="@+id/root_leyaut"。我还尝试将 FAB 放在 Constraintlayout 之外，但后来出现错误，我的 ScrollView 不能有多个子项。

我的xml:

`<layout 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">

    <data>

        <variable
            name="montlyBudgeting"
            type="com.nswd.successplan.ui.fragments.monthlyBudgetingFragment.MonthlyBudgetingViewModel" />
    </data>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/root_leyaut"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/background"
        tools:context=".ui.fragments.monthlyBudgetingFragment.MonthlyBudgetingFragment">


        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end|bottom"
                android:contentDescription="+"
                layout_anchorGravity="@+id/root_leyaut"
                android:layout_alignParentBottom="true"
                android:layout_alignParentEnd="true"
                android:src="@drawable/ic_arrow_drop_down"
                android:layout_marginBottom="8dp"
                android:layout_marginEnd="8dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />
<------------------------rest of code-------------------->
 </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</layout>`

Answer 1

我不会使用 ScrollView 作为根布局。您可以使用第二个 ConstraintLayout，它将 fab 置于与 ScrollView 相同的“级别”。然后它不应该滚动，而是留在角落里。下面的代码应该可以工作，但我不得不注释掉你的一堆代码才能在我的电脑上得到它运行...

<!--<layout 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">-->

<!--    <data>-->

<!--        <variable-->
<!--            name="montlyBudgeting"-->
<!--            type="com.nswd.successplan.ui.fragments.monthlyBudgetingFragment.MonthlyBudgetingViewModel" />-->
<!--    </data>-->

<androidx.constraintlayout.widget.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_height="match_parent"
    android:layout_width="match_parent">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        layout_anchorGravity="@+id/root_leyaut"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_gravity="end|bottom"
        android:contentDescription="+"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <androidx.core.widget.NestedScrollView
        android:id="@+id/root_leyaut"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:context=".ui.fragments.monthlyBudgetingFragment.MonthlyBudgetingFragment">
        <!--        android:background="@color/background"-->


        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <!--            android:src="@drawable/ic_arrow_drop_down"-->
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
<!--</layout>-->

Answer 2

如果您不想滚动 FAB，请将 NestedScrollingView 放在约束布局内。

<androidx.constraintlayout.widget.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="wrap_content">

     <androidx.core.widget.NestedScrollView
        android:id="@+id/root_leyaut"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/background">

        <!-- Put your scrolling contents here, dont forget the constraints -->

     </androidx.core.widget.NestedScrollView>

     <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:contentDescription="+"
        layout_anchorGravity="@+id/root_leyaut"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:src="@drawable/ic_arrow_drop_down"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
 </androidx.constraintlayout.widget.ConstraintLayout>

固定在 ScrollView 和 Constraintlayout 中的浮动操作按钮

Floating Action Button fixed in ScrollView and Constraintlayout

android

android-scrollview

floating-action-button

android-nestedscrollview