使用不同的颜色不同ActionBar.Tab [英] Use different Color for different ActionBar.Tab
问题描述
我想有动作条中的所有选项卡有不同颜色的指标，例如蓝色标签1，红色标签2等。
要做到这一点我确实创造了不同的选择对所有颜色，并把他们在不同的XMLS的绘制。在style.xml我对
美其名曰 ＆LT;样式名称=MyTheme的父=AppBaseTheme＆GT;
＆LT;项目名称=机器人：actionBarTabStyle＆GT; @风格/ ActionBarTabStyleRed＆LT; /项目＆GT;
＆LT; /风格＆GT;
＆LT;样式名称=ActionBarTabStyleRed＆GT;
＆LT;项目名称=机器人：背景＆GT; @可绘制/ tab_indicator_red＆LT; /项目＆GT;
＆LT; /风格＆GT;
我已经创建了风格不同的颜色了。现在，当我改变提拉或风格不同的颜色，它的工作原理。我可以看到的颜色被应用到标签。但是，由于所有的选项卡是相同的颜色，它并没有解决我的目的。我试图设置选项卡的样式 onTabSelected（），但有没有办法做到这一点。
最后，我试图创造不同的主题不同的颜色，并试图programtically设置他们在 onTabSelected（），但后来我才知道这个主题之前必须设置的setContentView（）。
所以我的问题我is..How能做到这一点？有没有什么办法可以有不同的颜色不同的标签指标???
更新： -
可绘制/ tab_indicator_red.xml
＆LT;选择的xmlns：机器人=http://schemas.android.com/apk/res/android＆GT;
＆LT;！ - 非重点国家 - ＆GT;
＆LT;项目安卓state_focused =假的Android版本：state_selected =假的Android版本：STATE_ pressed =假机器人：可绘制=@机器人：彩色/透明/＆GT;
＆LT;项目安卓state_focused =假的Android版本：state_selected =真正的机器人：STATE_ pressed =假机器人：可绘制=@可绘制/ tab_selected_red/＆GT;
＆LT;！ - 聚焦国家 - ＆GT;
＆LT;项目安卓state_focused =真正的机器人：state_selected =假的Android版本：STATE_ pressed =假机器人：可绘制=@可绘制/ tab_unselected_focused_red/＆GT;
＆LT;项目安卓state_focused =真正的机器人：state_selected =真正的机器人：STATE_ pressed =假机器人：可绘制=@可绘制/ tab_selected_focused_red/＆GT;
＆LT; - ！pressed - ＆GT;
＆LT;！ - 非重点国家 - ＆GT;
＆LT;项目安卓state_focused =假的Android版本：state_selected =假的Android版本：STATE_ pressed =真正的机器人：可绘制=@可绘制/ tab_unselected_ pressed_red/＆GT;
＆LT;项目安卓state_focused =假的Android版本：state_selected =真正的机器人：STATE_ pressed =真正的机器人：可绘制=@可绘制/ tab_selected_ pressed_red/＆GT;
＆LT;！ - 聚焦国家 - ＆GT;
＆LT;项目安卓state_focused =真正的机器人：state_selected =假的Android版本：STATE_ pressed =真正的机器人：可绘制=@可绘制/ tab_unselected_ pressed_red/＆GT;
＆LT;项目安卓state_focused =真正的机器人：state_selected =真正的机器人：STATE_ pressed =真正的机器人：可绘制=@可绘制/ tab_selected_ pressed_red/＆GT;
＆LT; /选择器＆GT;
我想我有一个起点，为你，但它是一个有点繁琐。 设置操作栏具有以下code可以设置标签来使用你自定义外观：
//...somewhere中的OnCreate
动作条酒吧= getActionBar（）;
bar.setNavigationMode（ActionBar.NAVIGATION_MODE_TABS）;
ActionBar.Tab TAB1 = bar.newTab（）;
TextView的TV1 = CREATETAB（选项卡1，R.drawable.firsttabdrawable）;
tab1.setCustomView（TV1）;
tab1.setTabListener（本）;
ActionBar.Tab TAB2 = bar.newTab（）;
tab2.setCustomView（CREATETAB（选项卡2，R.drawable.secondTabDrawable））;
tab2.setTabListener（本）;
ActionBar.Tab TAB3 = bar.newTab（）;
tab3.setCustomView（CREATETAB（标签3，R.drawable.thirdTabDrawable））;
tab3.setTabListener（本）;
ActionBar.Tab TAB4 = bar.newTab（）;
tab4.setCustomView（CREATETAB（表4，R.drawable.fourthTabDrawable））;
tab4.setTabListener（本）;
bar.addTab（TAB1）;
bar.addTab（TAB2）;
bar.addTab（TAB3）;
bar.addTab（TAB4）;
CREATETAB方法如下：
私人TextView的CREATETAB（字符串titleText，INT tabBackgroundDrawableId）
{
TextView的电视=新的TextView（本）;
//设置标题和字幕外观
tv.setTextAppearance（这一点，R.style.MyDefaultTabTextAppearance）;
tv.setText（titleText）;
//设置标签的外观
tv.setBackgroundResource（tabBackgroundDrawableId）;
tv.setLayoutParams（新android.view.ViewGroup.LayoutParams（android.view.ViewGroup.LayoutParams.MATCH_PARENT，android.view.ViewGroup.LayoutParams.WRAP_CONTENT））;
//确保所有选项卡具有相同的高度
tv.setMaxLines（2）;
tv.setMinLines（2）;
返回电视;
}
然而，动作条似乎标签视图添加到父视图，以便为每一个你需要将其删除，增加了填充。我在OnCreate像这样的第一个code座后这样做：
查看视图=（查看）tv1.getParent（）;
LinearLayout.LayoutParams LP =（android.widget.LinearLayout.LayoutParams）view.getLayoutParams（）;
view.setPadding（0，0，0，0）;
view.setLayoutParams（LP）;
您可能会发现这样做的更优雅/直接的方法，但作为一个起点，我认为这是值得发布。
希望这有助于。
增加：
这可能也是值得指出的是，如果你有你的标签更复杂的布局，你可以在CREATETAB方法膨胀的布局xml文件来代替。例如使用下面的XML（mytab.xml）：
＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT; RelativeLayout的的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：layout_width =match_parent
机器人：layout_height =WRAP_CONTENT＆GT;
＆LT; ImageView的
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：ID =@ + ID / tabIcon/＆GT;
＆LT; TextView的风格=@风格/ MyDefaultTabTextAppearance
机器人：layout_width =match_parent
机器人：layout_height =WRAP_CONTENT
机器人：layout_toRightOf =@ + ID / tabIcon
安卓的minlines =2
机器人：MAXLINES =2
机器人：ID =@ + ID / tabText/＆GT;
＆LT; / RelativeLayout的＆GT;
CREATETAB变为：
私人RelativeLayout的CREATETAB（字符串titleText，INT tabBackgroundDrawableId）
{
。RelativeLayout的RL =（RelativeLayout的）this.getLayoutInflater（）膨胀（R.layout.mytab，空，假）;
//设置标签的外观
rl.setBackgroundResource（tabBackgroundDrawableId）;
TextView的电视=（TextView中）rl.findViewById（R.id.tabText）;
//设置标题
tv.setText（titleText）;
ImageView的IV =（ImageView的）rl.findViewById（R.id.tabIcon）;
iv.setImageResource（R.drawable.ic_launcher）; //或提供独特的绘制方法来？
返回RL;
}
I want to have all tabs in ActionBar to have different Color Indicators, for example blue for tab 1, red for tab 2 etc.
To achieve that I did create different selectors for all colors and put them in different xmls in drawable. In style.xml I am calling them by
<style name="MyTheme" parent="AppBaseTheme">
<item name="android:actionBarTabStyle">@style/ActionBarTabStyleRed</item>
</style>
<style name="ActionBarTabStyleRed">
<item name="android:background">@drawable/tab_indicator_red</item>
</style>
I've created that style for different colors too. Now when I change the drawable or style to different color, it works. I can see colors being applied to tabs. But since all tabs are of same color, it didn't solve my purpose. I tried to set style of tabs in onTabSelected() but there's no method to do that.
Ultimately I tried to create different themes for different colors and tried to set them programtically in onTabSelected(), but then I got to know that theme must be set before setContentView().
So My questions is..How can I do that? Is there any way I can have different colors for different tab indicators???
Update:-
the drawable/tab_indicator_red.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected_red" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_red" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_red" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_red" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_red" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_red" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_red" />
</selector>
I think I have a starting point for you but it is a little bit fiddly. Setting up the action bar with the following code you can set the tabs to use you custom look:
//...somewhere in oncreate
ActionBar bar = getActionBar();
bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
ActionBar.Tab tab1 = bar.newTab();
TextView tv1 = createTab("Tab 1", R.drawable.firsttabdrawable);
tab1.setCustomView(tv1);
tab1.setTabListener(this);
ActionBar.Tab tab2 = bar.newTab();
tab2.setCustomView(createTab("Tab 2", R.drawable.secondTabDrawable));
tab2.setTabListener(this);
ActionBar.Tab tab3 = bar.newTab();
tab3.setCustomView(createTab("Tab 3", R.drawable.thirdTabDrawable));
tab3.setTabListener(this);
ActionBar.Tab tab4 = bar.newTab();
tab4.setCustomView(createTab("Tab 4", R.drawable.fourthTabDrawable));
tab4.setTabListener(this);
bar.addTab(tab1);
bar.addTab(tab2);
bar.addTab(tab3);
bar.addTab(tab4);
createTab method as follows:
private TextView createTab(String titleText, int tabBackgroundDrawableId)
{
TextView tv = new TextView(this);
//set caption and caption appearance
tv.setTextAppearance(this, R.style.MyDefaultTabTextAppearance);
tv.setText(titleText);
//set appearance of tab
tv.setBackgroundResource(tabBackgroundDrawableId);
tv.setLayoutParams(new android.view.ViewGroup.LayoutParams(android.view.ViewGroup.LayoutParams.MATCH_PARENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT));
//Make sure all tabs have the same height
tv.setMaxLines(2);
tv.setMinLines(2);
return tv;
}
However the actionbar seems to add the tab view to a parent view that adds padding so for each one you need to remove it. I did this in the oncreate after the first code block like so:
View view = (View) tv1.getParent();
LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams)view.getLayoutParams();
view.setPadding(0, 0, 0, 0);
view.setLayoutParams(lp);
You may find a more graceful/straightforward way of doing this but as a starting point I thought it was worth posting.
Hope this helps.
ADDED:
It may also be worth pointing out that if you have a more complicated layout for your tab you can inflate a layout xml file in the createTab method instead. For example using the following xml (mytab.xml):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tabIcon"/>
<TextView style="@style/MyDefaultTabTextAppearance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/tabIcon"
android:minLines="2"
android:maxLines="2"
android:id="@+id/tabText"/>
</RelativeLayout>
createTab becomes:
private RelativeLayout createTab(String titleText, int tabBackgroundDrawableId)
{
RelativeLayout rl = (RelativeLayout)this.getLayoutInflater().inflate(R.layout.mytab, null, false);
//set appearance of tab
rl.setBackgroundResource(tabBackgroundDrawableId);
TextView tv = (TextView)rl.findViewById(R.id.tabText);
//set caption
tv.setText(titleText);
ImageView iv = (ImageView)rl.findViewById(R.id.tabIcon);
iv.setImageResource(R.drawable.ic_launcher);//or supply unique drawable to method?
return rl;
}
这篇关于使用不同的颜色不同ActionBar.Tab的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
