滚动视图上的浮动操作按钮？

Question

我正在改进我的应用程序，使其看起来更“Material Design-ey”，但在使用 FAB 时遇到了麻烦。我有一个带有两个浮动操作按钮的滚动视图：

---

当我滚动到底部时，FAB 会覆盖我的内容。我希望能够滚动到底部一点，这样 FAB 就可以是 align_parent_bottom 而不会重叠任何内容：

（应该可以再滚动一点，以便 FAB 在下方对齐）

---

（向下滚动之前）

向下滚动到最大后，如何在应用底部创建额外空间以供 FAB 休息？

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#68d9cc">

    <ScrollView

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#68d9cc">



    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:elevation="20dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <ImageView
            android:layout_height="match_parent"
            android:layout_width="wrap_content"
            android:id="@+id/back"

            android:onClick="cancel"

            android:src="@drawable/ic_arrow_back_black_24dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Test example"
            android:textSize="22sp"
            android:id="@+id/header"
            android:textColor="@color/textColorPrimary"
            android:layout_gravity="center"
            android:paddingRight="10dp"
            />


    </android.support.v7.widget.Toolbar>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/linear"
        android:layout_marginBottom="55dp"
        android:layout_below="@+id/textView12"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textColor="@android:color/black"
            android:layout_below="@+id/textView12"

            android:text="textview:"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/textView4"
            android:layout_alignBottom="@+id/textView4"

            android:layout_toEndOf="@+id/textView4"
            android:layout_toRightOf="@+id/textView4"
            android:imeOptions="actionDone"
            android:inputType="text" />
    </LinearLayout>

    <ListView
        android:id="@+id/listview"
        android:layout_width="wrap_content"
        android:choiceMode="singleChoice"
        android:layout_height="300dp"
        android:layout_below="@+id/toolbar"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:elevation="9dp">

    </ListView>

    <TextView
        android:id="@+id/textView12"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="78dp"
        android:gravity="center_horizontal"
        android:text="textview"
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_below="@+id/listview"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

</ScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/cancel"
        android:onClick="cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:clickable="true"
        app:fabSize="normal"
        app:srcCompat="@drawable/ic_close_black_24dp"
        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/done"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:clickable="true"
        app:fabSize="normal"
        app:srcCompat="@drawable/ic_done_black_24dp"
        />

    </RelativeLayout>

Answer 1

如果您的目标是您提到的 Material Design，那么不鼓励使用像这样的浮动操作按钮。要么在右侧将它们堆叠在一起，要么在点击时打开多个迷你 FAB。

然而我能想到的一个简单的解决方法是将 paddingBottom 添加到您的布局中，这样它就会有更多的“内容”并且它会向上滚动更多。

如果您还没有阅读此部分，我会阅读。

https://material.io/guidelines/components/buttons-floating-action-button.html#