Android 操作工具栏选项卡在横向模式下的大小

Question

所以我正在为 Android 创建一个材料设计应用程序。我使用的是新的 Toolbar 而不是 ActionBar。在一项活动中，我想在工具栏下方显示选项卡。这对纵向和横向模式都适用，但在横向模式下，选项卡居中且不覆盖视图的整个宽度。

这是设计使然还是我需要知道什么？

这是我的活动的布局：

<android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:height="?attr/actionBarSize"
        android:background="@color/primary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:titleTextAppearance="@style/ToolbarTitle"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/toolbar_tabs"
        android:height="?attr/actionBarSize"
        android:background="@color/primary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways" />

</android.support.design.widget.AppBarLayout>

以下代码将其初始化为onCreate：

// Set up the toolbar
this.setSupportActionBar(mToolbar);
ActionBar ab = this.getSupportActionBar();
if (ab != null)
{
    ab.setDisplayHomeAsUpEnabled(true);
    ab.setHomeButtonEnabled(true);
    ab.setDisplayShowTitleEnabled(true);
}

// Set up the pager and tabs from the pager
mTabViewPager.setAdapter(mTabPagerAdapter);
mTabLayout.setupWithViewPager(mTabViewPager);

这mTabPagerAdapter是一个寻呼机适配器，用于保存要由文档中的选项卡显示的页面。

Answer 1

您可以使用app:tabGravity="fill"来适应整个屏幕的宽度。

<android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabIndicatorColor="@color/white"
                app:tabMode="fixed"
                app:tabMaxWidth="0dp"
                app:tabSelectedTextColor="@color/white"
                app:tabTextColor="@color/white_dim" />`

材质设计Tab布局详细教程