Android - 自定义操作栏 Sherlock 选项卡

Question

我正在尝试自定义操作栏 sherlock 选项卡，以便它们在选项卡图标下方显示选项卡文本。在搜索和阅读有关该主题后，我仍然没有太多运气。

这是我得到的结果：

已选择自定义选项卡1

未选择自定义 tab1，选择标准 tab2

这是我目前所拥有的：

创建了我自己的 styles.xml，我在其中更改了一些操作栏设置：

<style name="SkoletubeTheme" parent="Theme.Sherlock">
    <item name="actionBarSize">@dimen/st__action_bar_default_height</item>
    <item name="actionBarTabStyle">@style/Skoletube.TabView</item>
    <item name="actionBarTabTextStyle">@style/Skoletube.Tab.Text</item>
</style>

<style name="Skoletube.TabView" parent="Widget.Sherlock.ActionBar.TabView">
    <item name="android:background">@drawable/abs__tab_indicator_holo</item>
    <item name="android:paddingLeft">6dp</item>
    <item name="android:paddingRight">6dp</item>
</style>

<style name="Skoletube.Tab.Text" parent="Widget.Sherlock.ActionBar.TabText">
    <item name="android:textAppearance">@android:style/TextAppearance.Medium</item>
    <item name="android:textColor">@android:color/primary_text_dark</item>
    <item name="android:textSize">10sp</item>
</style>

创建了一个 xml 资源，我在其中更改并更改了操作栏的一些文本设置。在这里，我增加了操作栏的高度，这反过来又增加了选项卡的高度。我还减小了文本的大小，以便为标签中的图标和文本腾出空间

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Default height of an action bar. -->
<dimen name="st__action_bar_default_height">58dip</dimen>
<!-- Text size for action bar titles -->
<dimen name="ab__action_bar_title_text_size">10dp</dimen>
<!-- Text size for action bar subtitles -->
<dimen name="ab__action_bar_subtitle_text_size">6dp</dimen>
<!-- Top margin for action bar subtitles -->
<dimen name="ab__action_bar_subtitle_top_margin">-3dp</dimen>
<!-- Bottom margin for action bar subtitles -->
<dimen name="ab__action_bar_subtitle_bottom_margin">5dip</dimen>
</resources>

然后我为要使用的选项卡定义了一个自定义布局，我将文本放置在图标下方：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/customTabLayout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:focusable="true"
android:gravity="center"
style="?attr/actionBarTabStyle"
>
<ImageView
    android:id="@+id/sk_abs__tab_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:background="@android:color/transparent"
    />
<com.actionbarsherlock.internal.widget.ScrollingTextView
    android:id="@+id/sk_abs__tab_txt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/sk_abs__tab_icon"
    android:layout_alignWithParentIfMissing="true"
    android:layout_weight="1"
    android:layout_centerHorizontal="true"
    android:lines="1"
    android:scrollHorizontally="true"
    android:ellipsize="marquee"
    android:marqueeRepeatLimit="marquee_forever"
    style="@style/Skoletube.Tab.Text"
    />
<FrameLayout
    android:id="@+id/abs__tab_custom"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:padding="5dip"
    android:layout_weight="1"
    android:visibility="gone"
    />

只是为了记录，作为相对布局的样式传递的属性指向：

<style name="Widget.Sherlock.ActionBar.TabBar" parent="android:Widget"></style>

然后我将这些更改应用到我的应用程序中，如下所示，第一个选项卡具有我的自定义实现，第二个选项卡具有标准实现：

final ActionBar actionBar;
    actionBar = getSupportActionBar();
    actionBar.setDisplayHomeAsUpEnabled(false);
    actionBar.setDisplayUseLogoEnabled(true);
    // Set up tabs

    myMediaTab = actionBar.newTab();
    myMediaTab.setCustomView(R.layout.skoletube_tab_layout);
    ImageView myMediaImg = (ImageView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_icon);
    myMediaImg.setImageResource(R.drawable.tab_mymedia);
    ScrollingTextView myMediaText = (ScrollingTextView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_txt);
    myMediaText.setText("Tab1");
    myMediaTab.setTabListener(this);
    myMediaTab.setTag("MyMediaTab");
    actionBar.addTab(myMediaTab);

    myChannelsTab = actionBar.newTab();
    myChannelsTab.setIcon(drawable.tab_mychannels);
    myChannelsTab.setText("Tab2");
    myChannelsTab.setTabListener(this);
    myChannelsTab.setTag("myChannelsTab");
    actionBar.addTab(myChannelsTab);

虽然我认为我已经接近解决方案，但我认为我在某个地方错过了一步。

显然，文本后面/图像下方的蓝条不需要存在，但我似乎还没有找到可以设置焦点图像的位置（我希望 img 在选择选项卡时改变颜色) 和文本颜色。我是否需要使图像视图具有焦点并通过它来处理它？

我在这方面还很陌生，所以如果有更好/更智能的方法来做这件事，我在这里采取的方法可能是错误的，请说。

感谢任何建议和想法。

Answer 1

我已经通过使用compound drawable 解决了这个问题：

tv = new TextView(this);
tv.setText(R.string.tab_movies);
tv.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.nav_movies, 0, 0);

mBar.addTab(mBar
    .newTab()
    .setCustomView(tv)
    .setTabListener(
    new TabListenerImpl<TheatersTabActivity>(this, "theaters",
        TheatersTabActivity.class)));

为了处理选中或未选中的图片，我使用了一个选择器：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item 
        android:state_selected="true"
        android:drawable="@drawable/nav_movies_on"/>
    <item 
        android:state_selected="false"
        android:drawable="@drawable/nav_movies_off"/>
</selector>

Answer 2

我不知道您是否找到了答案，但一种解决方案可能是修改选项卡图像以包含文本，使用 GIMP 或 photoshop 的东西，然后将这些图像设置在选项卡，而不是图像和文本。这样做有点尴尬，但它会起作用。

希望这会有所帮助！