在ActionBar中自定义TABS - ActionBarCompat

时间:2015-03-20 07:35:10

标签: android android-xml android-actionbar-compat

我想实现这个目标:

enter image description here

但我无法降低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>

这是由Action Bar Style Generator生成的。我尝试了很多谷歌的链接。我现在在Google Chrome中打开了大约20个标签。如果我错过了,请告诉我。或者只是让我知道如何实现这种风格的标签。谢谢!

1 个答案:

答案 0 :(得分:0)

您需要的是带有标题条控件而不是标签的ViewPager,请在此处查看tutorial并下载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" />

希望这有帮助!