Tabs. Простой пример

| 02.07.2014

Создадим макет экрана с переключающимися вкладками. Должно получиться вот так:

Tabs. Простой пример

То есть мы имеем три вкладки с собственным контентом.

Первоначально добавим строковые ресурсы — res/values/strings.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Tabs</string>
    <string name="txt_tab1">активна вкладка 1</string>
    <string name="txt_tab2">активна вкладка 2</string>
    <string name="txt_tab3">активна вкладка 3</string>
</resources>

Файл layout-a — res/layout/activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
 
    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            </TabWidget>
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
                    <TextView
                        android:id="@+id/tvTab1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/txt_tab1"/>
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
                    <TextView
                        android:id="@+id/tvTab2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/txt_tab2"/>
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
                    <TextView
                        android:id="@+id/tvTab3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/txt_tab3"/>
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>
</LinearLayout>

Итак, мы имеем корневой элемент LinearLayout. Внутри него элемент TabHost, содержащий LinearLayout с вертикальной ориентацией. Далее мы добавляем TabWidget, который, по сути, представляет собой заголовки отдельных вкладок, и FrameLayout, содержащий контент (простой LinearLayout с элементом TextView) всех трех вкладок. Какой именно контент будет показываться мы зададим программно.

Теперь MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
package ru.androiddocs.tabs;
 
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
 
 
 
public class MainActivity extends ActionBarActivity {
 
    protected static final String LOG_TAG = "my_tag";
    TabHost.TabSpec tabSpec;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost);
        // инициализация
        tabHost.setup();
 
        tabSpec = tabHost.newTabSpec("tag1");
        tabSpec.setIndicator("Вкладка 1");
        tabSpec.setContent(R.id.tab1);
        tabHost.addTab(tabSpec);
 
        tabSpec = tabHost.newTabSpec("tag2");
        tabSpec.setIndicator("Вкладка 2");
        tabSpec.setContent(R.id.tab2);        
        tabHost.addTab(tabSpec);
 
        tabSpec = tabHost.newTabSpec("tag3");
        tabSpec.setIndicator("Вкладка 3");
        tabSpec.setContent(R.id.tab3);        
        tabHost.addTab(tabSpec);
 
        // вторая вкладка по умолчанию активна
        tabHost.setCurrentTabByTag("tag2");
 
        // логгируем переключение вкладок
        tabHost.setOnTabChangedListener(new OnTabChangeListener() {
            public void onTabChanged(String tabId) {
            	Log.d(LOG_TAG, "tabId = " + tabId);
 
            }
        });
 
    }
 
}

Думаю, код понять будет несложно. Первоначально мы находим и инициализируем наш TabHost:

1
2
TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost);
tabHost.setup();

Далее — создаем каждую вкладку, определяем для нее контент и добавляем ее в общий виджет:

1
2
3
4
tabSpec = tabHost.newTabSpec("tag1");
tabSpec.setIndicator("Вкладка 1");
tabSpec.setContent(R.id.tvTab1);
tabHost.addTab(tabSpec);

Проделываем аналогично с другими вкладками. Делаем вторую вкладку активной:

1
tabHost.setCurrentTabByTag("tag2");

Добавляем также обработчик setOnTabChangedListener(), в котором будем логгировать id новой активной вкладки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*