Rút ra bài viết này

Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng các trang tính dưới cùng trong Jetpack Compose . Chúng tôi sẽ đề cập đến cả các tờ dưới cùng bền và các tờ dưới cùng phương thức. Ở cuối bài viết này, bạn sẽ tìm thấy liên kết dự án GitHub, vì vậy hãy thoải mái khám phá mã.

Giới thiệu

Jetpack Compose là một trong những nỗ lực gần đây của Google nhằm giúp các nhà phát triển Android dễ dàng xây dựng giao diện người dùng.

“Jetpack Compose là một bộ công cụ hiện đại để xây dựng giao diện người dùng Android gốc. Jetpack Compose đơn giản hóa và tăng tốc phát triển giao diện người dùng trên Android với ít mã hơn, công cụ mạnh mẽ và API Kotlin trực quan. ” - Nhà phát triển Android

Jetpack Compose gần đây đã chuyển sang phiên bản beta. Điều này có nghĩa là sẽ không còn bất kỳ thay đổi mạnh mẽ nào trong cấu trúc API, vì vậy sẽ là thời điểm tuyệt vời để tìm hiểu cách làm việc với bộ giao diện người dùng thế hệ tiếp theo này để phát triển Android.

Bạn sẽ cần cài đặt phiên bản Android Studio Canary, Arctic Fox (2020.3.1) để sử dụng Jetpack Compose beta.

Điều kiện tiên quyết

Trước khi đi xa hơn, bạn phải có kiến ​​thức cơ bản về cách làm việc với Jetpack Compose. Nếu bạn chưa quen với tính năng Soạn thư, tôi thực sự khuyên bạn nên xem qua các bài viết sau:

• “ Các thành phần soạn nhạc Jetpack (Phần 1) ”
• “ Xây dựng bố cục Android trong JetPack Compose ”
• “ Chủ đề trong Jetpack Compose cho Android ”
• “ Điều hướng với Jetpack Compose trong Android ”

Trang dưới cùng trong Android là thành phần giao diện người dùng material design. Về cơ bản, đó là một chế độ xem đi vào giao diện từ cuối màn hình với hoạt ảnh mượt mà. Có hai ưu điểm chính của việc sử dụng các tấm dưới cùng:

• Chúng có thể vuốt - Điều này tạo ra một giao diện UX tương tác hơn cho người dùng hơn là nhấp vào một nút.
• Truy cập nhanh - Vì chúng được cố định ở dưới cùng, người dùng có thể dễ dàng truy cập nội dung.

Các tấm dưới cùng bền bỉ

Tiêu đề khá tự giải thích: Nó dai dẳng ở cuối màn hình. Người dùng có thể trượt lên và xuống để mở rộng và thu gọn trang tính. Chúng tôi có thể điều chỉnh chiều cao đỉnh, nghĩa là chiều cao mặc định của trang tính dưới cùng được thu gọn.

Trang tính dưới cùng

Các trang dưới cùng phương thức tương tự như hộp thoại. Sự khác biệt duy nhất là trang tính dưới cùng của phương thức có hoạt ảnh mượt mà và người dùng có thể vuốt nó tương tự như vuốt trang dưới cùng liên tục. Không giống như với trang dưới cùng liên tục, ở đây người dùng không thể truy cập nội dung ra khỏi phạm vi của trang dưới cùng.

Bottom Sheets trong Jetpack Compose

Jetpack Compose out of the box hỗ trợ cả trang tính ở dưới liên tục và theo phương thức. Bất kỳ tấm đáy có thể kéo nào khác cũng có giá đỡ riêng của chúng: BottomSheetScaffoldvà ModalBottomSheetLayout.

Không có bất kỳ sự chậm trễ nào nữa, chúng ta hãy bắt đầu

BottomSheetScaffold

BottomSheetScaffoldlà một chức năng có thể ghép đơn giản được sử dụng để hiển thị tờ dưới cùng liên tục. Hãy xem phần có thể kết hợp:

Đừng để bị choáng ngợp với số lượng các thông số. Vì nó là một khung, về cơ bản sẽ có hai chế độ xem được quản lý, trang dưới cùng và nội dung đằng sau nó. Ở đây tôi sẽ chỉ giải thích các thông số mà chúng ta cần để xây dựng một trang dưới cùng bền vững:

• sheetContent - Đây là một chức năng có thể ghép đơn giản đại diện cho giao diện người dùng của trang tính.
• scaffoldState - Điều này được sử dụng để quản lý trạng thái của trang tính dưới cùng: mở rộng, thu gọn và mở rộng một nửa.
• topBar - Đây là một chức năng có thể ghép đơn giản đại diện cho thiết kế của thanh trên cùng của màn hình.
• content - Đây là một chức năng có thể kết hợp để thiết kế nội dung của màn hình phía sau trang tính dưới cùng.

Đây là một chức năng tổng hợp được xác định trước mà qua đó chúng ta có thể quản lý trạng thái của trang tính dưới cùng. Nó có các chức năng tạm ngưng tiện dụng, như mở rộng và thu gọn để thực hiện các hoạt ảnh mượt mà. Hãy xem:

Đủ các thành phần, đã đến lúc bắt đầu thực hiện. Đầu tiên, chúng tôi thiết kế khung nhìn phía sau trang tính dưới cùng. Không có gì phức tạp, chỉ là một chế độ xem đơn giản với một nút duy nhất. Khi nhấp vào nút, chúng tôi cần cập nhật trạng thái. Để cập nhật trạng thái, chúng tôi cần BottomSheetScaffoldState, chúng tôi lấy nó làm tham số cùng với CoroutineScope. Hãy xem:

Bây giờ là lúc thiết kế trang tính dưới cùng. Ở đây, chúng tôi sẽ sử dụng rememberBottomSheetScaffoldStatevà rememberCoroutineScopecác hàm có thể kết hợp để quản lý trạng thái trong quá trình sắp xếp lại.

Bạn có thể di chuyển phần thiết kế của nội dung trang tính dưới cùng để đơn giản hóa phần mã hóa.

ModalBottomSheetLayout

ModalBottomSheetLayoutlà một chức năng có thể ghép đơn giản như BottomSheetScaffoldvà được sử dụng để hiển thị trang tính dưới cùng của phương thức. Hãy xem phần có thể kết hợp:

Như thường lệ, chúng tôi chỉ xem xét các tham số mà chúng tôi cần để xây dựng trang tính dưới cùng của phương thức.

• sheetContent - Đây là một chức năng có thể ghép đơn giản đại diện cho giao diện người dùng của trang tính.
• scaffoldState —Điều này được sử dụng để quản lý trạng thái của trang tính dưới cùng: mở rộng, thu gọn và mở rộng một nửa.
• content - Đây là một chức năng có thể kết hợp để thiết kế nội dung của màn hình phía sau trang tính dưới cùng.

ModalBottomSheetStatelà một lớp Kotlin được sử dụng để quản lý trạng thái của trang tính dưới cùng. Nó có các chức năng tạm ngưng tiện dụng như mở rộng, thu gọn, mở rộng một nửa, ẩn và hơn thế nữa để thực hiện các hoạt ảnh mượt mà.

Đầu tiên chúng ta cần tạo giao diện màn hình chính như đã làm ở phần trên. Sự khác biệt duy nhất là chúng tôi sẽ thay thế BottomSheetScaffoldStatetham số bằng ModalBottomSheetState. Hãy xem:

Bây giờ là lúc thiết kế trang tính dưới cùng. Ở đây, chúng tôi sẽ sử dụng rememberModalBottomSheetStatevà rememberCoroutineScopecác hàm có thể kết hợp để quản lý trạng thái trong quá trình sắp xếp lại.

Đó là tất cả. Chúng tôi đã hoàn thành việc triển khai.

Hiển thị Trang tính Dưới cùng

Bây giờ chúng ta đã thực hiện xong phần triển khai cốt lõi, việc duy nhất còn lại là gọi ModelBottomSheetvà BottomSheetSampletổng hợp từ hoạt động. Hãy xem:

Tặng kem

Sau đây là liên kết repo GitHub với việc triển khai các trang tính dưới cùng liên tục và phương thức. Hãy tự do khám phá.

Gần đây tôi đã xem qua bài báo xuất sắc này được xuất bản bởi Satya Pavan Kantamani về Kotlin DSL. Nó rất được khuyến khích:

Đó là tất cả cho bây giờ. Tôi hy vọng bạn đã học được một cái gì đó hữu ích. Cảm ơn vì đã đọc.