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

时间:2015-10-25 16:08:29

标签: android material-design android-toolbar

所以我正在为Android创建一个Material Design应用程序。我正在使用新的工具栏而不是使用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是一个寻呼机适配器,用于保存由文档中的标签显示的页面。

1 个答案:

答案 0 :(得分:4)

您可以使用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