浮动操作按钮在片段内未完全显示

Question

浮动操作按钮在片段内未完全显示

androidandroid-fragmentsfloating-action-buttonandroiddesignsupportandroid-coordinatorlayout

52

我正在使用FAB按钮和RecyclerView在一个Fragment中。这个Fragment是TabViewPager的一个实例。我遇到了FAB按钮的问题。我将RecyclerView和FAB按钮放在一个FrameLayout中，其中FAB按钮位于右下方。现在我面临的问题是FAB按钮没有完全显示。如下面屏幕截图所示，它的一半被隐藏了。有谁能帮助我解决这个问题吗？提前致谢。

FAB with RecyclerView inside FrameLayout

注意: 一旦滚动完成，FAB将正确定位。问题仅在它处于静止状态（未滚动）时出现。

fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="10dp"
        app:backgroundTint="@color/red"
        android:src="@drawable/ic_done"/>
</FrameLayout>

tabviewpagerlayout.xml

<?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"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways" />


        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

- Chandru

注意，我没有使用新的设计库... 但是... 默认情况下可能是FAB处于关闭状态。尝试将其边距删除。当您向上滚动时，FAB应该出现。向下滚动应该将其移除。这样可以避免FAB妨碍RecyclerView上的最后几行。在这种情况下，将有一个辅助功能，可以随意使FAB出现。 - Knossos

不是在滚动时，它是正常工作的。但当它处于空闲模式时，就会出现问题，就像上面附加的截图一样。看起来很尴尬。 - Chandru

为什么不尝试使用RelativeLayout而不是FrameLayout呢？ - Anggrayudi H

我也尝试了RelativeLayout，通过将alignparent_bottom和alignparent_right="true"分配给它。但是它也没有帮助。表现得像一样。我认为问题在于CoordinatorLayout属性。 - Chandru

10个回答

13

你应该将 FAB 放到 CoordinatorLayout 内部。就像这样：

<android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.Toolbar
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout/>

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

    <android.support.v4.view.ViewPager
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_gravity="end|bottom"/>

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

那么您可以通过以下方式在ViewPager中添加RecyclerView：

Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new RecyclerViewFragment(), "Tab1");
viewPager.setAdapter(adapter);

RecyclerViewFragment的布局在哪里：

 <android.support.v7.widget.RecyclerView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

- Gabriele Mariotti

24

我同意。但我的要求是在片段内显示浮动操作按钮（FAB）。 - Chandru

让我们在聊天中继续这个讨论。 - Chandru

这个解决方案存在问题。我使用了一个变通方法，在一个片段中显示FAB，在另一个片段中隐藏它。但是，当你滚动列表时，奇怪的事情发生了 - FAB会重新出现。为什么一个人应该被限制在活动中拥有FAB呢？ - khusrav

7

我遇到了同样的问题，FloatingActionButton 完全看不见，而且在底部屏幕之外。当我向下滚动时，它才会出现。
此外，选项卡在向下滚动时会被隐藏，但我希望它们始终可见，所以我通过删除 app:layout_scrollFlags="scroll|enterAlways" 来解决了这个问题。感谢 JDev 在如何避免向下滚动时隐藏选项卡？中提供的帮助。
这也解决了 FloatingActionButton 的问题，现在它可以看见了。

- cgr

6

这解决了工具栏的问题，但现在工具栏无法滚动。 - Jared Burrows

5

我有点按照Gabriele的建议将FAB移到包含的活动中。此外，您需要在onTabSelected中更新FAB的颜色/单击侦听器：

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        ...

        setFloatingActionButtonForImagesTab();

    }

    ...

    @Override
    public void onTabSelected(final TabLayout.Tab tab) {
    switch (tab.getPosition()) {
        case 0:
            setFloatingActionButtonForImagesTab();
            break;
        case 1:
            setFloatingActionButtonForMusicTab();
            break;
        case 2:
            setFloatingActionButtonForVideoTab();
            break;
        }
    }

    ...

}

然后在设置函数中，只需设置颜色和点击监听器：

private void setFloatingActionButtonForImagesTab() {
    myViewPager.setCurrentItem(0);
    floatingActionButton.setBackgroundTintList(getResources().getColorStateList(R.color.purple));
    floatingActionButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(coordinatorLayout, "images", Snackbar.LENGTH_LONG)
                .show();
        }
    });
}

请注意上面对setCurrentItem的调用。现在实现TabLayout.OnTabSelectedListener需要它。

- Adam Johns

4

我遇到了同样的问题。不幸的是，我没有答案，但有一些附加点。

不是按钮被按下，是整个片段被推下去了。到目前为止我还没有测试过，但我想象，如果有一种方法可以让你看到片段页面的大小，你会发现它并没有像应该那样结束在屏幕底部。

对于可能的解决方案，我考虑在底部添加一个大小为“?attr/actionBarSize”的填充。

我将测试这个，并在完成后发布回来。

更新：由于我使用了80 dp的边框，获得了一个截图（我没有10声望来发布截图，wth）

解决方法：

<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

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

        <FrameLayout
            android:id="@+id/fragment_root"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/border"
            android:layout_marginTop="?attr/actionBarSize"
            >
            <!--android:paddingBottom="?attr/actionBarSize"-->
            <!--app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/border"></LinearLayout>
            <fragment
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:name="com.derek.hianthy.mydiary.ui.BaseFragment"
                tools:layout="@layout/layout"
                android:background="@drawable/border"
                />

        </FrameLayout>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="@dimen/fab_margin_bottom"
            android:layout_marginRight="@dimen/fab_margin_right"
            android:src="@drawable/ic_action_add"
            app:borderWidth="0dp"
            app:fabSize="normal"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="false"
            android:layout_alignParentLeft="false" />

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

注意：app:layout_behavior="@string/appbar_scrolling_view_behavior" 已被移除。结果

- Derek Zhu

4

可能有点晚了，但对我来说最好的选择似乎是创建另一个包含您内容和浮动按钮的片段。这段代码在我的应用程序中非常有效：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="domain.ItemsFragment">


    <fragment
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:name="com.lucyapp.client.ItemFragment"
        android:id="@+id/fragment"
        tools:layout="@layout/fragment_item_list" />

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

</FrameLayout>

- speedingdeer

1

即使在2021年，这仍然会出现很多问题。我的解决方法是：

将浮动栏放置在主活动布局中 - 这样它就会在整个应用程序/所有片段（我知道）中以正确的位置显示。
然后，您可以从不需要的片段中以编程方式隐藏它。

- Josef Vancura

1

我遇到了同样的问题，要求在片段中显示FAB。我的做法是从工具栏中删除了这行代码。

app:layout_scrollFlags="scroll|enterAlways"

你可以检查我的布局。

<?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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:background="@color/white"
        app:elevation="0dp"
        android:elevation="0dp"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_main"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_weight="1"
            android:background="@color/white"
            app:title="@string/app_name">

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >


        </android.support.design.widget.TabLayout>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

- Shantanu Patil

1

这个解决方案对我有用。创建一个名为CustomBehavior的新类，并添加以下代码：

public class CustomBehavior extends CoordinatorLayout.Behavior<ViewPager> {

private int mActionBarHeight;

public CustomBehavior(Context context, AttributeSet attributeSet) {
    super(context, attributeSet);
    init(context);
}

public CustomBehavior(Context context) {
    init(context);
}

private void init(Context context) {
    TypedValue tv = new TypedValue();
    if (context.getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
        mActionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, context.getResources().getDisplayMetrics());
    }
}

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

public boolean onDependentViewChanged(CoordinatorLayout parent, ViewPager child, View dependency) {
    offsetChildAsNeeded(parent, child, dependency);
    return false;
}

private void offsetChildAsNeeded(CoordinatorLayout parent, View child, View dependency) {
    if (child instanceof ViewPager) {
        ViewPager viewPager = (ViewPager) child;
        View list = viewPager.findViewById(R.id.recycler_view);
        if (list != null) {
            final CoordinatorLayout.Behavior behavior =
                    ((CoordinatorLayout.LayoutParams) dependency.getLayoutParams()).getBehavior();
            if (behavior instanceof AppBarLayout.Behavior) {
                final AppBarLayout.Behavior ablBehavior = (AppBarLayout.Behavior) behavior;
                AppBarLayout appBarLayout = (AppBarLayout) dependency;
                ViewCompat.setTranslationY(list, ablBehavior.getTopAndBottomOffset()
                        + appBarLayout.getTotalScrollRange()
                        + mActionBarHeight);
            }
        }
    }
}

}

现在，在xml文件中将自定义行为类分配给viewpager小部件。

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="yourpackage.CustomBehavior"
    />

- ignacio_gs

我已经点赞了这个答案，因为我认为它是最接近正确答案的。然而，我注意到我的回收视图的第一项从工具栏后面开始。只要我触摸列表进行滚动，CustomBehavior类就会启动并将第一行显示在其应有的位置上。 - Victor A. Parcianello Benso

0

我遇到了与视图分页器1号片段FAB按钮相同的问题，它显示在屏幕下方，在滚动时会显示出来。但是经过一些调查，我发现我写了

app:layout_behavior="@string/appbar_scrolling_view_behavior"

在ViewPager中使用CoordinatorLayout。因此，在删除此滚动行为后，FAB位置问题得到解决。

请检查我的实现是否正确：

<?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"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_horizontal"
                    android:text="@string/app_name"
                    android:textColor="@color/textPrimary"
                    android:textSize="18sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_horizontal"
                    android:text="@string/str_toolbar_subtittle"
                    android:textColor="@color/textPrimary"
                    android:textSize="14sp" />
            </LinearLayout>
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="?attr/colorPrimary"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabSelectedTextColor="@color/errorColor"
            app:tabTextColor="@color/white" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/app_bar" />

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

- Nikhil Jogdand

在我的情况下，这并没有解决问题。看起来还好，直到我注意到我的列表的第一项（viewpager 中包含一个recycler view的片段）位于应用程序栏下面。 - Victor A. Parcianello Benso

这不是解决方案，兄弟。如果我们删除这个 "app:layout_behavior="@string/appbar_scrolling_view_behavior""，那么操作栏隐藏行为将不再存在。 - zohaib khaliq

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bojan Ilievski · Accepted Answer

无论选择哪个选项卡，都要显示/隐藏FAB并不是一个可接受的解决方案。我尝试了各种布局组合，但将FAB移动到活动布局是唯一可行的解决方案。但是如果您只需要在一个选项卡中使用按钮呢？现在这是唯一有效的方法，但我期望设计库会更新，因为当前版本太容易出故障了。无论如何，重点是FAB必须是CoordinatorLayout的直接后代，这样它就不会被折叠的工具栏推下去...