带有选项卡的 ActionBar

Question

您好，我正在尝试将 TabLayout 放在 ActionBar 内，而不是在其下方。可以做吗？

我四处搜索并找到了 ActionBar.Tab class，但它已被弃用。还有其他想法吗？

Answer 1

我在示例代码中将下面的库用于选项卡。（将此行添加到您应用的 gradle）

compile 'com.jpardogo.materialtabstrip:library:1.1.0'

然后您可以使用如下所示的工具栏布局：

<android.support.v7.widget.Toolbar 

xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        style="@style/Widget.MyApp.Toolbar.Solid" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/abc_action_bar_default_height_material"
        android:layout_below="@+id/toolbar">

        <com.astuetz.PagerSlidingTabStrip
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="@dimen/abc_action_bar_default_height_material"
            android:background="@color/AppPrimary"
            app:pstsIndicatorColor="#fff"
            app:pstsIndicatorHeight="4dp"
            app:pstsTabTextAllCaps="false"
            app:pstsTabTextColor="@color/tabTextColor"
            app:pstsTabTextSize="16sp"
            app:pstsUnderlineColor="@color/AppPrimary"
            app:pstsUnderlineHeight="4dp" />

        </RelativeLayout>

</RelativeLayout>

以下是我在示例布局中使用的样式：

<style name="Widget.MyApp.Toolbar.Solid" parent="Widget.AppCompat.ActionBar">
        <item name="android:background">@color/AppPrimary</item>
        <item name="android:theme">@style/ThemeOverlay.MyApp.ActionBar</item>
        <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">@dimen/abc_action_bar_default_height_material</item>
    </style>

    <style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
        <!-- Parent theme sets colorControlNormal to textColorPrimary. -->
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>

在您的 activity 布局中，您必须包含如下所示的工具栏：

<include
        android:id="@+id/toolbar_main"
        layout="@layout/toolbar_tabs" />

并且您必须将工具栏设置为支持操作栏并将其用作操作栏。

Toolbar mToolbar = (Toolbar)findviewById(R.id.toolbar_main);
setSupportActionBar(mToolbar);

将 viewpager 添加到 activity 的布局：（添加工具栏的位置）

<android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        />

为您的 viewpager 创建一个适配器，如下所示：

public class TabsAdapter extends FragmentPagerAdapter {
    private List<YourModel> mObjects;

    public TabsAdapter(FragmentManager fm, List<YourModel> mObjects) {
        super(fm);
        this.mObjects = mObjects;
    }

    @Override
    public Fragment getItem(int position) {
        return new YourPagerFragment();
    }

    @Override
    public int getCount() {
        return mObjects.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mObjects.get(position).getName();
    }
}

最后，找到你的viewpager，pager sliding tab strip，创建一个新的pager adapter并将它设置到你的viewpager，如下所示：

ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);
PagerSlidingTabStrip mTabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
TabsAdapter mAdapter = new TabsAdapter(getSupportFragmentManager(), objects);
mViewPager.setAdapter(mAdapter);
mTabs.setViewPager(mViewPager);

祝你好运。

Answer 2

您可以使用后退按钮和选项卡布局创建自己的布局。您可以在没有 ActionBar 的情况下在顶部使用此布局。在返回上单击以编程方式调用 onBackPressed() 方法。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageButton
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="?selectableItemBackgroundBorderless"
        android:src="@drawable/ic_back" />

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

带有选项卡的 ActionBar

ActionBar with Tabs

android

android-actionbar

android-toolbar

android-tablayout