如何使我的TabLayout头在ToolBar下？

Question

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

MainActivity：

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

片段的实施例：

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

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预留空间碎片工具栏

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