如何在橫向上組合工具欄和TabLayout？

Question

如何在橫向模式下將工具欄和Tablayout組合起來，如youtube應用程序中所示？我似乎無法爲此找到明確的答案。

我目前的佈局：

<LinearLayout 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:orientation="vertical" 
    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.Dark"/> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tabLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="?attr/colorPrimary" 
     app:tabMode="fixed" 
     app:tabGravity="fill"/> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     android:background="@color/transparent"/> 

    </LinearLayout> 

Answer 1

如上所述，工具欄是一個ViewGroup所以TabLayout可以由這一個孩子。

<LinearLayout 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:orientation="vertical" 
    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.Dark" 
     android:title="Viewer"> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tabLayout" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="?attr/colorPrimary" 
     android:layout_gravity="center_horizontal" 
     app:tabMode="fixed" 
     app:tabGravity="center"/> 
    </android.support.v7.widget.Toolbar> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     android:background="@color/transparent"/> 

</LinearLayout> 

Answer 2

您可以添加與組件​​的佈局動作條的（經典的一個，而不是 android.support.v7.widget.Toolbar）

首先創建一個菜單資源菜單\ top_menu.xml到是你的動作條菜單：

<?xml version="1.0" encoding="utf-8"?> 
<menu xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto"> 
<item 
android:id="@+id/topBarTabLayout" 
android:title="" 
app:actionLayout="@layout/top_bar_tab_layout" 
app:showAsAction="always" /> 

      <!-- Other menu items here --> 

</menu> 

然後，創建一個名爲佈局只包含一個TabLayout組件/ top_bar_tab_layout.xml佈局（您可以添加其他成分呢！）：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.TabLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/tab_layout_menu" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:paddingBottom="0dp" 
    android:paddingTop="0dp" /> 

要訪問此TabLayout組件，您的活動中創建一個參考onCreateOptionsMenu：

@Override 
public boolean onCreateOptionsMenu(Menu menu) { 
// Inflate the menu; this adds items to the action bar if it is present. 
getMenuInflater().inflate(R.menu.top_menu, menu); 

topBarTabLayoutMenuItem = menu.findItem(R.id.topBarTabLayout); 
topBarTabLayout = (TabLayout) topBarTabLayoutMenuItem.getActionView(); 

//ADD #1 TAB WITH A ICON RESOURCE 
topBarTabLayout.addTab(topBarTabLayout.newTab().setIcon(R.drawable.file)); 

//ADD #2 TAB WITH A ICON RESOURCE 
topBarTabLayout.addTab(topBarTabLayout.newTab().setIcon(R.drawable.folder)); 

//This may be necessary to force tablayout to fill all space. 
topBarTabLayout.setTabGravity(topBarTabLayout.GRAVITY_FILL); 


//Add listener to do stuff! 
topBarTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
      @Override 
      public void onTabSelected(TabLayout.Tab tab) { 
       //do whatever you want here, like selecting a viewpager item or open an intent 
      } 

      @Override 
      public void onTabUnselected(TabLayout.Tab tab) { 
     //do whatever you want here 
      } 

      @Override 
      public void onTabReselected(TabLayout.Tab tab) { 
     //do whatever you want here 
      } 
     }); 

     return true; 
    } 
} 

這應該是足夠的tabLayout添加到您的動作條。它將與其他組件一起工作，如微調器或textViews。

另外，如果您是在設置此tablayout可見的規劃，只有當方向爲橫向，你必須做這樣的事情：

@Override 
public void onConfigurationChanged(Configuration newConfig) { 
    super.onConfigurationChanged(newConfig); 

    if (newConfig.orientation==Configuration.ORIENTATION_LANDSCAPE) { 
       topBarTabLayoutMenuItem.setVisible(true); 
     } else { 
     topBarTabLayoutMenuItem.setVisible(false); 
    } 
}