Android – 自定义操作栏sherlock选项卡

我试图自定义操作栏sherlock选项卡,以便他们显示在选项卡图标下的选项卡文本。 在search和阅读这个主题后,我仍然没有太多的运气。

这是我得到的结果:

自定义选项卡1选中 选

自定义选项卡1未选中,标准选项卡2被选中 未选中的

这是我迄今为止:

创build我自己的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> 

创build了一个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" /> 

只是为了logging,作为相对布局的样式传递的属性指向这个:

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

虽然我认为我接近解决scheme,但我想我已经错过了某个步骤。

很显然,图片背后的蓝色条不在那里,但我似乎也没有find我可以设置聚焦图像的位置(我希望img在select标签时改变颜色)和文本颜色。 我是否需要使imageview可以聚焦并通过处理呢?

在这方面我还是比较新的,所以我在这里采取的方法可能是错误的,如果有一个更好/更聪明的方式去做这个请说。

欣赏任何build议和想法。

我不知道你是否已经find了答案或不是,但一个解决scheme可能是修改选项卡图像包括文本, GIMP或photoshop的东西,然后只是设置这些图像在标签,而不是图像和文本。 这是一个尴尬的做法,但它会工作的一点点。

希望这可以帮助!

我已经通过使用复合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))); 

为了处理选定或未select的图像,我正在使用一个select器:

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