设置选定的TAB,其下方有一个小三角形

时间:2012-02-10 11:12:41

标签: android tabs android-tabhost

我希望我的标签显示在图像中,下方有一个小三角形。这可能吗?如果是,请帮我处理一些代码或文档。

image 1

3 个答案:

答案 0 :(得分:11)

我认为,以下方法是最简单的方法。您只需要设置以下drawable(实际上,它是Android的默认drawable选项卡)作为选项卡的背景:

<?xml version="1.0" encoding="utf-8"?>
<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="@drawable/tab_unselected" />
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected" />
    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
    <!-- Pressed -->
    <item android:state_pressed="true" android:drawable="@drawable/tab_press" />
</selector>

其中tab_presstab_focustab_selected drawables将是png(我更喜欢9-patches),附近有向下箭头和透明区域。 tab_unselected drawable不会有这个箭头,但仍然会有相同的透明区域。剩下要做的唯一事情是为TabWidget指定负底边距。它的值由箭头的高度决定(不要忘记使用density independent单位):

explanatory scheme

答案 1 :(得分:0)

tab_0_info.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_menu_yourImg_selected"
        android:state_selected="true" />
    <item android:drawable="@drawable/ic_menu_yourImg" />
</selector>


private void addTab(int resouceTabId, int drawableId,
        Class<? extends ActivityGroup> groupActivityClass)
{
    Intent intent = new Intent(this, groupActivityClass);
    TabHost.TabSpec spec = tabHost.newTabSpec("tab" + resouceTabId);

    View tabIndicator = LayoutInflater.from(this).inflate(
            R.layout.tab_indicator, getTabWidget(), false);

    TextView title = (TextView) tabIndicator.findViewById(R.id.title);
    title.setText(resouceTabId);
    ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
    icon.setImageResource(drawableId);

    spec.setIndicator(tabIndicator);
    spec.setContent(intent);
    tabHost.addTab(spec);

}

//addTab(R.string.yourTabTitle, R.drawable.tab_0_info, YourGroup.class);

答案 2 :(得分:-2)

您可以使用标签添加图片到布局:

<RelativeLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="0dip" />
    <FrameLayout
        android:fadingEdge="none"
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="0px"
        android:layout_below="@android:id/tabs"
        android:layout_alignParentBottom="true"
        android:padding="0px" />
    <ImageView 
        ....
        android:id="@+id/down_arrow_left"/>
    <ImageView 
        ....
        android:id="@+id/down_arrow_right"/>
</RelativeLayout>

并在标签活动中添加监听器:

getTabHost().setOnTabChangedListener(new OnTabChangeListener() {
        public void onTabChanged(String tabId) {
            if (tabId.equels("left")){
                findViewById(R.id.down_arrow_left).setVisibility(View.VISIBLE);
                findViewById(R.id.down_arrow_right).setVisibility(View.INVISIBLE);
            } else if (tabId.equels("right")){
                findViewById(R.id.down_arrow_left).setVisibility(View.INVISIBLE);
                findViewById(R.id.down_arrow_right).setVisibility(View.VISIBLE);
            }
        }
    });