Ứng dụng có nhiều tab

Bạn muốn màn hình ứng dụng có nhiều tab ở trên đầu, muốn xem bên nào chỉ cần chạm vào tab là ra bên đấy.

Ta sẽ tạo một class mẫu có 3 tab ở trên, tên là Phần 1, Phần 2, Phần 3. Trong mỗi tab sẽ có một dòng chữ và một nút bấm.

File xml như sau.

<?xml version="1.0" encoding="utf-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/tabhost"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

 <LinearLayout

 android:layout_width="fill_parent"

 android:layout_height="fill_parent"

 android:orientation="vertical" >

  <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" >

   <LinearLayout

    android:id="@+id/l"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

 <TextView

 android:id="@+id/tv"

 android:layout_width="wrap_content"

 android:layout_height="wrap_content"

 android:layout_gravity="center_horizontal"

 android:layout_marginTop="5dp"

 android:text="Đây là dòng chữ ở tab1"

 android:textColor="#800000"

 android:textSize="20sp" />

 <Button

  android:id="@+id/bu1"

  android:layout_width="80dp"

 android:layout_height="40dp"

  android:layout_gravity="center_horizontal"

  android:layout_marginBottom="5dp"

android:background="@drawable/back2"

 android:text="Nút 1"

  android:textColor="#0000cd"

  android:textSize="3mm" />

  </LinearLayout>

  <LinearLayout

   android:id="@+id/l2"

   android:layout_width="fill_parent"

   android:layout_height="fill_parent"

   android:orientation="vertical" >

   <TextView

    android:id="@+id/tv2"

   android:layout_width="wrap_content"

 android:layout_height="wrap_content"

  android:layout_gravity="center_horizontal"

  android:layout_marginTop="5dp"

   android:text="Đây là dòng chữ tab2"

   android:textColor="#800000"

   android:textSize="20sp" />

<Button

 android:id="@+id/bu2"

android:layout_width="80dp"

 android:layout_height="40dp"

android:layout_gravity="center_horizontal"

android:layout_marginBottom="5dp"

 android:background="@drawable/back2"

   android:text="Nút 2"

  android:textColor="#0000cd"

  android:textSize="3mm" />

 </LinearLayout>

 <LinearLayout

  android:id="@+id/l3"

 android:layout_width="fill_parent"

  android:layout_height="fill_parent"

 android:orientation="vertical" >

<TextView

  android:id="@+id/tv3"

  android:layout_width="wrap_content"

  android:layout_height="wrap_content"

  android:layout_gravity="center_horizontal"

  android:layout_marginTop="5dp"

 android:text="Đây là dòng chữ tab3"

  android:textColor="#800000"

 android:textSize="20sp" />

<Button

android:id="@+id/bu3"

android:layout_width="80dp"

 android:layout_height="40dp"

android:layout_gravity="center_horizontal"

android:layout_marginBottom="5dp"

android:background="@drawable/back2"

 android:text="Nút 3"

 android:textColor="#0000cd"

 android:textSize="3mm" />

 </LinearLayout>

</FrameLayout>

 </LinearLayout>

</TabHost>

Trong class ta copy đoạn sau xuống dưới setContentView

TabHost tabs=(TabHost)findViewById(R.id.tabhost);         

         tabs.setup();

         

       TabHost.TabSpec spec=tabs.newTabSpec("tag1");           

       spec.setContent(R.id.l);    

       spec.setIndicator("Phần 1");

       tabs.addTab(spec);

         

       spec=tabs.newTabSpec("tag2");

       spec.setContent(R.id.l2);   

       spec.setIndicator("Phần 2");

       tabs.addTab(spec);

       spec=tabs.newTabSpec("tag3");

       spec.setContent(R.id.l3);   

       spec.setIndicator("Phần 3");

       tabs.addTab(spec);

Đó là ta khai báo, tham chiếu địa chỉ, đặt tên cho từng tab một.

Tiếp theo ta tham chiếu các nút bấm, chữ, set lệnh như bình thường.

tv = (TextView)findViewById(R.id.tv);

tv2 = (TextView)findViewById(R.id.tv2);

tv3 = (TextView)findViewById(R.id.tv3);

b1 = (Button) findViewById(R.id.bu1);

b2 = (Button) findViewById(R.id.bu2);

b3 = (Button) findViewById(R.id.bu3);

b1.setOnClickListener(new View.OnClickListener() {

     @Override

     public void onClick(View v) {

     tv.setText("Nút đã hoạt động");              

             }

          });     

b2.setOnClickListener(new View.OnClickListener() {

     @Override

     public void onClick(View v) {

     tv2.setText("Nút đã hoạt động bên tab2");                   

            }

          });

b3.setOnClickListener(new View.OnClickListener() {

     @Override

public void onClick(View v) {

     tv3.setText("Nút đã hoạt động bên tab3");                   

             }

          });

Chạy thử và ấn các nút để thấy chúng hoạt động.

Làm class nhiều tab có lợi là ta chỉ phải dùng một class cho tất cả các phần, xử lý trong một file thôi, không phải tạo, khai báo nhiều class.