exemple TabLayout Android

Exemple Android TabLayout

Dans ce tutoriel, nous allons démontrer l'utilisation deTabLayout pour rendre 4 onglets - «Android», «Windows», «Apple» et «BlackBerry», chaque onglet contient une vue de texte pour afficher un message simple.

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

1. Images des onglets

Placez 4 images à onglets dans le dossier «res/drawable». Les images des onglets utilisées dans ce didacticiel ne suivent pas lesAndroid icon guideline, désolé, je ne suis tout simplement pas doué en conception :).

directory structure

2. Images d'onglets en XML

Créez 4 fichiers XM pour indiquer l'image à utiliser pour chaque onglet, et placez-les dans le même dossier «res/drawable».

Fichier: icon_android_config.xml

Fichier: icon_apple_config.xml

Fichier: icon_blackberry_config.xml

Fichier: icon_windows_config.xml

3. Activité de l'onglet

Créez 4 classes d'activités et indiquez l'activité à utiliser lorsque vous cliquez sur l'onglet. Les 4 classes font la même chose, affichent un composant textview.

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

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

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

Fichier: 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. Activité principale

Créez un point d'entrée, un lien au-dessus de 4 classes d'activité d'onglet avecTabHost,TabSpec et etc.

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. Fichier de mise en page Android

Fichier: res / layout / main.xml

6. Manifeste Android

Enfin, mettez tout dans «AndroidManifest.xml», définissez 4 classes d'activité d'onglet et définissez les «MainActivity» comme point d'entrée.

Fichier: AndroidManifest.xml

7. Demo

Par défaut, l'onglet Windows est sélectionné.

android tab layout example

Cliquez sur l'onglet Android.