Установка выбранного TAB с маленьким треугольником под ним - PullRequest
Новая
       4

Установка выбранного TAB с маленьким треугольником под ним

5 голосов
/ 10 февраля 2012

Я хочу, чтобы мои вкладки отображались как на картинке с маленьким треугольником под ним. Возможно ли это? Если да, то помогите мне с некоторыми кодами или документацией.

image 1

Ответы [ 3 ]

11 голосов
/ 02 марта 2012

Я думаю, следующий подход является самым простым.Вам просто нужно настроить следующее рисование (на самом деле это рисование по умолчанию для вкладок в Android) в качестве фона вкладок: 

<?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_press, tab_focus и tab_selected рисование будет png(Я бы предпочел 9-патчей ) с стрелкой вниз и прозрачной областью рядом с ней.tab_unselected drawable не будет иметь эту стрелку, но все равно будет иметь ту же прозрачную область.Осталось только указать отрицательное нижнее поле для вашего TabWidget.Его значение определяется высотой стрелки (не забывайте использовать плотность не зависит единиц):

explanatory scheme

0 голосов
/ 07 марта 2012

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);
0 голосов
/ 02 марта 2012

Вы можете добавить изображения в макет с помощью вкладок: 

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