Пример Android TabLayout

В этом руководстве мы продемонстрируем использованиеTabLayout для визуализации 4 вкладок - «Android», «Windows», «Apple» и «BlackBerry», каждая вкладка содержит текстовое представление для отображения простого сообщения.

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. Вкладка изображения

Поместите 4 изображения вкладок в папку «res/drawable». Изображения вкладок, используемые в этом руководстве, не соответствуютAndroid icon guideline, извините, я просто не очень хорош в дизайне :).

directory structure

2. Вкладка изображений в XML

Создайте 4 файла XM, чтобы указать, какое изображение использовать для каждой вкладки, и поместите его в ту же папку «res/drawable».

Файл: icon_android_config.xml

Файл: icon_apple_config.xml

Файл: icon_blackberry_config.xml

Файл: icon_windows_config.xml

3. Активность на вкладке

Создайте 4 класса активности и укажите, какое действие использовать при нажатии на вкладку. Все 4 класса делают одно и то же, отображают компонент textview.

Файл: AndroidActivity.java

package com.example.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class AndroidActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is Android tab");
        setContentView(textview);
    }
}

Файл: AppleActivity.java

package com.example.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class AppleActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is Apple tab");
        setContentView(textview);
    }
}

Файл: BlackBerryActivity.java

package com.example.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class BlackBerryActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is BlackBerry tab");
        setContentView(textview);
    }
}

Файл: WindowsActivity.java

package com.example.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class WindowsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is Windows mobile tab");
        setContentView(textview);
    }
}

4. Основная деятельность

Создайте точку входа, ссылку над 4 классами активности вкладки сTabHost,TabSpec и т. Д.

package com.example.android;

import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivity extends TabActivity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Resources ressources = getResources();
        TabHost tabHost = getTabHost();

        // Android tab
        Intent intentAndroid = new Intent().setClass(this, AndroidActivity.class);
        TabSpec tabSpecAndroid = tabHost
          .newTabSpec("Android")
          .setIndicator("", ressources.getDrawable(R.drawable.icon_android_config))
          .setContent(intentAndroid);

        // Apple tab
        Intent intentApple = new Intent().setClass(this, AppleActivity.class);
        TabSpec tabSpecApple = tabHost
          .newTabSpec("Apple")
          .setIndicator("", ressources.getDrawable(R.drawable.icon_apple_config))
          .setContent(intentApple);

        // Windows tab
        Intent intentWindows = new Intent().setClass(this, WindowsActivity.class);
        TabSpec tabSpecWindows = tabHost
          .newTabSpec("Windows")
          .setIndicator("", ressources.getDrawable(R.drawable.icon_windows_config))
          .setContent(intentWindows);

        // Blackberry tab
        Intent intentBerry = new Intent().setClass(this, BlackBerryActivity.class);
        TabSpec tabSpecBerry = tabHost
          .newTabSpec("Berry")
          .setIndicator("", ressources.getDrawable(R.drawable.icon_blackberry_config))
          .setContent(intentBerry);

        // add all tabs
        tabHost.addTab(tabSpecAndroid);
        tabHost.addTab(tabSpecApple);
        tabHost.addTab(tabSpecWindows);
        tabHost.addTab(tabSpecBerry);

        //set Windows tab as default (zero based)
        tabHost.setCurrentTab(2);
    }

}

5. Файл макета Android

Файл: res / layout / main.xml

6. Android Манифест

Наконец, поместите все в «AndroidManifest.xml», определите 4 класса активности вкладок и установите «MainActivity» в качестве точки входа.

Файл: AndroidManifest.xml

7. Demo

По умолчанию вкладка Windows выбрана.

android tab layout example

Нажмите на вкладку Android.

android tab layout example

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

Скачать -Android-TabLayout-Example.zip (23 КБ)

TOC

Пример Android TabLayout