android - 如何使我的 TabLayout 标题位于 ToolBar 下方？

Question

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

主要 Activity :

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

fragment 示例:

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

TabLayout 初始化:

  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);
    }
  }

工具栏初始化示例:

  private void initUIComponents(LayoutInflater inflater, @Nullable ViewGroup container) {
    mRootView = inflater.inflate(R.layout.fragment_home, container, false);

    mToolbarHome = mRootView.findViewById(R.id.toolbar_home);
    mBtnPause = mRootView.findViewById(R.id.btn_pause);

    if (mToolbarHome != null) {
      ((AppCompatActivity) getActivity()).setSupportActionBar(mToolbarHome);
    }

    mBtnPause.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view) {
        pauseWiFi(mToolbarHome, mBtnPause);
      }
    });
  }

它看起来怎么样:

Answer 1

一种方法是将 ViewPager 的高度设置为 math_parent，然后将 TabLayout 放在 ViewPager 上使用 80dp 的上边距为 fragment 工具栏保留空间

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

并且在你的 fragment 中，将假的和空的 TabLayout 放在工具栏下面以保留 TabLayout 的空间，你可以在它下面放置你的其他 View

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