12

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

  • 使用选项卡样式，我可以更改指示器颜色，但它会保留在所有选项卡中（我希望每个选项卡都有一个指示器）。

  • 对于选项卡自定义视图，我使用了带有TextView选项卡标题和View管理指示器颜色的布局。在 java 中，我View动态更改了 's 背景，但问题是View's 背景与选项卡边界不匹配。

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

有人能告诉我我哪里错了吗？还有另一种方法吗？谢谢

4

2 回答 2

17

通过使用@Padma 的答案来生成我的选项卡指示器背景，我已经成功实现了我想要的：我需要 5 个选择器：绿色、黄色、蓝色、橙色和红色。所以我创建了 5 xml drawables( tabs_selector_red.xml, tabs_selector_blue.xml, etc...) ：

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

我还layer-list为每个 xml 背景创建了一个：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);
/* ... */
}

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

绿色 蓝色的 红色的

于 2013-08-28T15:03:59.993 回答
5

//你的标签栏应该是

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

于 2013-08-28T12:05:01.103 回答