能否通过编程更改操作栏选项卡指示器？

Question

如何以编程方式更改操作栏的选定选项卡指示器？我已经阅读了有关选项卡样式和Tab.setCustomView（）方法的内容，但这些都没有帮助：

• 使用选项卡样式，我可以更改指示器颜色，但它将保留所有选项卡（我想为每个选项卡设置一个指示器）。

• 使用选项卡自定义视图，我使用一个包含 TextView 用于选项卡标题和 View 以管理指示器颜色的布局。在Java中，我动态更改 View 的背景，但问题是 View 的背景与选项卡边界不匹配。

<TextView
    android:id="@+id/custom_tab_text"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:layout_centerInParent="true"
    android:layout_centerHorizontal="true"
    android:gravity="center|center_horizontal"
    android:textStyle="bold"/>

<View 
    android:id="@+id/custom_tab_view"
    android:layout_width="match_parent"
    android:layout_height="10dp" 
    android:layout_alignParentBottom="true"/>

有人能告诉我错在哪里吗？还有其他方法可以做到吗？谢谢

- S.Thiongane

---

你是否在使用父布局的背景作为android:background="@drawable/tab_indicator"？http://stackoverflow.com/q/3725692/1012284 - Padma Kumar

尝试使用 setLeftStripDrawable 和 setRightStripDrawable。 - Lia Pronina

@PadmaKumar，我已经尝试过了，但选项卡边界大于我的父布局。我还尝试将padding和margin设置为0dp，但没有效果。 - S.Thiongane

@LiaPronina 谢谢，但我不是在说左右，而是底部的可绘制。谢谢。 - S.Thiongane

Answer 1

我成功地使用@Padma的答案实现了我的需求，生成了我的选项卡指示器背景：我需要5个选择器：绿色、黄色、蓝色、橙色和红色。因此，我创建了5个xml drawables(tabs_selector_red.xml、tabs_selector_blue.xml等)：

tabs_selector_green.xml：

    <!-- Non focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>

<!-- Focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>

<!-- Pressed -->
<!-- Non focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/>

<!-- Focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/>

我还为每个XML背景创建了一个layer-list：layer_bg_selected_tabs_green.xml

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/tab_green" />

        <padding android:bottom="5dp" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <solid android:color="#FFFFFF" />
    </shape>
</item>

最后，在 Java 中，我通过使用选中标签的 custom view 和 index 动态切换背景：

private static final int[] TABS_BACKGROUND = {
        R.drawable.tabs_selector_orange, R.drawable.tabs_selector_green,
        R.drawable.tabs_selector_red, R.drawable.tabs_selector_blue,
        R.drawable.tabs_selector_yellow };
/*
BLA BLA BLA
*/
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
    // TODO Auto-generated method stub
    RelativeLayout tabLayout = (RelativeLayout) tab.getCustomView();
    tabLayout.setBackgroundResource(TABS_BACKGROUND[tab.getPosition()]);
    tab.setCustomView(tabLayout);
/* ... */
}

现在让我们添加一些截图：

- S.Thiongane

---

如你所见，该“indicator”不正确地匹配了选项卡的边界。如果有人有解决方法，请提出建议？！ - S.Thiongane

在"tabLayout.setBackgroundResource(TABS_BACKGROUND[tab.getPosition()]);"这行代码上出现了Java.lang.NullPointerException异常。 - AndroidHacker

tabLayout 可能为 null，请用您的代码提出另一个问题，我们将查看出了什么问题！ - S.Thiongane

请查看我的问题，网址为http://stackoverflow.com/questions/21673531/pragmatically-set-actioinbartab-background-color-with-tab-selector-line-at-botto - AndroidHacker

你可以通过将TabLayout的tabPaddingEnd和tabPaddingStart设置为0 dp来解决选项卡不匹配的问题。 - Espen Riskedal

Answer 2

//您的选项卡栏应该是

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/Wrap"
    android:background="@drawable/tabs_selector"
    android:gravity="center_horizontal|bottom"
    android:minHeight="@dimen/size_fourty"
     >
    <TextView
    android:id="@+id/custom_tab_text"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:layout_centerInParent="true"
    android:layout_centerHorizontal="true"
    android:gravity="center|center_horizontal"
    android:textStyle="bold"/>

</RelativeLayout>

//你的tabs_selector.xml应该像这样

<!-- Non focused states -->
<item android:drawable="@drawable/layer_bg_unselected_tabs" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>

<!-- Focused states -->
<item android:drawable="@drawable/layer_bg_unselected_tabs" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>

<!-- Pressed -->
<!-- Non focused states -->
<item android:drawable="@drawable/layer_bg_unselected_tabs" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/>

<!-- Focused states -->
<item android:drawable="@drawable/layer_bg_unselected_tabs" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/>

// 你的layer_bg_unselected_tabs 应该像这样

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/red" />

        <padding android:bottom="2dp" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/gray" />
    </shape>
</item>

// 你的 layer_bg_selected_tabs 应该像这样

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/red" />

        <padding android:bottom="8dp" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/gray" />
    </shape>
</item>

- Padma Kumar

---

谢谢，但这并没有完全解决我的问题。我用它来拥有不同的“指示器”背景（红色、绿色、蓝色等），但我仍然无法在代码中动态更改它。我尝试使用“OnTabSelected”中的“setCustomView”方法更改所选选项卡的父布局背景，但似乎不起作用！ - S.Thiongane

红色，绿色和蓝色将如何指示选项卡？你能分享一下屏幕截图吗？ - Padma Kumar