Sử dụng Floating Action Button (FAB)

Giới thiệu về Floating Action Button (FAB)

FAB là một nút bấm đặc biệt, chúng thường được biểu diễn bởi hình tròn với biểu tượng, nó nổi trên bề mặt các giao diện thiết kế, thường thì tùy ngữ cảnh bấm vào nó để thực hiện các hành động tương ứng.

Nguyên tắc thiết kế giao diện có sử dụng FAB theo triết lý Materail Design được Google đề xuất ở đây: FAB Design

Thường thì bạn sử dụng FAB tùy thuộc ngữ cảnh, và FAB là thao tác chủ đạo đưa ra cho người dùng thực hiện. Ví dụ bạn đang ở màn hình xem danh sách email, có thể xuất hiện FAB để bấm vào đó tạo một Email mới (nếu cho rằng đây là thao tác người dùng hay sử dụng) …

Kiếm Icon cho FAB

Ngoài cách tự thiết kế vẽ ICON sử dụng cho FAB, có rất nhiều ICON chuẩn của Google phù hợp tại material.io, bạn chỉ việc tìm Icon phù hợp, tải về và nhét vào res/drawable của dự án và sử dụng.

Bạn có thể tải định dạng svg sau đó dùng SVG -> XML Drawable để dễ dùng hơn.

Thư viện sử dụng

Để sử dụng FAB bạn cần thêm vào build.gradle thư viện: compile 'com.android.support:design:X.X.X' với X là phiên bản muốn dùng. Ngoài ra cũng nên thêm các thành phần để sử dụng cùng FAB như recyclerview …

Tóm lại bạn kiểm tra build.gradle và thêm các thư viện như thế này vào:

Sử dụng FAB

FAB có thể thêm vào các file layout với cú pháp dạng:

Với fabSize có thể nhận giá trị normal thì FAB ở cỡ chuẩn, và giá trị mini FAB ở cỡ nhỏ.

Để định vị FAB một cách linh động, chúng ta sẽ sử dụng CoordinatorLayout để trình bày Layout, vì loại View này giúp cho việc tương tác giữa các phần tử View con của nó được dễ dàng hơn, đặc biệt là các hiệu ứng động khi thực hiện cuốn các phần tử, phần này trình bày sau. Ngay bây giờ chúng ta sẽ sử dụng ưu điểm của CoordinatorLayout khi cho phép ta điều khiển trượt một .

Ví dụ đơn giản, sử dụng ListViewFloatingAcionButton bên trong CoordinatorLayout, lưu ý đến thuộc tính layout_anchor và layout_anchorGravity

Code để ListView hiện thị một danh sách dữ liệu

fabLưu ý: Thuộc tính sử dụng trong FAB

  • app:layout_anchor chỉ ra vị trí của FAB neo cùng với View nào, ví dụ trên là app:layout_anchor=”@id/mylistview”, tức là đố tượng hiện thị danh sách
  • app:layout_anchorGravity chỉ ra vị trí neo tương đối so với đối tượng vào, có nhiều giá trị có thể nhận như: top, left, right, buttom, start, end ... tương ứng khi neo vào đỉnh, bên trái, bên phải, phía dưới …

Hiệu ứng động – Ẩn/Hiện Floating Action Button

Khi cuộn danh sách lên xuống, bạn muốn FAB ẩn đi/hiện ra khi kéo lên, xuống như dạng sau:

FAB AnimateĐể thực hiện điều này, trước tiên việc hiện thị danh sách dùng ListView cần chuyển sang dùng RecyclerView, vì RecyclerView có hỗ trợ tương tác với các phần tử khác bên trong CoordinatorLayout

Chi tiết về sử dụng RecyclerView sẽ đề cập chi tiết riêng ở phần sau

Trong layout chuyển sang như sau:

Tiếp thay vì dùng ArrayAdapter như ListView, RecyclerView phải dùng lớp kế thừa từ RecyclerView.Adapter, trong đó bạn phải xây dựng thêm lớp kế thừa từ RecyclerView.ViewHolder để biểu diễn View các phần tử trong danh sách. Mã chuyển đổi đầy đủ như sau:

Chạy thử, thấy đã hiện thị và ứng xử tương đương với cách dùng ListView ở trên

fab

Bây giờ đặt giả thiết, FAB sẽ ẩn đi nếu vuốt ngược lên và hiện thị khi kéo danh sách về đầu, với yêu cầu chỉ hiện thị nếu phần tử đầu tiên của danh sách hiện thị (và chỉ ẩn đi nếu phần tử đầu tiên bị ẩn).

Tiến hành làm như sau:

Do FAB trong layout xây dựng bằng CoordinatorLayout nên nó có thể thiết lập thuộc tính app:layout_behavior để trỏ tới lớp xử lý ứng xử của FAB. Lớp này bạn xây dựng bằng kế thừa FloatingActionButton.Behavior, trong đó quan trọng bạn sẽ quá tải phương thức onNestedScroll để xử lý FAB mỗi khi RecyclerView cuộn lên xuống. Giả xử lớp này bạn xây dựng có tên MyFABAnimate thì nội dung code như sau:

Như vậy bạn đã có lớp net.xuanthulab.floatactionbuttondemo.MyFABAnimate quay lại layout, bạn chỉ việc cho thêm vào FAB thuộc tính: app:layout_behavior=”net.xuanthulab.floatactionbuttondemo.MyFABAnimate”

Chạy thử

FAB trên Header

Trong nhiều thiết kế UI, FAB cũng có thể đặt ở phần đầu Header, ví dụ:

Bạn cũng có thể làm vậy, ở ví dụ trên đơn giản bạn thay cách trình bày Layout, ví dụ:

Chú ý khi dùng FAB – Floating Action Button

  • Khi ẩn / hiện gọi hide()/show để có luốn hiệu ứng thu nhỏ/phóng to
  • Nếu muốn tô màu cho FAB dùng thuộc tính: app:backgroundTint
  • Trên một màn hình chỉ nên có 1 FAB

Bài viết khác

Hồ Diên Lợi
Đến với CNTT là tình cờ, tuy nhiên khi đã tham gia rồi thì mới biết đây chính là đam mê, hy vọng dịch bệnh Covid-19 sẽ qua, để chia sẽ đam mê công nghệ đến nhiều người hơn!

DANH SÁCH BÀI HỌC