2016-07-06 32 views
3

YouTubeアプリに表示されているように、横向きモードのときにツールバーとタブレイアウトを組み合わせるにはどうすればよいですか?私はこれに決定的な答えを見つけることができないようです。私の現在のレイアウトツールバーと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> 
+0

は、タブからのスクリーンショットこのです私のデバイス –

+4

ヒント:ツールバーは 'ViewGroup'です。その中に 'TabLayout'を置くことができます。横置きモードのタブレットのレイアウト。 –

+0

これは確かにLollypopデバイスの最新バージョンのアプリからのスクリーンショットです。風景モードです。 –

答えて

2

前述したように、ツールバーはそうTabLayoutはこの子を行うことができるのViewGroupです。

<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> 
あなたのアクションバー(古典的な、ない android.support.v7.widget.Toolbar)成分とのレイアウトを追加することができます
0

まずメニューリソースメニューを作成\ 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> 

すると、ちょうど1つのTabLayout成分を含む/ top_bar_tab_layout.xmlレイアウトと呼ばれるレイアウトを作成する(あなたも、他のコンポーネントを追加することができます!):

あなたの活動onCreateOptionsMenu内部の基準を作成し、このTabLayoutコンポーネントにアクセスするには
<?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" /> 

@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); 
    } 
} 
関連する問題