View Pager 的片段隐藏在 Tab Bar 后面

Question

我的 android 项目中的选项卡栏和 ViewPager 有问题。该应用程序的作用是它有一个 activity 承载一个选项卡布局，然后有 2 个片段代表每个选项卡。

当 activity 打开时，它会发送到 API 以获取一些数据并将数据放入每个片段中的 Recycler View 和 Card 布局的数据适配器中。

回收站视图将包含 3 个项目，但仅显示 2 个，因为第一个隐藏在工具栏下方 and/or 选项卡栏，如下面的屏幕截图所示。

下面是我的activity

的布局文件

<?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 个项目，但第一个项目隐藏在选项卡栏下方。

Answer 1

编辑：正如@smeet 和@hardik 在下面所建议的那样，添加滚动行为app:layout_behavior="@string/appbar_scrolling_view_behavior" 应该可以解决问题，同时保留滚动行为。 只有当视图是协调器布局的直接子视图时，滚动行为才有效。

旧答案

只需将您的 appbar 布局和 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 is a super-powered FrameLayout。所以您可以期待典型的 "lay views on top of other views" FrameLayout 行为。

Answer 2

添加：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

在 ViewPager 中解决了我的问题。

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>

View Pager 的片段隐藏在 Tab Bar 后面

Fragment from View Pager hiding behind Tab Bar

tabs

android

android-layout

android-fragments

android-recyclerview