Android 带有导航选项卡的 Viewpager 退出底部屏幕

Question

在我的应用程序中，我使用 ViewPager 和 Tabs 来完成应用程序可以执行的不同任务。

它工作正常，但我的寻呼机容器出现图形问题。

问题： 该设备有一个屏幕尺寸，match_parent 我可以覆盖整个 width 和 height。但是我不知道为什么，使用下面的代码，Pager Container 已经从工具栏向下移动，然后移出了屏幕。

提问：

我怎样才能避免这个问题？是我的错还是正常的？

代码

<android.support.design.widget.CoordinatorLayout
    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.design.widget.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:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"
            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_behavior="@string/appbar_scrolling_view_behavior" />

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

结果是这样的

然后 viewpager 离开屏幕！

我怎样才能避免这种情况？

我用这个Guide

解决方案

<RelativeLayout
    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.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/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"
            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"
        android:layout_below="@+id/appbar"/>

</RelativeLayout>

Answer 1

这是因为 ViewPager 上的 app:layout_behavior。

它的工作方式是偏移 ViewPager 屏幕工具栏 down/out 的高度。当您滚动时，您的 Toolbar 平移 up/off 屏幕，它也会将您的 ViewPager 向上滑动到常规位置。当您滚动并且您的 Toolbar 重新进入视图时，它会将您的 ViewPager 向下移动一些以便为 Toolbar.

腾出空间

Answer 2

让我们来剖析图中的视图/视图组。

1) android.support.design.widget.CoordinatorLayout
这是继承自 android.view.ViewGroup 的宽度和高度如下

android:layout_width="match_parent" <= Full screen width in this case, rootView
android:layout_height="match_parent" <= Full screen height in this case, rootView

2) android.support.design.widget.AppBarLayout
这是继承自 LinearLayout，垂直方向的宽度和高度如下

android:layout_width="match_parent" <= Full screen width
android:layout_height="wrap_content" <= Occupy screen height sufficient    
                                     enough to hold all the child Views.

3) AppBarLayout->child(0)->android.support.v7.widget.Toolbar
继承自 android.view.ViewGroup，宽度和高度如下

android:layout_width="match_parent" <= Full screen width
android:layout_height="?attr/actionBarSize" <= phone and OS version    
                                             dependent, say it is 48dip.

4) AppBarLayout->child(1)->android.support.design.widget.TabLayout
继承自 FrameLayout 具有水平滚动功能

   android:layout_width="match_parent" <= Full screen width
   android:layout_height="wrap_content" <= Occupy screen height sufficient    
                                         to completely visible.

5) android.support.v4.view.ViewPager
View的主体，继承自ViewGroup，宽高如下

android:layout_width="match_parent" <= Full screen width.
android:layout_height="match_parent" <= Full screen height.

重要信息：
ViewGroup 不像其他继承的 ViewGroup 那样遵循任何策略，例如 LinearLayout、RelativeLayout 等，其中子级根据其他子级可用性的宽度和高度进行调整。因此 ViewPager 的高度和宽度将与父级相同，即 CoordinateLayout 大小，但基于 LinearLayout 高度从顶部偏移。 这就是您看到 ViewPager 超出屏幕的原因。

Whosebug 上有各种参考资料试图解决问题，但对于您的问题，这里是最简单和合乎逻辑的解决方案。

解决方案：

第 1 步) 将 ViewPager 移动到 AppBarLayout 中并使用所需的颜色设置背景。

<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:background="#FFFFFF" <= Replace this color of choice
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


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

第 #2 步）可选，从工具栏中删除滚动属性否则向上滚动时可以看到 ViewPager 末尾下方的空白 space。

app:layout_scrollFlags="scroll|enterAlways"

你的 utlimate 文件应该看起来像

<android.support.design.widget.CoordinatorLayout
    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.design.widget.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" />

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

        <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.AppBarLayout>

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

希望对您有所帮助...
编码愉快...;)

Android 带有导航选项卡的 Viewpager 退出底部屏幕

Android Viewpager with nav Tabs exits the bottom screen

tabs

android

android-viewpager