Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Android SDK
Code

Tạo một Giao diện dạng Tab theo phong cách Material Design trong Ứng dụng Android

by
Difficulty:BeginnerLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

Nhóm Material Design tại Google định nghĩa một cách đơn giản tính năng của tab trong Android như sau:

Tab giúp dễ dàng khám phá và chuyển qua lại giữa các view khá nhau.

Trong bài viết này bạn sẽ học cách trình diễn các tab bằng TabLayoutViewPager.

  • Thành phần TabLayoutViewPager.
  • Các chế độ tab khác nhau: scrollable và fixed.
  • Cách hiện thị icon thay cho chữ đối với nhãn của tab.
  • Thêm nữa, bạn sẽ học cách sử dụng tính năng template của Android Studio để nhanh chóng bắt đầu dự án của bạn với một giao diện dạng tab.

Dự án mẫu cho bài viết này có thể được tìm thấy trên repo GitHub để bạn có thể dễ dàng làm theo.

Yêu cầu

Để có thể thực hiện theo hướng dẫn này, bạn sẽ cần:

Bạn cũng có thể tìm hiểu sâu về ngôn ngữ Kotlin trong loạt bài Kotlin From Scratch của tôi.

Giới thiệu về thành phần TabLayout

Dựa theo tài liệu hướng dẫn chính thức của Android về TabLayout, nói rằng:

TabLayout cung cấp một bố cục nằm ngang để hiển thị tab.

Thành phần TabLayout là một trong những thành phần được giới thiệu như là một phần của Material Design. Hơn thế nữa, nó còn được thêm vào support library. Trong một TabLayout, khi một tab được được chọn hoặc nhấp vào, một trang khác (hay phần khác) được hiện ra cho người dùng.

Thành phần TabLayout có thể có các chức năng hiển thị tab của riêng nó theo một trong hai cách: fixed và scrollable. Nếu tab là fixed, thì tất cả các tab sẽ được hiển thị trên màn hình cùng một lúc.

Hình minh hoạ bên dưới là ứng dụng WhatsApp chính thức mới nhất (thời điểm viết bài), ứng dụng sử dụng một TabLayout với cấu hình mode là fixed.

WhatsApp fixed TabLayout sample

Đối với tab scrollable, nếu số tab trở nên quá dài đối với màn hình, thì người dùng có thể vuốt từ trái hoặc phải để nhìn thấy thêm các tab.

Ở đây là một ví dụ về TabLayout với mode là scrollable - được nhìn thấy trong phiên bản mới nhất của ứng dụng News & Weather của Google.

Scrollable tab mode in Google News Weather app

Hơn nữa, thông tin được hiển thị trên một tab có thể là văn bản, một icon hoặc một sự kết hợp của cả hai. Ví dụ, ứng dụng Twitter mới nhất dành cho Android sử dụng icon thay cho văn bản trên mỗi tab.

Icons on tabs in Twitter Android app

Trong những phần dưới đây, chúng ta sẽ đi sâu vào việc viết code một ứng dụng đơn giản tận dụng TabLayout với một ViewPager. Hãy bắt đầu nào!

Thiết kế không chỉ đơn giản là nó trông như thế nào. Thiết kế còn là nó làm việc như thế nào nữa. - Steve Jobs

1. Tạo một dự án Android Studio

Mở Android Studio 3 và tạo một dự án mới (bạn có thể đặt tên nó là TabLayoutDemo) với một empty activity được gọi là MainActivity.

Create Android Project page

2. Tạo Fragment (Page)

Chúng ta sẽ tạo ra một TabLayout với chỉ ba tab. Khi mỗi một tab được chọn, nó hiển thị một fragment hoặc page khác nhau. Vậy bây giờ hãy tạo ba fragment cho mỗi tab. Chúng ta sẽ bắt đầu với lớp fragment đầu tiên, và bạn sẽ thực hiện tương tự đối với hai fragment còn lại - FragmentTwo.ktFragmentThree.kt.

Đây là FragmentOne.kt của tôi:

Đồng thời đây là R.layout.fragment_one của tôi:

3. Thêm TabLayout và ViewPager

Để bắt đầu sử dụng TabLayoutViewPager trong dự án của bạn, hãy đảm bảo rằng bạn import design support và đồng thời Android support artifact - vậy hãy thêm những cái này vào trong tập tin build.gradle của module để import chúng.

Đồng thời, truy cập vào tập tin res/layout/activity_main.xml để include cả hai view là TabLayoutViewPager:

Ở đây chúng ta tạo ra một TabLayout đơn giản với id là tab_layout. Trong XML của TabLayout, bạn có thể thấy rằng chúng ta thêm một số thuộc tính - chẳng hạn như app:tabModefixedapp:tabGravity thành fill. Thuộc tính app:tabGravity được sử dụng để cấu hình các phần tử tab sẽ được hiển thị theo cách chiếm lấy khoảng không gian trống như thế nào. Chúng ta thiết lập thành fill, sẽ phân bổ các phần tử đều nhau dọc theo chiều rộng của TabLayout. Lưu ý rằng nó sẽ hiển thị nhiều hơn trong những màn hình rộng hơn, chẳng hạn như tablet.

Tôi cũng include một thuộc tính tuỳ biến (@style/CustomTabLayout) ở trong TabLayout của chúng ta.

Chúng ta bắt đầu việc tuỳ biến TabLayout bằng cách thiết lập các giá trị của các thuộc tính cần được áp dụng trên TabLayout. Ở đây là các chi tiết cho một số thuộc tính được áp dụng:

  • tabIndicatorColor: thiết lập màu sắc nhận biết cho tab hiện được chọn. Điều này cũng có thể được lập trình để thiết lập bằng cách gọi setSelectedTabIndicatorColor() trên một đối tượng TabLayout.
  • tabIndicatorHeight: thiết lập chiều cao nhận biết cho tab hiện được chọn. Nó cũng có thể được lập trình để thiết lập bằng cách gọi setSelectedTabIndicatorHeight() trên một đối tượng TabLayout.
  • tabSelectedTextColor: thiết lập màu chữ ứng với những trạng thái khác nhau (bình thường, được chọn) được dùng cho tab. Tương tự với thuộc tính này trong Java là setTabTextColors().

Ngay sau khi tạo xong TabLayout trong XML, view tiếp theo là ViewPager. Tài liệu hướng dẫn chính thức nói về ViewPager như sau:

Layout manager cho phép người dùng vuốt sang trái và phải để chuyển qua lại giữa các trang dữ liệu.

4. Tạo PagerAdapter

Chúng ta cần tạo một lớp con ở trong SampleAdapter.kt mở rộng lớp FragmentPagerAdapter. Lớp này chịu trách nhiệm quản lý các fragment khác nhau sẽ được hiển thị trên các tab.

Chúng ta override ba phương thức từ lớp cha: getItem(), getCount()getPageTitle(). Dưới đây là giải thích cho các phương thức:

  • getItem(): Trả về một Fragment ứng với một vị trí cụ thể bên trong ViewPager.
  • getCount(): xác định có bao nhiêu trang ở trên ViewPager.
  • getPageTitle(): Phương thức này được gọi bởi ViewPager để lấy một chuỗi tiêu đề nhằm mô tả cái tab được chỉ định.

Ví dụ, nếu tab được chọn là tab đầu tiên với tiêu đề là "Tab 1 Item", một trang FragmentOne sẽ được đưa ra cho người dùng ngay lập tức.

5. Khởi tạo các thành phần

Tiếp theo, chúng ta sẽ khởi tạo các đối tượng TabLayout, ViewPagerSampleAdapter. Việc khởi tạo sẽ xảy ra bên trong phương thức onCreate() trong MainActivity.kt.

Chúng ta lấy tham chiếu đến TabLayoutViewPager từ R.layout.activity_main và khởi tạo chúng. Chúng ta cũng tạo một đối tượng SampleAdapter - truyền vào một đối số là một đối tượng FragmentManager. Chúng ta cần cung cấp các view cho ViewPager của chúng ta, vì vậy chúng ta gọi setAdapter() và truyền adapter đã được tạo vào nó. Cuối cùng, chúng ta gọi setupWithViewPager() trên một đối tượng TabLayout để làm một số việc:

  • tạo tab yêu cầu cho từng trang
  • thiết lập các listener cần thiết

Khi người dùng nhấp vào một tab, nó thay đổi các trang trong ViewPager và hiển thị tab theo yêu cầu (hoặc Fragment). Đồng thời, vuốt qua lại giữ các trang sẽ cập nhật tab được chọn. Nói cách khác, phương thức này giúp chúng ta lưu ý đến sự thay đổi trạng thái cuộn và nhấp vào các tab.

onTabSelectedListener() được sử dụng để include một listener sẽ được gọi khi sự lựa chọn tab thay đổi. Chúng ta override những callback sau:

  • onTabSelected(): được gọi khi một tab chuyển sang trạng thái được chọn.
  • onTabUnselected(): được gọi khi một tab không còn được chọn.
  • onTabReselected(): được gọi khi một tab đã được chọn được chọn lại bởi người dùng.

Lưu ý rằng chúng ta cũng có thể lập trình để thiết lập chế độ tab - thay vì thông qua layout XML - bằng setTabMode() trên một đối tượng TabLayout. Chúng ta truyền chế độ (fixed hoặc scrollable) vào phương thức này như là các đối số. Ví dụ, chúng ta có thể truyền TabLayout.MODE_FIXED đối với chế độ fixed - hoặc TabLayout.MODE_SCROLLABLE đối với chế độ scrollable.

Lưu ý rằng nếu bạn muốn tạo một cách rõ rằng thay vì sử dụng phương thức trợ giúp setUpWithViewPager(), bạn có thể sử dụng newTab() trên một đối tượng TabLayout.

Lưu ý rằng chúng ta có thể tạo một cách rõ ràng các tab thông qua XML thay vì lập trình.

6. Chạy thử ứng dụng

Cuối cùng, bạn đã có thể chạy ứng dụng!

Final demo app

Thử tương tác với ứng dụng bằng cách vuốt trái hoặc phải và chạm vào các tab.

7. Tab có thể cuộn

Chỉ dẫn chính thức của Material Design về tab nói về các tab có thể cuộn như sau:

Các tab có thể cuộn hiển thị một bộ tab con tại bất kỳ thời điểm nào. Chúng có thể chứa các nhãn dài và một lượng lớn các tab hơn so với fixed. Tab có thể cuộn tốt nhất được dùng để duyệt qua các ngữ cảnh trên các giao diện cảm ứng khi người dùng không cần trực tiếp so sánh các nhãn của tab.

Hãy xem cách tạo các tab với cấu hình có thể cuộn scrollable. Tôi đã tạo tiêu đề cho mỗi tab dài hơn trước. Dưới đây là kết quả ở trong chế độ fixed:

Longer tab title in TabLayout

Bạn có thể thấy rằng TabLayout đã sử dụng nhiều dòng để hiển thị mỗi tiêu đề của tab. Trong một số trường hợp, nó sẽ cắt bớt tiêu đề! Điều này tạo ra một trải nghiệm không tốt, vì vậy nếu tiêu đề tab cần phải dài, bạn nên cân nhắc sử dụng chế độ scrollable. Lưu ý rằng, nếu bạn muốn có nhiều hơn bốn tab, thì tôi khuyên bạn nên sử dụng chế độ scrollable.

Hãy thay đổi thuộc tính app:tabMode từ fixed sang scrollable.

Nhớ rằng, bạn cũng có thể lập trình để thiết lập chế độ tab như đã đề cập trước đó.

Scrollable mode for tabs

8. Hiển thị biểu tượng tab

Bây giờ hãy đi sâu vào cách thay thế văn bản bằng biểu tượng.

Ở đây chúng ta gọi phương thức getTabAt() trên một đối tượng TabLayout. Việc gọi phương thức này sẽ trả về tab tại index đã cho. Tiếp theo, chúng ta gọi setIcon(). Việc gọi phương thức này sẽ thiết lập biểu tượng được hiển thị trên tab này.

Tôi cũng thiết lập chế độ tab thành fixed.

Tôi vẫn override getPageTitle() bên trong SampleAdapter.

Dưới đây là kết quả:

App demo with tab icons and titles

Bây giờ, nếu bạn chỉ muốn biểu tượng thôi, thì bạn chỉ cần không override getPageTitle().

App demo with tab icons

9. Bonus: Sử dụng Template trên Android Studio

Thay vì phải viết quá nhiều code chỉ để tạo một giao diện dạng tab hoặc activity từ đầu, Android Studio 3.0 có một số template sẵn có (dành cho Java và Kotlin) để giúp bạn bắt đầu nhanh dự án của mình. Một template như thế có thể được sử dụng để tạo một activity dạng tab.

Tôi sẽ hướng dẫn cho bạn cách sử dụng tính năng tiện dụng này trong Android Studio 3.

Đối với dự dán mới, mở Android Studio 3 lên.

Android Studio create project dialog

Nhập tên cho ứng dụng và nhấp vào Next.

Bạn có thể giữ nguyên trong hộp thoại Target Android Devices. Nhấp vào Next.

Add an Activity to Mobile dialog

Trong hộp thoại Add an Activity to Mobile, cuộn xuống và chọn Tabbed Activity. Nhấp vào Next sau đó.

Configure Activity dialog

Trong hộp thoại cuối cùng, cuộn xuống đến menu Navigation Style và chọn Action Bar Tabs (with ViewPager). Cuối cùng, nhấp vào Finish để đồng ý tất cả các cấu hình.

Android Studio bây giờ đã giúp chúng ta tạo một dự án với một activity dạng tab. Thật tuyệt!

Android Studio XML design view for layout

Khuyên bạn nên khám phá code được tạo ra.

Trong một dự án Android Studio đã có, để sử dụng template này, chỉ cần vào File > Activity > Tabbed Activity. Và làm theo các bước tương tự đã được mô tả trước đó.

Navigation to tabbed activity button in Android Studio

Các template đi kèm với Android Studio rất tốt cho các layout đơn giản và tạo các ứng dụng cơ bản, nhưng nếu bạn muốn nâng cấp ứng dụng của bạn lên, bạn có thể cân nhắc một số template ứng dụng hiện có từ Envato Market.

Chúng thật sự giúp tiết kiệm thời gian dành cho những nhà phát triển có kinh nghiệm, giúp họ bỏ qua giai đoạn tạo một ứng dụng từ đầu và tập trung vào những phần độc đáo và tuỳ biến.

Phần tóm tắt

Trong hướng dẫn này, bạn đã được học cách tạo một giao diện dạng tab trong Android sử dụng TabLayoutViewPager từ đầu. Chúng ta cũng đã khám phá cách dễ dàng và nhanh chóng sử dụng các template của Android Studio để tạo một giao diện dạng tab.

Tôi thành thật khuyên bạn xem qua tài liệu hướng dẫn chính thức về Material Design dành cho tab để tìm hiểu thêm về cách thiết kế và sử dụng tab trong Android một cách lợp lý.

Để tìm hiểu thêm về viết code cho Android, hãy theo dõi một số khoá học và hướng dẫn ở trên Envato Tuts+!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.