Android - 自定义操作栏 Sherlock 选项卡 [英] Android - customizing actionbar sherlock tabs

问题描述

我正在尝试自定义操作栏 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 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 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></风格>

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

<?xml version="1.0" encoding="utf-8"?><资源><!-- 操作栏的默认高度.--><dimen name="st__action_bar_default_height">58dip</dimen><!-- 操作栏标题的文本大小 --><dimen name="ab__action_bar_title_text_size">10dp</dimen><!-- 操作栏字幕的文本大小 --><dimen name="ab__action_bar_subtitle_text_size">6dp</dimen><!-- 动作栏字幕的上边距 --><dimen name="ab__action_bar_subtitle_top_margin">-3dp</dimen><!-- 动作栏字幕的下边距 --><dimen name="ab__action_bar_subtitle_bottom_margin">5dip</dimen></资源>

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

<?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"机器人:方向=垂直"安卓:layout_weight="1"机器人:焦点=真"机器人:重力=中心"style="?attr/actionBarTabStyle"><图像视图android:id="@+id/sk_abs__tab_icon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizo​​ntal="true"android:background="@android:color/transparent"/><com.actionbarsherlock.internal.widget.ScrollingTextViewandroid:id="@+id/sk_abs__tab_txt"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/sk_abs__tab_icon"安卓:layout_alignWithParentIfMissing="true"安卓:layout_weight="1"android:layout_centerHorizo​​ntal="true"机器人:线=1"android:scrollHorizo​​ntally="true"android:ellipsize="选框"机器人:marqueeRepeatLimit="marquee_forever"style="@style/Skoletube.Tab.Text"/><框架布局android:id="@+id/abs__tab_custom"android:layout_width="wrap_content"android:layout_height="fill_parent"android:padding="5dip"安卓:layout_weight="1"机器人:可见性=消失"/>

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

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

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

final ActionBar actionBar;actionBar = getSupportActionBar();actionBar.setDisplayHomeAsUpEnabled(false);actionBar.setDisplayUseLogoEnabled(true);//设置标签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 在选择选项卡时改变颜色) 和文本颜色.我是否需要使图像视图具有焦点并通过它来处理它?<​​/p>

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

感谢任何建议和想法.

解决方案

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

希望这会有所帮助！

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.

Here are the results I'm getting:

Custom tab1 selected

Custom tab1 not selected, standard tab2 selected

This is what I have so far:

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>

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.

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.

Appreciate any suggestions and ideas.

解决方案

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.

Hope this helps!

这篇关于Android - 自定义操作栏 Sherlock 选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！