浮动操作按钮 - 第一次显示在左上角

Question

我正在创建一个Fragment，在点击导航项时打开，显示浮动操作按钮。

fragment_order_list.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/order_list_parent_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.kevalam.koops.fragments.OrderListFragment">

        <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/order_list_swipe_refresh_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/order_list_recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                tools:listitem="@layout/row_order_list_layout" />

        </android.support.v4.widget.SwipeRefreshLayout>

        <include
            android:id="@+id/empty_view"
            layout="@layout/layout_empty_view" />

        <include
            android:id="@+id/sync_now_layout"
            layout="@layout/layout_sync_now_view" />

        <LinearLayout
            android:id="@+id/order_list_progress_bar_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|bottom"
            android:background="@color/color_transparent"
            android:padding="@dimen/padding_normal"
            android:visibility="gone">

            <ProgressBar
                style="?android:attr/progressBarStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/spacing_micro"
                android:indeterminate="true" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/spacing_micro"
                android:text="@string/string_loading"
                android:textColor="@color/color_white" />
        </LinearLayout>


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/order_list_add_new_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            app:fabSize="normal"
            app:layout_anchor="@+id/order_list_recycler_view"
            app:layout_anchorGravity="bottom|right|end"
            app:layout_behavior="com.kevalam.koops.design.ScrollAwareFABBehavior"
            app:srcCompat="@drawable/ic_menu_add_product" />

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

首次显示如下：

点击屏幕后，显示如下：

有没有办法使其完美。我将在NavigationView中显示此片段。

- Pratik Butani

---

如果您的EditText在屏幕内或工具栏中与FAB一起使用，请将android:focusable="false"设置为它。 - Radhey

Answer 1

为什么你给它加上了锚点？去掉锚点和重力设置，然后它应该可以很好地工作。

       <android.support.design.widget.FloatingActionButton
        android:id="@+id/order_list_add_new_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:fabSize="normal"
        app:layout_behavior="pl.michalz.hideonscrollexample.ScrollingFABBehavior"/>

FAB的行为

public class ScrollingFABBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> {
private int toolbarHeight;

public ScrollingFABBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.toolbarHeight = getToolbarHeight(context);
}

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton fab, View dependency) {
    return dependency instanceof AppBarLayout;
}

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton fab, View dependency) {
    if (dependency instanceof AppBarLayout) {
            CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
            int fabBottomMargin = lp.bottomMargin;
            int distanceToScroll = fab.getHeight() + fabBottomMargin;
            float ratio = (float)dependency.getY()/(float)toolbarHeight;
            fab.setTranslationY(-distanceToScroll * ratio);
    }
    return true;
}
public static int getToolbarHeight(Context context) {
    final TypedArray styledAttributes = context.getTheme().obtainStyledAttributes(
            new int[]{R.attr.actionBarSize});
    int toolbarHeight = (int) styledAttributes.getDimension(0, 0);
    styledAttributes.recycle();

    return toolbarHeight;
}
}

- Amir_P

---

你太棒了 :) 非常感谢 :) 赞赏 :) - Pratik Butani

删除了这两行代码后，FAB 行为不起作用了，在滚动后隐藏后再也不能显示出来。 - Pratik Butani

Utils.getToolbarHeight(context); 是什么？ - Pratik Butani

Answer 2

尝试在布局的其余部分周围添加一个LinearLayout，并将其用作布局锚点，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/order_list_parent_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.kevalam.koops.fragments.OrderListFragment">

        <LinearLayout android:id="@+id/container"
                      android:layout_width="match_parent"
                      android:layout_height="match_parent">
            <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/order_list_swipe_refresh_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

                <android.support.v7.widget.RecyclerView
                    android:id="@+id/order_list_recycler_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior"
                    tools:listitem="@layout/row_order_list_layout" />

            </android.support.v4.widget.SwipeRefreshLayout>

            <include
                android:id="@+id/empty_view"
                layout="@layout/layout_empty_view" />

            <include
                android:id="@+id/sync_now_layout"
                layout="@layout/layout_sync_now_view" />

            <LinearLayout
                android:id="@+id/order_list_progress_bar_layout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|bottom"
                android:background="@color/color_transparent"
                android:padding="@dimen/padding_normal"
                android:visibility="gone">

                <ProgressBar
                    style="?android:attr/progressBarStyleSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="@dimen/spacing_micro"
                    android:indeterminate="true" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="@dimen/spacing_micro"
                    android:text="@string/string_loading"
                    android:textColor="@color/color_white" />
            </LinearLayout>
        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/order_list_add_new_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            app:fabSize="normal"
            app:layout_anchor="@+id/container"
            app:layout_anchorGravity="bottom|right|end"
            app:layout_behavior="com.kevalam.koops.design.ScrollAwareFABBehavior"
            app:srcCompat="@drawable/ic_menu_add_product" />

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

- Eric O'Connell

---

我也会试一下，我从上面的答案中得到了解决方案。 - Pratik Butani

Answer 3

我认为你这两行代码存在问题:

app:layout_behavior="com.kevalam.koops.design.ScrollAwareFABBehavior"
app:layout_anchor="@+id/order_list_recycler_view"

请确保您没有在任何地方更改了组件尺寸。

- Pedo