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

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

+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.

65

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

66

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

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:

Nguồn: http://gianphoibenlau.com