如何在横屏模式下结合工具栏和选项卡布局？

Question

如何在横屏模式下将工具栏和选项卡布局组合在一起，就像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>

- Luke Allison

---

这是选项卡的截图吗？因为我在我的设备上没有看到这种行为。 - Vivek Mishra

提示：工具栏是一个ViewGroup。您可以将TabLayout放在其中。在平板电脑横向模式下的布局中。 - R. Zagórski

这确实是一个Lollypop设备上最新版本的应用程序的截图。它处于横屏模式。 - Luke Allison

@R.Zagórski 这个能用 XML 实现吗？ - Luke Allison

当然，你试过了吗？看看如何向“工具栏”添加内容：https://dev59.com/-F8d5IYBdhLWcg3waxgp - R. Zagórski

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>

- Luke Allison

Answer 2

你可以向ActionBar（经典版，而不是android.support.v7.widget.Toolbar）添加带有组件的布局。

首先创建一个菜单资源menu\top_menu.xml作为你的ActionBar菜单：

<?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组件，请在您的activity 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;
    }
}

这应该足够让你在操作栏中添加一个选项卡布局。它可以与其他组件如下拉列表或文本视图一起使用。

另外，如果你计划只在横屏时显示这个选项卡布局，你需要做以下操作：

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

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

- Adriano Moutinho