Tab trong android (Bài 2)

Tab trong android cho phép chúng ta chuyển đổi qua lại giữa các activity một cách nhanh chóng, cho phép gộp nhiều activity trong một màn hình duy nhất.

Sử dụng các tab trong android để tổ chức nội dung ở mức độ cao. Ví dụ để trình bày các phần khác nhau của một tờ báo. Những trường hợp sử dụng tab liên quan đến nội dung xem, không phải điều hướng giữa các nhóm nội dung.

Tab trong android – Một số lưu ý khi sử dụng

Trinh bày tất cả các tab trên một hàng duy nhất Nên

tab trong android

Không nên

tab trong android

Không sử dụng tab lồng nhau  Nên

tab trong android 2

Không nên

tab trong android 3

Nhãn cho tab có thể là chữ, icon hoặc cả 2  Nên

tab trong android 4

tab trong android 5

Không nên

tab trong android 6

tab trong android 7

Tab trong android – Phân loại tab

Tùy thuộc vào nền tảng và bối cảnh sử dụng, nội dung của tab có thể được trình bày một trong hai là tab cố định (fixed tabs) hoặc các tab cuộn (scrollable tabs).

Fixed tabs: có chiều rộng bằng nhau giữa các tab. Để di chuyển giữa các tab cố định, chạm vào tab hoặc vuốt vùng nội dung sang trái hoặc phải.

tab trong android 8

Scrollable tabs: hiển thị một tập hợp con của các tab tại bất kỳ thời điểm nào. Tab có thể chứa nhãn dài và số lượng các tab nhiều hơn so với Fixed tabs. Để di chuyển giữa các tab, chạm vào tab hoặc vuốt vùng nội dung sang trái hoặc phải.

tab trong android 9

Tab trong android – Ví dụ

Thiết kế giao diện android gồm 3 tabs là TOP RATED, GAMES và MOVIES

tab trong android 12

Sử dụng project hiện có hoặc tạo mới project trong Android Studio và thực hiện các bước sau

Bước 1. Tạo activity tên TabActivity (Chuột phải package hiện có -> chọn New -> chọn Activity -> chọn Tabbed Activity -> nhập TabActivity tại Activity Name

tab trong android 11

Bước 2. Thiết kế layout cho tab TOP RATED

Chuột phải layout -> chọn New -> chọn XML -> chọn Layout XML File

listview trong android 3

Tại Layout File Name, nhập fragment_top_rated -> chọn Finish

tab trong android 13

Bước 3. Thiết kế layout cho tab GAMES

tab trong android 14

Bước 4. Thiết kế layout cho tab MOVIES

tab trong android 15

 Bước 5. Mở activity_tab.xml và bổ sung đoạn code sau

<!--giasutinhoc.vn-->
<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill"/>

tab trong android 16

Bước 5. Mở TabActivity

Khai báo các thành phần sau ở phạm vi toàn cục

// Tab titles
private String[] tabs = {"Top Rated", "Games", "Movies"};
private TabLayout tabLayout;
//Layout
public static int[] resourceIds = {
        R.layout.fragment_top_rated
        ,R.layout.fragment_games
        ,R.layout.fragment_movies
};

tab trong android 44

Bổ sung các đoạn code sau tại phương thức onCreate

//giasutinhoc.vn
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);

tab trong android 46

Tại lớp PlaceholderFragment, bổ sung đoạn code sau tại phương thức onCreateView

int index = getArguments().getInt(ARG_SECTION_NUMBER);
View rootView = inflater.inflate(resourceIds[index], container, false);

 tab trong android 17

Tại lớp SectionsPagerAdapter, thay position + 1 thành position cho phương thức getItem

tab trong android 18

Tại lớp SectionsPagerAdapter, thay đổi code cho phương thức getPageTitle

return tabs[position];

tab trong android 19

Chạy ứng dụng

TOP RATED

tab trong android 20

GAMES

tab trong android 21

MOVIES

tab trong android 22

Tab trong android – Scrollable Tab

Scrollable tab nên được sử dụng khi bạn có nhiều tab mà không có đủ không gian trên màn hình để hiển thị chúng cho phù hợp.

Để thiết lập Scrollable Tab, mở activity_tab.xml và thiết lập tabMode = “scrollable”

tab trong android 23

Tab trong android – Icon và Text

Đôi khi bạn muốn hiển thị thêm biểu tượng (icon) vào Tab. Bạn phải gọi phương thức setIcon() để thiết lập icon. Mở TabActivity và thực hiện các xử lý bên dưới.

Đặt các icon tại thư mục mipmap

tab trong android

Khai báo mảng tabIcons ở phạm vi toàn cục

//Icon
private int[] tabIcons = {
        R.mipmap.ic_tab_favourite
        ,R.mipmap.ic_tab_call
        ,R.mipmap.ic_tab_contacts
};

tab trong android 45

Bổ sung thêm phương thức setupTabIcons()

//giasutinhoc.vn
private void setupTabIcons() {
    for(int i = 0; i < 3; i++){
        tabLayout.getTabAt(i).setIcon(tabIcons[i]);
    }
}

tab trong android 47

Gọi phương thức setupTabIcons() tại phương thức onCreate()

tab trong android 43

Chạy ứng dụng

tab trong android 12

Tổng kết nội dung tab trong android

  • Tab trong android là gì?
  • Phân loại tab trong android
  • Tab với icon và text

Tab trong android – Bài tập thực hành

Xây dựng ứng dụng giới thiệu các môn học bao gồm 2 tab là Basic Android và Practice Android. Nội dung dành cho tab “Basic Android” chứa trong tập tin android.txt. Nội dung dành cho tab “Practice” chứa trong tập tin practice.txt

Basic Android

tab trong android 48

Nội dung tập tin android.txt

Mục tiêu môn học
Giải thích được cấu trúc project trong Android
Tạo được thiết bị giả lập trong Android Studio để thực thi ứng dụng
Kết nối và thực thi được ứng dụng trên thiết bị thật
Thiết kế được giao diện trên Android
Xử lý được các sự kiện như chạm (touch), chạm và giữ (long click),…
Xử lý được các thông báo như Toast, Alert
Liên kết và truyền được dữ liệu giữa các Activity
Lưu trữ được dữ liệu vào bộ nhớ trong hoặc vào thẻ nhớ của thiết bị
Viết được ứng dụng Android cơ bản có hỗ trợ tính năng lưu trữ
Yêu cầu môn học
Hoàn thành môn học Lập trình Java
Phần mềm Android Studio

Practice Android

tab trong android 49

Nội dung tập tin practice.txt

Đọc file xml trong android
Đọc file json trong android
Thiết kế giao diện android
Gridview trong android

Tab trong android – Hướng dẫn cách truyền dữ liệu từ lớp SectionsPagerAdapter tới lớp PlaceholderFragment

Truyền dữ liệu dạng chuỗi tại SectionsPagerAdapter

tab trong android 50

Nhận dữ liệu tại PlaceholderFragment và hiển thị vào TextView. Lưu ý bổ sung một tham số kiểu String cho phương thức newInstance.

tab trong android

Tải hình ảnh cho bài thực hành

Xem giáo trình môn Phát triển App Android

Trả lời