Android - 自定义操作栏 Sherlock 标签 [英] Android - customizing actionbar sherlock tabs
问题描述
我正在尝试自定义操作栏 Sherlock 选项卡，以便它们在选项卡图标下方显示选项卡文本.在搜索并阅读了有关该主题的内容后，我仍然没有多少运气.
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
未选择自定义选项卡1，选择标准选项卡2
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 资源，我在其中更改并为操作栏编写了一些文本设置.在这里，我增加了操作栏的高度，从而增加了选项卡的高度.我还减小了文本的大小，以便为标签中的图标和文本留出空间
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 在选择选项卡时改变颜色) 和文本颜色.我是否需要使图像视图可聚焦并通过它来处理?
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.
感谢任何建议和想法.
推荐答案
我不知道您是否已经找到了答案，但一种解决方案可能是修改选项卡图像以包含文本，使用 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 - 自定义操作栏 Sherlock 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
