转到另一个片段时，浮动操作按钮不会消失 [英] Floating action button will not disappear when going to another fragment

问题描述

我基于 Scrolling Activity 构建了一个项目，但遇到了一个奇怪的问题。考虑以下情况：

I built a project based on Scrolling Activity, and faced a strange issue. Consider the following scenario:

我单击 fab按钮转到另一个片段但是当片段移位时， fab按钮将不会消失！

I click on fab button to go to another fragment but when the fragment displaces, the fab button will not disappear!

有人知道如何解决此问题吗？

Can anybody know how to fix this problem?

这是我的 XML我添加到 frameLayout 的滚动活动：

Here is my XML of Scrolling Activity that I added to my frameLayout:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="ir.apio.myapplication.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

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

    <include layout="@layout/content_scrolling" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end" />


    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>

content_scrolling.xml ：

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="ir.apio.myapplication.ScrollingActivity"
    tools:showIn="@layout/activity_scrolling">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text" />

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

我的工厂ClickListener：

My fab ClickListener :

fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                getSupportFragmentManager()
                        .beginTransaction()
                        .replace(R.id.frame,new TestFragment())
                        .commit();
            }
        });

还有我的TestFragment：

And also my TestFragment :

public static class TestFragment extends Fragment {

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment_test,container,false);
            return view;
        }
    }

以下是屏幕截图：

此处是转到屏幕截图新的片段：

Here is screen-shot when going to the new fragment:

推荐答案

您仍然看到FAB的原因是仰角，它表示屏幕上的视图深度。它会影响哪些元素在上方或下方，以及它们所投射的阴影（例如，FAB位于主要内容的顶部并投射阴影）。

The reason you are still seeing the FAB is elevation, which refers to a views depth on the screen. It affects which elements are above or below one another and the shadows they cast(for example a FAB sits on top of the main content and casts a shadow).

FAB默认情况下将具有一些海拔，您可以使用height属性来覆盖它，例如 app：elevation = 4dp 。其他元素将处于0dp级别。

The FAB by default will have some elevation, which you can override using the elevation attribute, eg app:elevation="4dp". The other elements will be at the 0dp level.

在您的情况下，您已将FrameLayout放在布局文件的最后，我想这就是您要加载的位置碎片成。这实际上并不能代替您的其他内容，而只是用您的FrameLayout内容覆盖它。

In your case, you've put the FrameLayout last in your layout file, and I presume that's where you are loading your fragment into. What this does is not actually replace your other content, but just cover it with the content of your FrameLayout.

之所以不包含FAB，是因为FAB有一些标高，而FrameLayout没有。因此，尽管您将FrameLayout放在最后，并且通常希望它位于顶部，但FAB实际上具有更高的海拔高度，可以将其覆盖。

The reason it doesn't cover the FAB, is because the FAB has some elevation and the FrameLayout doesn't. So although you've put your FrameLayout last and would normally expect that to be "on top", the FAB actually has a higher elevation which overrides that.

快速修复，这将是给您的浮动操作按钮 app：elevation = 0dp ，它会将其放回与其他所有位置相同的海拔高度，并且将应用正常规则，FrameLayout为

A quick fix, would be to give your floating action button app:elevation=0dp which would put it back on the same elevation level as everything else and the normal rules would apply, the FrameLayout is last and would be on top.

实际上，仅放一个覆盖前一个内容的大框架通常不是最好的选择，您可能想看看其他构建应用的方式。

In reality, just putting a big frame covering the previous content is not usually the best thing to do and you would want to look at other ways to structure the app.

这篇关于转到另一个片段时，浮动操作按钮不会消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！