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

您可以向ActionBar添加包含组件的布局（经典的，而不是 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>

然后，创建一个名为layout / top_bar_tab_layout.xml的布局，其中只包含一个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" />

要访问此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添加到您的actionBar中。它可以与其他组件一起使用，如spinner或textViews。

此外，如果您计划仅在方向为横向时设置此tablayout，则必须执行以下操作：

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

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

如何在横向方向上组合工具栏和TabLayout？

2 个答案: