Giới thiệu

Trong Google IO ’19, Google đã ra mắt Jetpack Compose để tạo UI khai báo. Về cơ bản, UI khai báo có nghĩa là tạo UI bằng cách chỉ định một tập hợp các thành phần UI cụ thể mà chúng ta cần và để cấu trúc nó theo một cách nào đó.

Vì vậy, hãy thảo luận từng cái một về cách chúng ta có thể sử dụng jetpack compose.

Nguồn: https://blog.mindorks.com/using-jetpack-compose-to-build-ui-in-android

Bước 01. Cài đặt

thêm google () vào tệp build.gradle của dự án

Bước 02. App’s Gradle

Bước 03. Project’s gradle file

Bước 04. Cuối cùng, thêm Project dependency

Bây giờ, chúng ta đã hoàn tất việc thiết lập project. Hãy xây dựng UI. Bây giờ, chúng ta sử dụng setContentView để tăng bố cục từ một tệp XML. Nhưng trong hướng dẫn này, chúng ta sẽ sử dụng Jetpack compose để thiết kế tệp bố cục.

Bước 05. Trong Activity File

Bây giờ, chúng ta đặt design trong setContent. Ở đây chúng tôi gọi sử dụng composable functions. Hãy bắt đầu với Hello World.

Bước 06. Hãy thảo luận về cách tạo một composable function.

để tạo một composable function, chúng ta cần sử dụng chú thích @Composable.

và gọi helloWorld () trong setContent {}

• Các Composable function chỉ có thể được gọi từ một Composable function khác.

Bước 07. Hãy xác định một container.

Ở đây nếu chúng ta cần có một hành vi trong linearLayout với định hướng ở chế độ dọc. Ở đây, chúng tôi sử dụng Container,

Điều này sẽ xếp các phần tử trong bố trí tuyến tính theo thứ tự dọc. Trong phần này, hãy thảo luận với một ví dụ về các button,

Ở đây, chúng ta thiết kế hai loại nút khác nhau

• ContainedButtonStyle () – điều này sẽ xây dựng một nút với đầy màu sắc trong nút thiết kế vật liệu.
• OutlinesButtonStyle () – cái này sẽ chỉ có một nút phác thảo với màu trắng được lấp đầy

Kết quả

• chúng ta cũng có thể có TextButtonStyle () nơi chúng ta chỉ có văn bản trong nút.
  Nếu chúng ta muốn thiết kế nguyên tắc thiết kế Vật liệu trong Android, chúng ta có thể sử dụng MaterialTheme ()

Bước 08. Hãy thảo luận về cách tạo danh sách bằng Jetpack Compose

Ở đây, createListView là một composable function. Và trong đó, chúng tôi xác định các list items.

Bây giờ, trong này, hãy thảo luận từng cái một.

• MaterialTheme – điều này sẽ xác định theme của view lấy từ material container
• VerticalScroller – Cơ bản, điều này giúp cuộn các list items
• Column – Nó tạo một cột để tạo và xếp chồng tất cả các mục trong listview theo chiều dọc. Trong đó, chúng tôi tạo 10item bằng cách sử dụng forEachIndexed và chúng tôi gọi hàm createListItem(index) là composable function để tạo các list items một cách cụ thể.
  Bây giờ, createdListItem trông giống như

Trong phần này, chúng tôi thêm chỉ định phần đệm với đơn vị 8dp từ tất cả các phần cuối bằng cách sử dụng Padding và sau đó chúng tôi tạo FlexRow.

• FlexRow giống như một cột nhưng trong đó, nó xếp các phần tử theo hướng nằm ngang.
• crossAxisAlocation ở đây chỉ định sự liên kết của children.
• expanded giống như trọng lượng và trong đó chúng tôi tạo ra một Text.
• inflexible giống như wrap_content và trong đó chúng ta tạo một Button trong mỗi item có click listener.
  Bây giờ, hãy chạy ứng dụng và xem bản xem trước

Chúng ta đã hoàn thành việc tạo một List trong Jetpack Compose.

Ngoài lề

để tạo Alert Dialog chúng tôi sử dụng,

Ở đây, onCloseRequest giống như setCancelable và phần còn lại giống như điền dữ liệu.

• Để thiết kế một floating action button, chúng ta sử dụng

• Để tạo một progress bar, chúng tôi sử dụng,

và

Để xem bản xem trước composable function, chúng ta thực hiện bằng cách sử dụng,

bạn có thể thấy chúng ta đang sử dụng Preview annotation để kiểm tra xem trước các composable functions.

Đây là cách chúng ta có thể làm việc với Jetpack Compose. Để đọc thêm về nó, hãy thử https://developer.android.com/jetpack/compose.