Question

在我的应用中，我使用ViewPager和Tabs来处理应用可以执行的不同任务。

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

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

ASK：

我该如何避免这个问题？这是我的错还是正常？

CODE

<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

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

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-＆gt; child（0） - ＆gt; 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-＆gt; child（1） - ＆gt; 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
视图的主要播放器，继承自ViewGroup，其宽度和高度如下所示

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

重要信息：
ViewGroup不遵循任何其他继承的ViewGroups（如LinearLayout，RelativeLayout等）的策略，其中子项根据其他子项可用性的宽度和高度进行调整。因此，ViewPager的高度和宽度与父级相同，即CoordinateLayout大小，但基于LinearLayout高度偏离顶部。 这就是您可以看到ViewPager离开屏幕的原因。

StackOverflow上有各种参考资料试图解决问题但是你的问题是最简单和最合理的解决方案。

解决方案：

步骤＃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末尾下方的空白区域。

app:layout_scrollFlags="scroll|enterAlways"

你的文件应该是

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

我希望有帮助...
快乐编码...;）

Answer 2

这是因为app:layout_behavior上的ViewPager。

它的工作方式是将ViewPager工具栏的高度向下/向外偏离屏幕。当您滚动时，Toolbar会在屏幕上向上/向下翻转，它也会将ViewPager向上滑动到正常位置。当您滚动并Toolbar重新进入视图时，它会将您的ViewPager翻译为一些，以便为Toolbar腾出空间。

带有导航标签的Android Viewpager退出底部屏幕

2 个答案: