如何使我的TabLayout标题在ToolBar下？

Question

我在TabLayout中有5个标签的应用程序。我决定在MainActivity中初始化它。每个选项卡都是一个片段，每个选项卡都有自己的ToolBar，所以我决定分别初始化每个片段中的工具栏。但问题是我的工具栏现在位于TabLaout标题下。我想问一下如何将它们移动下来，或者我应该以另一种方式组织起来？

MainActivity：

z

片段示例：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".activity.MainActivity">

  <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/AppTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/tabs" />

</RelativeLayout>

TabLayout inisialization：

<RelativeLayout 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=".activity.MainActivity">

  <View
    android:id="@+id/transparent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:alpha="90"
    android:background="#20000000"
    android:visibility="gone" />

  <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_home"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_alignParentTop="true"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:title="Your Wi-Fi is online">

    <Button
      android:id="@+id/btn_pause"
      android:layout_width="90dp"
      android:layout_height="36dp"
      android:layout_margin="17dp"
      android:layout_gravity="end"
      android:background="@color/white"
      android:text="@string/pause"
      android:textColor="@color/midPurple"
      android:textSize="14sp" />

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

ToolBar初始化示例：

  private void initUIComponents() {
    mViewPager = findViewById(R.id.viewpager);
    mTabLayout = findViewById(R.id.tabs);
    mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

    mViewPager.setAdapter(new MenuCategoryAdapter(getSupportFragmentManager()));
    mTabLayout.setupWithViewPager(mViewPager);

    for (int i = 0; i < mTabLayout.getTabCount(); i++) {
      mTabLayout.getTabAt(i).setIcon(R.drawable.homeicon);
    }
  }

它看起来如何：

Answer 1

一种方法是将ViewPager的高度设置为math_parent，并将TabLayout放在ViewPager上，80dp的上边距为<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".activity.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" style="@style/AppTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="80dp" android:background="?attr/colorPrimary" android:elevation="4dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> </RelativeLayout> 为片段工具栏预留空间

TabLayout

在你的片段中，在工具栏下放置假的空TabLayout以保留<RelativeLayout 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=".activity.MainActivity"> <View android:id="@+id/transparent_view" android:layout_width="match_parent" android:layout_height="match_parent" android:alpha="90" android:background="#20000000" android:visibility="gone" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_home" android:layout_width="match_parent" android:layout_height="80dp" android:layout_alignParentTop="true" android:background="?attr/colorPrimary" android:elevation="4dp" android:minHeight="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:title="Your Wi-Fi is online"> <Button android:id="@+id/btn_pause" android:layout_width="90dp" android:layout_height="36dp" android:layout_gravity="end" android:layout_margin="17dp" android:background="@color/white" android:text="@string/pause" android:textColor="@color/midPurple" android:textSize="14sp" /> </android.support.v7.widget.Toolbar> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/toolbar_home" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/fake_tabs" style="@style/AppTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:elevation="4dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> <!-- Your other views --> </LinearLayout> </RelativeLayout> 的空格，在其下面你可以放置其他视图

message1