Для создания пользовательского интерфейса с использованием вкладок, вам понадобится использовать классы TabHost и TabWidget. Класс TabHost должен стать узловым элементом интерфейса, содержащего как класс TabWidget для отображения вкладок, так и FrameLayout для отображения содержимого вкладки.

Вы можете внедрить содержимое вкладки одним из двух способов: использовать вкладки для замены элементов View внутри Activity, или использовать вкладки для замены между абсолютно разными процессами. Какой метод вы будете использовать в своем приложении, зависит от ваших требований, но если каждая вкладка отражает отдельную направленность программы, тогда есть смысл использовать отдельный класс Activity для каждой вкладки, что позволит вам продуктивнее управлять приложением, путем разбития последнего на отдельные группы, что сделает управление интуитивнее, нежели применение одного большого приложения и громоздкого интерфейса.

В данном руководстве, вы создадите пользовательский интерфейс с использованием вкладок при помощи отдельных классов Activity для каждой вкладки.

1. Создайте новый проект под названием HelloTabWidget.

2. Для начала, создайте в своем приложении три отдельных класса Activity : ArtistsActivity, AlbumsActivity, и SongsActivity. Каждый из них будет представлен отдельной вкладкой. Теперь, используя метод TextView задайте каждому из них команду отразить простое сообщение. Например:

[code lang=»js»]
public class ArtistsActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

TextView textview = new TextView(this);
textview.setText("This is the Artists tab");
setContentView(textview);
}
}
[/code]

Обратите внимание, что вышеприведенный файл не отвечает за внешний вид приложения. Использование класса TextView задает его текстовую направленность в качестве контента. Скопируйте данный класс для каждого из трех Activity и добавьте соответствующие теги к файлу Android Manifest.

3. Для каждой из вкладок вам понадобится две версии иконки: одна для ситуации, когда вкладка выбрана, другая — когда не выбрана. Общая рекомендация для дизайна кнопок такова – использование темного цвета (например, серого) для выбранной вкладки, и светлого цвета (например, белого) для невыбранной кнопки. Например:

Для данного руководства, вы можете скопировать данное изображение и использовать его для всех трех вкладок.

Теперь необходимо создать state-list drawable (список изображений), который уточнит какой рисунок использовать для каждого конкретного состояния вкладки:
1. Сохраните изображения иконок в каталог res/drawable/ своего проекта.
2. Создайте новый XML файл в каталоге res/drawable/ и назовите его ic_tab_artists.xml :

[code lang=»xml»]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!— When selected, use grey —>
<item android:drawable="@drawable/ic_tab_artists_grey"
android:state_selected="true" />
<!— When not selected, use white—>
<item android:drawable="@drawable/ic_tab_artists_white" />
</selector>
[/code]

Это и является state-list drawable, который вы используете в качестве изображения вкладки. Когда меняется состояние вкладки, иконка вкладки автоматически переключится между определенными здесь изображениями.

4. Откройте файл res/layout/main.xml и вставьте следующее:

[code lang=»xml»]
<?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="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
[/code]

Это файл интерфейса, отражающий внешний вид вкладок и делающий доступным переключение между каждым элементом Activity созданным выше.

Класс TabHost требует одновременного присутствия внутри себя TabWidget и FrameLayout. Для вертикального размещения TabWidget и FrameLayout, используется элемент LinearLayout .

Элемент FrameLayout используется в качестве некого контейнера контента каждой вкладки, который сейчас пуст, так как TabHost будет встраивать любой элемент Activity внутрь него.

Обратите внимание, что элементы TabWidget и FrameLayout имеют ID — tabs и tabcontent, соответственно. Данные названия должны использоваться для того, чтобы TabHost мог получить ссылки на каждый из них.

Продолжение материала в статье Разработка Андроид приложений – Tab Layout. Часть 2