Giới thiệu về Jetpack Compose cho các thiết kế UI Android nhanh chóng

0
31


Tại Hội nghị thượng đỉnh Android Dev 2019, Google thông báo rằng Jetpack Compose sẽ được phát hành trong phiên bản Canary của Studio Android 4.0.

Jetpack Compose có thể thay đổi cách chúng ta thiết kế UI Android.

Jetpack Compose là một công cụ mới để thiết kế giao diện người dùng ứng dụng Android, có thể thay đổi cách chúng tôi xử lý bố cục trên các thiết bị. Mục đích là để tăng tốc độ phát triển, giảm số lượng mã và cuối cùng tạo ra các giao diện người dùng thanh lịch và trực quan hơn. Chúng tôi giảm xuống cho tất cả điều đó!

Cũng đọc: Hướng dẫn sử dụng Android Studio cho người mới bắt đầu

Nhưng liệu Jetpack Compose có thực sự hữu ích? Hay đó chỉ là một lớp khó hiểu khác nằm trên vô số quy trình và phương pháp làm việc đã là một phần của sự phát triển Android? Hãy để đào sâu hơn một chút vào những gì nó có thể làm và cách sử dụng nó.

Jetpack Compose là gì?

Jetpack Compose là một hệ thống UI phản ứng khai báo. Nó hoàn toàn không cần đến bố cục XML, điều này có khả năng thu hút lớn đối với các nhà phát triển mới đang cố gắng quấn đầu quanh các dự án Android mới.

(nhúng) https://www.youtube.com/watch?v=SPsdRXcgqjI (/ nhúng)

Thay vào đó, các nhà phát triển sẽ gọi các hàm Jetpack Compose để xác định các phần tử và trình biên dịch sẽ thực hiện phần còn lại.

Điều đó có nghĩa là, bạn thực sự đang sử dụng một loạt các hàm (được gọi là các hàm tổng hợp) để mô tả giao diện người dùng theo chương trình. Để làm điều này, bạn chú thích các chức năng với @Composable nhãn. Những gì thẻ đó thực sự đang làm là yêu cầu trình biên dịch tạo tất cả mã soạn sẵn cho bạn, giúp tiết kiệm thời gian trong khi vẫn giữ cho mã của chúng tôi sạch sẽ và dễ đọc.

Tuy nhiên, các hàm won được đặt ở bất cứ đâu trong dòng mã của bạn (điều này sẽ rất tốt). Thay vào đó, bạn sẽ tạo ra một Hoạt động sáng tác bản mẫu. Tại đây, bạn có thể bắt đầu thêm các yếu tố của mình.

Xin chào thế giới và hơn thế nữa với Jetpack Compose

Nếu bạn muốn cung cấp Jetpack Compose cho Android ngay bây giờ, thì bạn có thể lấy nó thông qua bản dựng Canary của Android Studio, đây. Hãy nhớ rằng đây là phần mềm xem trước, vì vậy nó có thể thay đổi theo thời gian. Bây giờ hoặc bắt đầu một dự án Jetpack Compose mới hoặc thêm hỗ trợ Compose cho dự án hiện có.

Dự án soạn thảo Jetpack mới

Một tính năng thú vị của Compose là khả năng xem trước các thay đổi ứng dụng của bạn trực tiếp. Điều đó có nghĩa là không có nhu cầu xây dựng APK của bạn và cài đặt nó trên thiết bị / trình giả lập. Chỉ cần thêm một thẻ thứ hai @Preview đến bất kỳ chức năng nào lấy tham số và bạn sẽ thấy những gì bạn đã xây dựng xuất hiện ở bên phải.

Khi bạn tạo hoạt động mới, nó sẽ hiển thị mã mẫu hiển thị văn bản ra màn hình. Điều này trông giống như vậy:

setContent {
                Text(“Hello world!”)

}

Trong ví dụ này, setContent khối đang thiết lập bố cục của hoạt động và trong đó, chúng ta có một khối văn bản đơn giản.

Ví dụ sau đó tiếp tục cho thấy cách bạn sử dụng hàm tổng hợp với @Composable chú thích. Điều này trông giống như vậy:

@Composable
fun Greeting(name: String) {
                Text (text = “Hello $name!”)

}

Bây giờ bạn có thể gọi hàm này (chỉ trong phạm vi của các hàm tổng hợp khác) để thay đổi tên trên nhãn.

Ví dụ soạn thảo Jetpack

Trở nên xinh đẹp

Đây không phải là chính xác một giao diện người dùng – nó chỉ là một đoạn văn bản.

Nếu chúng ta muốn đưa nó đi xa hơn và biến nó thành một thứ gì đó hấp dẫn hơn một chút, thì chúng ta sẽ cần một số chức năng bổ sung. May mắn thay, có một số tốt để chọn từ.

Một ví dụ là Cột() chức năng, sẽ đặt các yếu tố riêng biệt trong một bố trí cột. Như bạn có thể mong đợi, bạn cũng có thể sử dụng các hàng để bắt đầu tạo bố cục các nút và văn bản phức tạp hơn.

Để thêm một nút, bạn sẽ làm một cái gì đó như thế này:

Button (
                text = “Button1”,
                onClick = { //place the click listener here }
                style = ContainedButtonStyle()

)

Các ChứaButtonStyle () sẽ cung cấp cho bạn một cái gì đó tương tự Vật liệu thiết kế.

Đồ họa được thêm vào đơn giản bằng cách sử dụng DrawImage (). Một chiều cao sẽ cho phép bạn tách các yếu tố của bạn với một khoảng cách nhỏ. Và có nhiều công cụ khác nhau để đệm và sắp xếp các yếu tố khác nhau của bạn.

Đây không phải là một hướng dẫn đầy đủ bằng bất kỳ phương tiện. Đối với một hướng dẫn sâu hơn, xem tài liệu riêng của Google. Như bạn có thể thấy, Compose làm cho nó tương đối đơn giản để bắt đầu kết hợp một giao diện người dùng cơ bản và áp dụng logic đơn giản.

Bớt tư tưởng

Vì vậy, đó là Compose trong một tóm tắt. Chúng ta làm gì với nó?

JetPack Compose được thiết kế để tương thích ngược và hoạt động với các ứng dụng hiện có của bạn với những thay đổi tối thiểu. Điều đó có nghĩa là nó sẽ hoạt động với các chế độ xem hiện có và bạn có thể chọn và chọn các yếu tố để sử dụng từ chế độ xem đó.

Điều này thật tuyệt vời về mặt lý thuyết, nhưng thật không may, vẫn còn một số việc phải làm nếu điều đó sẽ hoàn toàn đúng. Đối với một người, sáng tác chỉ dành cho Kotlin, đây sẽ là một nỗi đau cho những người không quen thuộc với nó (chỉ cần thêm một lý do để thực hiện chuyển đổi, nếu bạn đã trú ẩn rồi!). Điều đó cũng có nghĩa là bạn đã thắng được luôn luôn có thể tích hợp nó nhanh chóng vào các dự án hiện có của bạn.

Tìm hiểu C # cho Android

Nó cũng đáng lưu ý rằng Compose không tạo ra các khung nhìn, mà là vẽ trực tiếp lên một khung vẽ bằng cách sử dụng drawRec () cho những thứ như nút. Vì vậy, nó có thể có một chút nhầm lẫn!

Và đây là nơi mọi thứ có thể gây nhầm lẫn cho người mới. Hãy tưởng tượng rằng bạn đang cố gắng học Android lần đầu tiên bằng cách thiết kế ngược một ứng dụng. Bây giờ bạn không chỉ cần tìm ra Kotlin, XML và SDK Android là gì, mà bạn còn cần hiểu Compose phù hợp với tất cả ở đâu. Với rất nhiều công cụ và cách tiếp cận khác nhau, việc phát triển Android chắc chắn có thể có nguy cơ trở nên quá rời rạc và nan giải.

Nhưng như đã nói, tôi chắc chắn thấy được sự hấp dẫn của việc có thể nhanh chóng đánh cắp giao diện người dùng để thử một chút mã mà tôi đã viết – và Compose chắc chắn làm cho việc đó nhanh hơn và dễ dàng hơn một chút. Các nhà phát triển thích mày mò có thể thấy đây là một đề xuất hấp dẫn.

Rủi ro phát triển Android trở nên quá phân mảnh và nan giải.

Hãy cho chúng tôi biết trong các nhận xét về những gì bạn tạo ra cho Jetpack Compose và liệu bạn có muốn xem hướng dẫn đầy đủ trong tương lai hay không. Tương tự như vậy, hãy chắc chắn hét lên nếu bạn muốn có một hướng dẫn đầy đủ. Chúng tôi chắc chắn sẽ cập nhật cho bạn khi điều này ổn định.



Nguồn AndroidAuthority

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây