浮动操作按钮 - 第一次显示TOP-LEFT

时间:2017-02-07 06:22:12

标签: android android-layout floating-action-button

我在创建片段时显示FAB按钮,点击导航项

打开

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>

第一次显示如下:

enter image description here

点击屏幕后,显示如下:

enter image description here

有没有任何解决方案可以让它变得完美。我在 NavigationView。

中显示此片段

3 个答案:

答案 0 :(得分:8)

你为什么要给它锚?删除锚和锚重力然后它应该工作很好

       <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;
}
}

答案 1 :(得分:0)

尝试在布局的其余部分周围添加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>

答案 2 :(得分:0)

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

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

确保您没有在任何地方更改工厂尺寸。