Android TabLayout Beispiel

In diesem Tutorial wird die Verwendung vonTabLayout zum Rendern von 4 Registerkarten demonstriert - "Android", "Windows", "Apple" und "BlackBerry". Jede Registerkarte enthält eine Textansicht zum Anzeigen einer einfachen Nachricht.

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

1. Tab Bilder

Legen Sie 4 Registerkartenbilder in den Ordner "res/drawable". Die in diesem Tutorial verwendeten Registerkartenbilder entsprechen nicht denAndroid icon guideline. Entschuldigung, ich bin einfach nicht gut im Design :).

directory structure

2. Registerkartenbilder in XML

Erstellen Sie 4 XM-Dateien, um anzugeben, welches Bild für jede Registerkarte verwendet werden soll, und legen Sie es in demselben Ordner "res/drawable" ab.

Datei: icon_android_config.xml

Datei: icon_apple_config.xml

Datei: icon_blackberry_config.xml

Datei: icon_windows_config.xml

3. Tab Aktivität

Erstellen Sie 4 Aktivitätsklassen und geben Sie an, welche Aktivität verwendet werden soll, wenn auf die Registerkarte geklickt wird. Alle 4 Klassen machen dasselbe, zeigen eine Textview-Komponente an.

Datei: 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);
    }
}

Datei: 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);
    }
}

Datei: 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);
    }
}

Datei: 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. Hauptaktivität

Erstellen Sie einen Einstiegspunkt, verknüpfen Sie über 4 Registerkarten-Aktivitätsklassen mitTabHost,TabSpec usw.

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-Layout-Datei

Datei: res / layout / main.xml

6. Android-Manifest

Zuletzt setzen Sie alles in "AndroidManifest.xml", definieren 4 Registerkarten-Aktivitätsklassen und legen die "MainActivity" als Einstiegspunkt fest.

Datei: AndroidManifest.xml

7. Demo

Standardmäßig ist die Registerkarte Windows ausgewählt.

android tab layout example

Klicken Sie auf die Registerkarte Android.

android tab layout example

Quellcode herunterladen

Laden Sie es herunter -Android-TabLayout-Example.zip (23 KB)

TOC

Android TabLayout Beispiel