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
- Trình bày tất cả các tab trên một hàng duy nhất
- Không sử dụng tab lồng nhau
- Nhãn cho tab có thể là chữ, icon hoặc cả 2
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.
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 – Ví dụ
Thiết kế giao diện android gồm 3 tabs là TOP RATED, GAMES và MOVIES
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
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
Tại Layout File Name, nhập fragment_top_rated -> chọn Finish
Bước 3. Thiết kế layout cho tab GAMES
Bước 4. Thiết kế layout cho tab MOVIES
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"/>
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
};
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);
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);
Tại lớp SectionsPagerAdapter, thay position + 1 thành position cho phương thức getItem
Tại lớp SectionsPagerAdapter, thay đổi codecho phương thức getPageTitle
return tabs[position];
Chạy ứng dụng
TOP RATED
GAMES
MOVIES
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 – 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
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
};
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]);
}
}
Gọi phương thức setupTabIcons() tại phương thức onCreate()
Chạy ứng dụng
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
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
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
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.
