Android 覆盖 viewpager 内容的导航栏

Question

我无法阻止系统导航栏覆盖我的内容！

我滚动到 recyclerview 的最底部，但它隐藏在导航栏后面。这是我的 XML 布局。

<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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<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">

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

    <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:fitsSystemWindows="true"
    android:id="@+id/viewpager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<com.melnykov.fab.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    app:fab_colorNormal="@color/accent"
    app:fab_colorPressed="@color/accent_dark" />

这是您在图片中看到的片段布局。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="8dp">

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

</FrameLayout>

我试过将 android:fitsSystemWindows="true" 添加到我能做的每一个布局中，但那没有用。其他线程提到添加从柱计算的保证金，但这似乎不是正确的解决方案。我直接从 Google 演示 appbarlayout 的 CheesSquare 应用程序中抓取了这个布局，那个看起来工作正常。

Answer 1

尝试替换您的 gradle 依赖项

com.android.support:recyclerview-v7:22.0.+

和

com.android.support:recyclerview-v7:22.2.0

或

com.android.support:recyclerview-v7:+

（不确定这是正确的表示法）

Answer 2

问题出在 AppBarLayout 的使用上。 CoordinatorLayout 作为强大的 FrameLayout 引入，它基于定义的 Behaviors 带来漂亮的动画。如果我们想添加某种 scroll 动画，比如 collapsing toolbar 等，那么我们必须用 AppBarLayout 包裹我们的 Toolbar，但是当我们想放置一个静态的CoordinatorLayout里面的内容，比如你的ViewPager，那我们根本不需要用AppBarLayout：

activity_main.xml:

<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="com.mydemoci.MainActivity">

    <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/AppTheme.PopupOverlay"/>

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

    <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"/>

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

content_main.xml:

<RelativeLayout
    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"
    android:background="#A1D490"

    // Remember CoordinatorLayout is a kind of FrameLayout,
    // so we have to provide top margin to make Toolbar visible
    android:layout_marginTop="?attr/actionBarSize"

    tools:context="com.mydemoci.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@color/colorAccent"
        android:text="Hello World"
        android:textSize="30sp"/>

</RelativeLayout>

Answer 3

Viewpager 的片段根视图必须是 RecyclerView 或 NestedScrollView。 FrameLayout 不支持 CoordinatorLayout 的滚动行为，这就是它不能正常工作的原因。

如何修复 viewpager 的片段布局：不要将 RecyclerView 包裹在 FrameLayout 中。而是在根目录中声明 RecyclerView。您也可以在 RecyclerView 上设置 padding="8dp"，只需使用 android:clipToPadding="false".

Answer 4

我想通了。在我的特定情况下，我的每个片段都管理自己的工具栏实例。我在片段的 onViewCreated() 方法中调用了 setSupportActionBar() 。将此功能移动到 onCreateView() 解决了它。

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_my_account, container, false);
        setupToolbar((Toolbar) view.findViewById(R.id.toolbar));
        return view;
    }

    private void setupToolbar(Toolbar toolbar) {
        toolbarController.registerToolbar(toolbar);
        toolbarController.setActivityTitle("My Account");
    }

（registerToolbar() 在托管 activity 内调用 setSupportActionBar()）。

希望对大家有所帮助！

Answer 5

转到 style.xml 并删除这两项，或将它们的 "true" 值设置为 "false"。

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

在我的例子中，通过删除这两个主题样式值解决了问题。

Answer 6

只需将边距底部添加到 View Pager 即可为我修复。

这是我的 activity_main.xml

中的代码

<android.support.v4.view.ViewPager
    android:id="@+id/main_viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="55dp"/>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation" />

Answer 7

然后将 ViewPager 包装到 ConstraintLayout 中，设置为您的 viewpager：

app:layout_constraintBottom_toBottomOf="parent"

应该可行

Android 覆盖 viewpager 内容的导航栏

Android Navigation Bar covering viewpager content

android

navigationbar

android-fragments

android-viewpager