在 ActionBar 中自定义 TABS - ActionBarCompat

Question

我想实现这个：

但我无法降低 ActionBarCompat 中选项卡的高度。我的标签高度目前是默认高度。

我读到，如果我减小 ActionBar 的大小，我可以减小选项卡的大小，我已经尝试过了，但我希望我的 ActionBar 保持其正常大小。

我尝试从 Android Action Bar Style Generator 生成自定义样式，但它没有帮助我更改选项卡的高度。

这是我的style.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="Theme.Musclemonster" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="actionBarItemBackground">@drawable/selectable_background_musclemonster</item>
        <item name="popupMenuStyle">@style/PopupMenu.Musclemonster</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Musclemonster</item>
        <item name="actionBarTabStyle">@style/Theme.Musclemonster.TabsStyle</item>
        <item name="actionDropDownStyle">@style/DropDownNav.Musclemonster</item>
        <item name="actionBarStyle">@style/ActionBar.Solid.Musclemonster</item>
        <item name="actionModeBackground">@drawable/cab_background_top_musclemonster</item>
        <item name="actionModeSplitBackground">@drawable/cab_background_bottom_musclemonster</item>
        <item name="actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Musclemonster</item>
        <item name="actionBarTabTextStyle">@style/Theme.Musclemonster.TabsTextStyle</item>

        <!-- Light.DarkActionBar specific -->
        <item name="actionBarWidgetTheme">@style/Theme.Musclemonster.Widget</item>
    </style>

    <style name="ActionBar.Solid.Musclemonster" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@drawable/ab_solid_musclemonster</item>
        <item name="backgroundStacked">@drawable/ab_stacked_solid_musclemonster</item>
        <item name="backgroundSplit">@drawable/ab_bottom_solid_musclemonster</item>
        <item name="progressBarStyle">@style/ProgressBar.Musclemonster</item>
    </style>

    <style name="ActionBar.Transparent.Musclemonster" parent="@style/Widget.AppCompat.ActionBar">
        <item name="background">@drawable/ab_transparent_musclemonster</item>
        <item name="progressBarStyle">@style/ProgressBar.Musclemonster</item>
    </style>

    <style name="PopupMenu.Musclemonster" parent="@style/Widget.AppCompat.PopupMenu">
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_musclemonster</item>
    </style>

    <style name="DropDownListView.Musclemonster" parent="@style/Widget.AppCompat.ListView.DropDown">
        <item name="android:listSelector">@drawable/selectable_background_musclemonster</item>
    </style>

    <style name="ActionBarTabStyle.Musclemonster" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:background">@drawable/tab_indicator_ab_musclemonster</item>
    </style>

    <style name="DropDownNav.Musclemonster" parent="@style/Widget.AppCompat.Spinner.DropDown.ActionBar">
        <item name="android:background">@drawable/spinner_background_ab_musclemonster</item>
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_musclemonster</item>
        <item name="android:dropDownSelector">@drawable/selectable_background_musclemonster</item>
    </style>

    <style name="ProgressBar.Musclemonster" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progress_horizontal_musclemonster</item>
    </style>

    <style name="ActionButton.CloseMode.Musclemonster" parent="@style/Widget.AppCompat.ActionButton.CloseMode">
        <item name="android:background">@drawable/btn_cab_done_musclemonster</item>
    </style>

    <!-- this style is only referenced in a Light.DarkActionBar based theme -->
    <style name="Theme.Musclemonster.Widget" parent="@style/Theme.AppCompat">
        <item name="popupMenuStyle">@style/PopupMenu.Musclemonster</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Musclemonster</item>
    </style>

    <!-- This style is for tabs -->
    <style name="Theme.Musclemonster.TabsStyle" parent="@style/Widget.AppCompat.Base.ActionBar.TabView">
        <item name="android:background">@drawable/tabbackground</item>
    </style>

    <style name="Theme.Musclemonster.TabsTextStyle" parent="@style/Widget.AppCompat.Base.ActionBar.TabText">
        <item name="android:textColor">@android:color/white</item>
    </style>

</resources>

这是由操作栏样式生成器生成的。我尝试了很多来自 Google 的链接。我现在在 Google Chrome 中打开了大约 20 个选项卡。如果我遗漏了任何内容，请告诉我。或者让我知道如何实现这种标签样式。谢谢！

Answer 1

您需要的是带有标题条控件而不是选项卡的 ViewPager，查看 tutorial here and download the sample app 对其进行自定义。

<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v4.view.PagerTitleStrip
    android:id="@+id/pager_title_strip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:background="#33b5e5"
    android:textColor="#fff"
    android:paddingTop="4dp"
    android:paddingBottom="4dp" />

希望对您有所帮助！

在 ActionBar 中自定义 TABS - ActionBarCompat

Customize TABS in ActionBar - ActionBarCompat

android

android-xml

android-actionbar-compat