TabLayout与ViewPager关联后不显示问题求助

你好呀！你已经精准定位到TabLayout被AppBar遮挡的问题了，这确实是核心原因，咱们来用两种靠谱的方案解决它，同时完全保留你需要的CoordinatorLayout和BottomNavigationBehavior~

问题根源 #

你的主布局里，AppBarLayout和content_home是并列在ConstraintLayout内的，但content_home没有设置顶部约束，导致其内部的TabLayout被上方的AppBarLayout完全挡住了。你的适配器和Activity关联代码都是没问题的，只要调整布局位置就能解决。

方案一：通过约束布局固定位置（推荐） #

修改主布局的include标签，添加顶部约束，让content_home的内容从AppBarLayout的下方开始显示：

<android.support.constraint.ConstraintLayout 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"
    tools:context="com.blipclap.creativegraphy.HomeActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/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:popupTheme="@style/AppTheme.PopupOverlay"
            app:theme="@style/ToolbarColoredBackArrow" />
    </android.support.design.widget.AppBarLayout>

    <include
        layout="@layout/content_home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toBottomOf="@id/appBarLayout" />
</android.support.constraint.ConstraintLayout>

这里给include加上了app:layout_constraintTop_toBottomOf="@id/appBarLayout"，确保content_home的顶部紧贴AppBarLayout的底部，TabLayout就能正常显示了。

方案二：添加滚动行为支持联动 #

如果你希望TabLayout能随ViewPager滚动时隐藏/显示，可以给content_home里的RelativeLayout添加滚动行为：

修改content_home的布局：

<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:id="@+id/arootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.blipclap.creativegraphy.HomeActivity"
    tools:showIn="@layout/app_bar_home">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </android.support.design.widget.TabLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/tabLayout">
        </android.support.v4.view.ViewPager>
    </RelativeLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        android:layout_gravity="bottom"
        app:layout_behavior=".Helper.BottomNavigationBehaviour"
        app:itemIconTint="@android:color/background_dark"
        app:itemTextColor="@android:color/background_dark"
        app:menu="@menu/bottom_navigation_menu">
    </android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>

这样RelativeLayout会自动识别上方的AppBarLayout并调整位置，同时还能实现滚动联动的效果，一举两得。

调整完布局后，运行App就能看到TabLayout正常显示啦！

内容的提问来源于stack exchange，提问作者vinit