ViewPager中的片段被选项卡栏遮挡了。

Question

我在我的安卓项目中遇到了一个Tab栏和ViewPager的问题。应用程序有一个活动，其中包含一个选项卡布局，然后有2个片段，分别代表每个选项卡。

当打开该活动时，它会向API发送请求以获取一些数据，并将数据放入数据适配器以在每个片段的可回收视图和卡片布局中使用。

可回收视图将包含3个项目，但是只有2个项目显示出来，因为第一个项目被隐藏在工具栏或选项卡栏下面，如下面的屏幕截图所示。

以下是我的活动布局文件。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.BoardiesITSolution.CritiMonApp.AppsActivity">

    <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.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill" />
    </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_behaviour="@string/appbar_scrolling_view_behaviour" />-->
</android.support.design.widget.CoordinatorLayout>

下面是片段的布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <view
        android:id="@+id/recycler_view"
        class="android.support.v7.widget.RecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" />
</LinearLayout>

以下是卡片布局的布局

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_margin="8dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:elevation="5dp">
        <TextView
            android:id="@+id/txtApplicationName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:maxLines="3"
            android:padding="8dp"
            android:textColor="#222"
            android:textSize="15dp"
            android:layout_centerInParent="true"/>

    </RelativeLayout>
</android.support.v7.widget.CardView>

以下是上面提到的屏幕截图，显示了问题。我已经把一些文字打码了，但它应该能让你明白我的意思。本来应该有3个项目，但第一个项目隐藏在选项卡栏下面。

- Boardy

---

在我的情况下，回收站视图出现在选项卡上方。下面的解决方案也对我有所帮助。 - h8pathak

Answer 1

编辑：根据@smeet和@hardik下面的建议，添加滚动行为app:layout_behavior="@string/appbar_scrolling_view_behavior"应该可以解决问题且保留滚动行为。 仅当视图是协调布局的直接子元素时，滚动行为才起作用。

---

旧答案

只需将您的应用栏布局和viewpager包装在垂直 LinearLayout 中即可。

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.BoardiesITSolution.CritiMonApp.AppsActivity">

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

        //appbar layout

        //viewpager    


    </LinearLayout>

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

根据文档，CoordinatorLayout 是一个功能强大的 FrameLayout。因此，您可以期望典型的“将视图放在其他视图之上”的 FrameLayout 行为。

- freddieptf

Answer 2

在我的情况下，将以下内容添加到 ViewPager 中解决了问题：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

- Smeet

---

@这应该是被接受的答案，因为如果我们将 AppBar 布局包装在 LinearLayout 中，那么当你滚动时，工具栏不会隐藏。 - Hardik

很好，这似乎是最简单的方法。 - GEPD

Answer 3

如果我们将应用程序栏布局包装在线性布局中，那么当您滚动时工具栏不会隐藏，因此如果您想在滚动时隐藏工具栏，则接受的答案可能无法帮助您。

Smeet做到了正确的方式，但没有解释！这里是带有解释的完整示例。

将“app”命名空间添加到CoordinatorLayout。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
......
>

只需在您的 ViewPager 中添加以下行：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

完整的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"
    xmlns:tools="http://schemas.android.com/tools"
    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/AppTheme.AppBarOverlay">

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_height="match_parent" />


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

- Hardik