Giới thiệu về Jetpack Compose

Dec 10 2022
Jetpack Compose là bộ công cụ giao diện người dùng hiện đại được Google ra mắt gần đây, được sử dụng để xây dựng giao diện người dùng Android gốc. Nó đơn giản hóa và tăng tốc quá trình phát triển giao diện người dùng với ít mã hơn, API Kotlin và các công cụ mạnh mẽ.

Jetpack Compose là bộ công cụ giao diện người dùng hiện đại được Google ra mắt gần đây, được sử dụng để xây dựng giao diện người dùng Android gốc. Nó đơn giản hóa và tăng tốc quá trình phát triển giao diện người dùng với ít mã hơn, API Kotlin và các công cụ mạnh mẽ.

Jetpack soạn thảo cho chúng tôi cơ hội tạo giao diện người dùng khác được gọi là Khung khai báo và thực hiện giao dịch này ở chế độ gốc.

Bạn có thể thấy rằng các mã được viết bằng Flutter và React Native, đã tạo giao diện người dùng và giờ đây bạn có thể thực hiện tất cả những điều này với Jetpack Compose.

Lưu ý : Jetpack Compose được phát hành vào tháng 3 năm 2021. Bạn cần có Android Studio Artic Fox để sử dụng Compose hoạt động tối thiểu sdk 21 .

Tại sao chúng ta nên sử dụng Jetpack Compose?

  • Khai báo : Nó là khai báo đầy đủ để bạn có thể mô tả các thành phần giao diện người dùng của mình bằng cách gọi một số chức năng được xác định trước.
  • Tương thích: Nó dễ dàng tương thích với các chế độ xem hiện có trong Android.
  • Tăng tốc độ phát triển: Trước đây các nhà phát triển phải làm việc trên tệp XML và tệp Kotlin. Nhưng với sự trợ giúp của jetpack, việc soạn thảo này trở nên dễ dàng và các nhà phát triển chỉ phải làm việc trên các tệp Kotlin, đó là lý do tại sao nó sẽ giúp các nhà phát triển tăng tốc độ phát triển.
  • Kotlin súc tích và thành ngữ: Jetpack Compose đã xây dựng giao diện người dùng với lợi ích mà Kotlin mang lại.
  • Dễ bảo trì: Vì cơ sở mã của bất kỳ ứng dụng nào đều có trong một tệp duy nhất. Việc quản lý và xử lý cơ sở mã của ứng dụng trở nên dễ dàng.
  • Được viết bằng Kotlin: Ứng dụng được viết bằng jetpack Compose sử dụng 100 % ngôn ngữ lập trình Kotlin.

Với tính năng mới đi kèm với Compose, bạn có thể xem đầu ra mà không cần trình giả lập.

Tạo dự án bằng cách chọn Hoạt động soạn thư trống mới và kiểm tra cấu trúc chính của Jetpack Compose.

Hoạt động soạn thư trống mới

Khi chúng ta chọn Empty Compose Activity, lớp MainActivity sẽ xuất hiện như bên dưới.

Điều đầu tiên bạn nhận thấy là Main Activity được kế thừa từ ComponentActivity chứ không phải AppCompatActivity.

Xem lại để phân lớp, với Jetpack Compose bạn sẽ thấy trường đã được thêm vào ngay bên dưới.

Nếu mở project dưới dạng EmptyActivity, bạn cần thêm các phụ thuộc như bên dưới.

Chúng tôi đã nói rằng bạn có thể xem thiết kế mà không cần xây dựng trong thời gian chạy.

Khi chúng tôi chọn Chế độ xem phân tách , chúng tôi có thể xem bản xem trước của mã Kotlin mà chúng tôi viết.

Chú thích @Preview: Bạn có thể thêm các tham số theo cách thủ công vào mã của mình để tùy chỉnh cách Android Studio hiển thị chú thích xem trước.

Đồng thời chúng ta muốn xem hết màn hình hoặc mục nào đó thì có thể thêm mục vào dưới chú thích.

Các chức năng có thể tổng hợp là các khối xây dựng cơ bản của một ứng dụng được xây dựng bằng Compose.
Khả năng tổng hợp có thể được áp dụng cho một hàm hoặc lambda để chỉ ra rằng hàm/lambda có thể được sử dụng như một phần của thành phần để mô tả quá trình chuyển đổi từ dữ liệu ứng dụng thành cây hoặc cấu trúc phân cấp.

Đoạn mã dưới đây tạo đối tượng TextView ở dạng xml, dưới dạng Có thể kết hợp.

Lớp văn bản là một lớp có thể tổng hợp có quá nhiều tham số.

Nếu chúng tôi bắt đầu một hoạt động bình thường, chúng tôi sẽ cung cấp một bố cục bên trong setContentView nhưng bây giờ để soạn thư, chúng tôi sử dụng setContent .

Trong lớp setContent, bạn có thể thấy rằng nó muốn các tham số có thể kết hợp được từ chúng tôi được viết như bên dưới.

Lời chào là một sáng tác. Chúng tôi có thể đưa phần soạn thảo đó vào bên trong setContent khi ứng dụng được mở.

Bây giờ chúng ta đã học những chức năng đơn giản nào trong bài viết này?

  • Hàm có thể kết hợp : Hàm có thể kết hợp được thể hiện trong mã bằng cách sử dụng chú thích @Composable cho tên hàm. Chức năng này sẽ cho phép bạn xác định giao diện người dùng của ứng dụng theo chương trình bằng cách mô tả các phần phụ thuộc dữ liệu và hình dạng của nó thay vì tập trung vào quy trình xây dựng giao diện người dùng.
  • Chức năng xem trước: Bản thân tên của chức năng cho chúng ta biết rằng chức năng này được sử dụng để tạo bản xem trước của chức năng có thể kết hợp. Nó được sử dụng để hiển thị bản xem trước các chức năng có thể kết hợp trong IDE của chúng tôi thay vì cài đặt APK của chúng tôi trong trình giả lập hoặc thiết bị ảo.

Nếu bạn quan tâm đến SwitfUI trên iOS, tôi khuyên bạn nên xem bài viết của Pınar Koçak .

Tài nguyên