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

Question

所以我正在为 Android 创建一个 Material Design 应用。我正在使用新的工具栏而不是使用操作栏。在一项活动中，我想在工具栏下方显示选项卡。这适用于纵向和横向模式，但在横向模式下，选项卡居中并且不会覆盖视图的整个宽度。

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

这是我的活动的布局：

<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" />`

Meterial design Tab layout detailed tutorial