Android的 - 自定义动作条福尔摩斯标签 [英] Android - customizing actionbar sherlock tabs

问题描述

我试着让它们显示下方的标签图标标签文本自定义动作条福尔摩斯标签。搜索和阅读有关的主题后，我仍然没有多少运气。

Im trying to customize the actionbar sherlock tabs so they display the tab text below the tab icon. After searching and reading about the subject, I'm still not having much luck.

下面是结果我得到：

选择自定义TAB1

Custom tab1 selected

自定义TAB1没有选择，标准TAB2选择

Custom tab1 not selected, standard tab2 selected

这是我到目前为止有：

创建了自己的styles.xml，我改变了一些动作条设置：

Created my own styles.xml where I change some of the actionbar settings:

<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的ressource我的改变，owerwrite一些textsettings的动作条。在这里，我增加了动作条，这反过来又增加了标签的高度的高度。我还降低了文本的大小，以使在标签室用于装配图标和文本

Created an xml ressource where I change and owerwrite some textsettings for the actionbar. Here I have increased the height of the actionbar, which in turn increases the height of the tabs. I also decreased the size of the text in order to make room for fitting icon and text in the tab

<?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>

然后我定义自定义布局要使用的标签，在这里我把图标下面的文字：

Then I've defined a custom layout for the tabs to use, where I place the text below the icon:

<?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"
    />

只是为了记录为相对布局点传递的风格，这个属性：

Just for the record the attribute passed as the style for the relative layout points to this:

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

然后，我已经应用了这些更改我的应用程序，如下所示，第一个选项卡我定制的实现，第二个选项卡有标准的实现：

Then I've applied these changes to my app as follows, the first tab has my customized implementation, the second tab has the standard implementation:

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);

虽然我认为我接近的解决方案，我想我已经错过了一步的地方。

While I think I'm close to the solution, I think I've missed a step somewhere.

显然文本后面的蓝色条/下方的图片需要不应该存在，但我也有似乎并没有找出我可以设置聚焦图像（我想IMG改变颜色时所选择的标签）andtext颜色。我需要做的ImageView可聚焦，并通过或？

Obviously the blue bar behind the text/below the image needs to not be there, but I also haven't seemed to find out where I can set the focused image(I want the img to change color when a tab is selected) andtext color. Do I need to make the imageview focusable and handle it through that or?

我还是相当新的这一点，所以我在这里所采取的方法可能是错误的，如果有一个更好/更聪明的方式去这样做，请不要说了。

I'm still fairly new at this, so the approach I have taken here might be wrong if there is a better/smarter way to go about doing this please do say.

鸭preciate任何建议和想法。

Appreciate any suggestions and ideas.

推荐答案

我不知道你是否已经找到了这个答案或没有，但一个解决办法可能是修改标签图像包含的文本，用< A HREF =htt​​p://www.gimp.org/相对=nofollow> GIMP 或Photoshop的东西，然后只设置，而不是图像和文本的图像选项卡。这是一个有点做一个尴尬的方式，但它的工作。

I don't know if you have found an answer for this or not yet but one solution could be to modify the tab image to include the text, with GIMP or photoshop something, and then just set those images in the tabs, instead of images and text. It is a bit of an awkward way of doing it but it would work.

希望这有助于！

这篇关于Android的 - 自定义动作条福尔摩斯标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！