Разработка приложения для Android. Кастомные табы.

  Небольшая заметка о кастомизации вкладок в  Android.






Шаг 1

Создаём проект. Добавляем новый layout с разметкой для табов(вкладок):

<?xml version="1.0" encoding="utf-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp"
        >
          <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
             />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            />       
    </LinearLayout>
</TabHost>

Добавляем новый TabActivity. В методе OnCreate() добавляем пару табов:

@Override

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        TabHost tabHost = getTabHost();
        TabSpec spec;
        Intent intent;
        intent = new Intent().setClass(this, SomeClass1.class);
        spec = tabHost.newTabSpec("tab1").setIndicator("Tab 1").setContent(intent);
        tabHost.addTab(spec);
        intent = new Intent().setClass(this, SomeClass2.class);
        spec = tabHost.newTabSpec("tab2").setIndicator("Tab 2").setContent(intent);
        tabHost.addTab(spec);
        intent = new Intent().setClass(this, SomeClass3.class);
        spec = tabHost.newTabSpec("tab3").setIndicator("Tab 3").setContent(intent);   
        tabHost.addTab(spec);
}

В итоге получаем табы стандартного вида:


Шаг 2
Подготавливаем ресурсы для модификации.
Кастомный layout для таба: (добавляем в layouts)
tab_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabsLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" 
android:background="@drawable/tab_bg_selector"
android:padding="10dip"
android:gravity="center"
android:orientation="vertical">
<TextView android:id="@+id/tabsText"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textSize="15dip"
      android:textColor="@drawable/tab_text_selector" />
</LinearLayout>

Здесь можно добавить ещё View'сов, например ImageView.

В drawable добавляем селекторы (код прост и понятен):
tab_text_selector.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Состояния добавлены для наглядности -->
    <item android:state_selected="true" android:color="@android:color/black" />
    <item android:state_focused="true" android:color="@android:color/black" />
    <item android:state_pressed="true" android:color="@android:color/black" />
    <item android:color="@android:color/black" />
</selector>

tab_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:state_focused="false"
  android:state_pressed="false" android:drawable="@drawable/tab_bg_selected" />
<item android:state_selected="false" android:state_focused="false"
  android:state_pressed="false" android:drawable="@drawable/tab_bg_unselected" />
<item android:state_pressed="true" android:drawable="@drawable/tab_bg_unselected" />
<item android:state_focused="true" android:state_selected="true"
  android:state_pressed="false" android:drawable="@drawable/tab_bg_selected" />
</selector>

tab_bg_selected.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid  android:color="#FFFFFF" />
<corners android:topLeftRadius="5dp" android:topRightRadius="5dp"/>
</shape>

tab_bg_unselected.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle">
<solid  android:color="#A8A8A8" />
<corners android:topLeftRadius="5dp" android:topRightRadius="5dp"/>
</shape>

Так же добавляем в drawable картинку. Назовём её divider.

Шаг 3

В TabActivity добавляем метод createTabView():

private static View createTabView(final Context context, final String text) {

             View view = LayoutInflater.from(context).inflate(R.layout.tab_bg, null);
             TextView tv = (TextView) view.findViewById(R.id.tabsText);
             tv.setText(text);
             return view;
}

Немного изменяем метод OnCreate():

@Override

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        tabHost = getTabHost();
        TabSpec spec;
        Intent intent;
        View view;
        tabHost.getTabWidget().setDividerDrawable(R.drawable.divider); //разделитель между табами
        view = createTabView(tabHost.getContext(), "Tab 1"); //создаём пользовательский view для таба
        intent = new Intent().setClass(this, SomeClass1.class);
        spec = tabHost.newTabSpec("tab1").setIndicator(view).setContent(intent); //устанавливаем view
        tabHost.addTab(spec);
        intent = new Intent().setClass(this, SomeClass2.class);
        view = createTabView(tabHost.getContext(), "Tab 2");
        spec = tabHost.newTabSpec("tab2").setIndicator(view).setContent(intent);
        tabHost.addTab(spec);
        intent = new Intent().setClass(this, SomeClass3.class);
        view = createTabView(tabHost.getContext(), "Tab 3");
        spec = tabHost.newTabSpec("tab3").setIndicator(view).setContent(intent);   
        tabHost.addTab(spec);
}

Компилируем. В результате получаем:


Скачать исходный код Custom Tabs