Hướng dẫn tạo tabhost trong lập trình Android

Hôm nay mình sẽ giới thiệu và hướng dẫn các bạn làm 1 ví dụ đơn giản về Tabhost trong lập trình Android.

1. Giới thiệu về Tabhost trong Android

Tabhost là 1 cách để người dùng có thể thay đổi màn hình 1 cách dễ dàng. Để sử dụng được các tab, các bạn phải hiểu rõ thành phần của nó gồm 3 phần như sau.

Tab Host: Là Container chính chứa các Tab Widget và FramLayout

+Tab Widget: Để hiển thị tiêu để (icon nếu có) của mỗi tab.

+FrameLayout: Để hiển thị nội dung của tab.

2. Xây dựng Tabhost trong Android.

Sau đây mình sẽ hướng dẫn các bạn xây 1 ví dụ về tabhost như hình dưới đây.

B1. Các bạn tạo 1 project với cấu trúc như sau

B2. Các bạn thiết kế màn hình chính như sau.

<LinearLayout xmlns:android="schemas.android.com/apk/res/android" xmlns:tools="schemas.android.com/tools" android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_marginTop="15dp" android:layout_gravity="center" android:textSize="25sp" android:gravity="center" android:textColor="#ff0004" android:text="Demo Tabhost" android:layout_width="wrap_content" android:layout_height="50dp" /> <TabHost xmlns:android="schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@android:id/tabhost"> <LinearLayout android:id="@+id/LinearLayout01" android:orientation="vertical" android:layout_height="fill_parent" android:layout_width="fill_parent"> <TabWidget android:id="@android:id/tabs" android:layout_height="wrap_content" android:layout_width="fill_parent"> </TabWidget> <FrameLayout android:id="@android:id/tabcontent" android:layout_height="fill_parent" android:layout_width="fill_parent"> </FrameLayout> </LinearLayout> </TabHost> </LinearLayout>

các bạn lưu ý các id phải đặt theo đúng như trên, vì đây là id của hệ thống.

B3. Các bạn tiếp tục tạo 3 Activity, 3 Activity này sẽ là nội dung hiển thị của 3 tab tương ứng. Các bạn tùy ý thiết kế theo ý của mình.

B4. Các bạn vào file MainActivity.java và cấu hình code như sau

public class MainActivity extends TabActivity { TabHost tabHost; TabSpec tabSpec1, tabSpec2, tabSpec3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Khởi tạo tabhost tabHost = (TabHost) findViewById(android.R.id.tabhost); // Tạo 3 tab trong tabhost vừa tạo tabSpec1 = tabHost.newTabSpec("One"); tabSpec2 = tabHost.newTabSpec("Two"); tabSpec3 = tabHost.newTabSpec("Three"); // Thiết lập tên và Content cho từng tab tabSpec1.setIndicator("Tab1"); tabSpec1.setContent(new Intent(this, Tab1_Activity.class)); tabSpec2.setIndicator("Tab2"); tabSpec2.setContent(new Intent(this, Tab2_Activity.class)); tabSpec3.setIndicator("Tab3"); tabSpec3.setContent(new Intent(this, Tab3_Activity.class)); // Add các tab vừa tạo tabHost.addTab(tabSpec1); tabHost.addTab(tabSpec2); tabHost.addTab(tabSpec3); } }

Các bạn đọc code, mình đã chú thích rất rõ ràng trong code, các bạn cố gắng đọc hiểu và làm theo, cố gắng tự tay code chứ đừng copy.

Sau khi hoàn thành, các bạn chạy project và sẽ có kết quả như hình ban đầu. Chúc các bạn thành công!

Gợi ý xem thêm:

• Bộ tài liệu giúp bạn tự học lập trình android
• Địa chỉ dạy học lập trình game unity ở đâu tốt nhất?