android - 不同的 ActionBar.Tab 使用不同的 Color

Question

我想让 ActionBar 中的所有选项卡都具有不同的颜色指示器，例如选项卡 1 为蓝色，选项卡 2 为红色等。

为了实现这一点，我确实为所有颜色创建了不同的选择器，并将它们放在可绘制对象的不同 xml 中。在 style.xml 中，我通过

调用它们

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

我也为不同的颜色创建了这种样式。现在，当我将可绘制对象或样式更改为不同的颜色时，它就可以工作了。我可以看到颜色被应用于选项卡。但是由于所有标签都是相同的颜色，所以它并没有解决我的目的。我试图在 onTabSelected() 中设置选项卡的样式，但没有方法可以做到这一点。

最终，我尝试为不同的颜色创建不同的主题，并尝试在 onTabSelected() 中以编程方式设置它们，但后来我知道必须在 setContentView()< 之前设置主题.
所以我的问题是..我该怎么做？有什么办法可以让不同的选项卡指示器有不同的颜色？？？

更新:-
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>

Answer 1

我想我有一个适合您的起点，但它有点繁琐。使用以下代码设置操作栏，您可以将选项卡设置为使用自定义外观:

  //...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方法如下:

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

然而，操作栏似乎将选项卡 View 添加到添加填充的父 View 中，因此对于每个 View ，您都需要将其删除。我在第一个代码块之后在 oncreate 中这样做:

  View view = (View) 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):

  <?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 变成:

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