1. Giới thiệu Jetpack Compose
Hôm nay, chúng ta ở đây để nói về Jetpack Compose, bộ công cụ giao diện người dùng gốc, hiện đại của chúng tôi dành cho Android.
Tính năng Compose hiện đang ở giai đoạn thử nghiệm và sắp có phiên bản 1.0.
Điều này có nghĩa là đã đến lúc tìm hiểu và sẵn sàng áp dụng nó trong ứng dụng của bạn.
Nó trực quan, mạnh mẽ và được xây dựng từ đầu để tăng tốc phát triển và cho phép bạn viết giao diện người dùng với ít mã hơn nhiều. Nói cách khác, nó nhanh hơn và dễ dàng hơn, vì vậy bạn có thể tập trung vào việc xây dựng các tính năng và dành ít thời gian hơn cho việc tạo giao diện người dùng. Nhưng tại sao Android lại cần một bộ công cụ giao diện người dùng mới?
Bộ công cụ hiện có, dựa trên Views, đã có hơn 10 năm. Trong thời gian đó, công nghệ đã thay đổi.
Thiết bị mạnh mẽ hơn, người dùng có kỳ vọng cao hơn về ứng dụng và giao diện người
dùng cũng năng động và biểu cảm hơn nhiều. Và trong khi bạn vẫn có thể tạo các ứng
dụng đẹp với Views, bạn đã nói với chúng tôi rằng bạn muốn có một bộ công cụ hiện đại,
dựa trên các kiến trúc hiện đại, tận dụng sức mạnh của Kotlin.
Chúng tôi cũng muốn có thể lặp lại và mang đến cho bạn các tính năng và cải tiến nhanh
hơn. Chúng tôi đã bắt đầu làm việc trên Jetpack Compose, một bộ công cụ không nhóm
khai báo hơn ba năm trước. Chúng tôi đã phát hành bản beta đầu tiên của mình vào tháng 2,
có nghĩa là bề mặt API ổn định. Khi chúng tôi tiếp tục làm việc để hướng tới bản phát hành
ổn định của mình, bây giờ là lúc để tìm hiểu và sẵn sàng áp dụng nó, để làm cho việc xây
dựng giao diện người dùng nhanh hơn và dễ dàng hơn.
2. Làm thế nào để làm cho nó nhanh hơn và dễ dàng hơn?
Chúng tôi đã đề cập rằng Jetpack Compose là một bộ công cụ giao diện người dùng khai
báo. Hãy tách hai khái niệm đó ra và xem xét lần lượt từng khái niệm.
Đầu tiên, phần khai báo.
Ngày nay, các ứng dụng không phải là dữ liệu tĩnh, chúng cập nhật và hoạt động. Theo
truyền thống, với Android Views, bạn sẽ khai báo giao diện người dùng của mình bằng
XML, nhưng sau đó để cập nhật giao diện người dùng của bạn, nếu có bất kỳ dữ liệu nào
thay đổi, bạn cần phải thay đổi nó. Bạn thực hiện việc này bằng cách tra cứu Views và thiết
lập các thuộc tính trên chúng. Vì vậy, bất cứ khi nào trạng thái ứng dụng của bạn thay
đổi, chẳng hạn khi cơ sở dữ liệu hoặc cuộc gọi mạng tải hoặc sau khi người dùng tương
tác, bạn sẽ phải cập nhật giao diện người dùng của mình với thông tin mới này để giữ cho
mọi thứ được đồng bộ hóa.
Điều này có thể trở nên phức tạp, vì mỗi Views giữ một số trạng thái mà bạn cần đảm bảo
cập nhật. Chi phí đồng bộ hóa trạng thái giữa mô hình và giao diện người dùng của bạn là
một nguồn lỗi lớn. Với tư cách là nhà phát triển, bạn có trách nhiệm đảm bảo rằng mọi thứ
đều được cập nhật. Khi ứng dụng và giao diện người dùng của bạn ngày càng phức tạp,
điều này rất dễ xảy ra. Giao diện người dùng khai báo như Compose có một cách tiếp cận
khác.
Chúng chuyển đổi trạng thái thành giao diện người dùng. Giao diện người dùng là bất
biến, không có cách nào để cập nhật sau khi nó được sản xuất. Vì vậy, nếu trạng thái ứng
dụng của bạn thay đổi, chúng tôi sẽ thực thi lại để chuyển trạng thái mới này thành một đại
diện mới. Điều này tránh hoàn toàn các vấn đề đồng bộ hóa.
Bạn tạo lại toàn bộ giao diện người dùng. Soạn thực sự đủ thông minh để bỏ qua bất kỳ
công việc nào đối với các phần tử không thay đổi để làm cho nó hiệu quả hơn, nhưng về
mặt khái niệm, nó tái tạo toàn bộ giao diện người dùng cho một trạng thái nhất định. Mã của
bạn mô tả giao diện người dùng sẽ trông như thế nào đối với một trạng thái nhất định,
chứ không phải cách tạo ra nó.
Vậy cái này trông như thế nào? Làm thế nào để bạn chuyển đổi trạng thái thành giao diện
người dùng?
Dưới đây là một thành phần đơn giản hiển thị danh sách các điểm mạnh.
Lưu ý rằng trong Compose, một thành phần giao diện người dùng chỉ đơn giản là một
chức năng với chú thích có thể tổng hợp. Điều này giúp việc tạo các thành phần giao
diện người dùng trở nên nhanh chóng và dễ dàng, khuyến khích bạn chia nhỏ giao diện
người dùng của mình thành một thư viện các phần tử có thể tái sử dụng. Hàm không trả về
bất kỳ thứ gì, mà thay vào đó, nó phát ra giao diện người dùng.
Ở đây chúng tôi đang sử dụng Column và Text có thể tổng hợp từ thư viện Compose, sắp
xếp mọi thứ theo chiều dọc và hiển thị các nhãn văn bản đơn giản. Bây giờ chúng ta có thể
sử dụng cú pháp Kotlin đầy đủ và luồng điều khiển để tạo giao diện người dùng của chúng ta.
Ở đây, chúng tôi lặp lại các thông báo, nhưng nếu bạn muốn hiển thị có điều kiện một phần
tử, hiển thị nhãn khi không có thông báo nào, thì việc đơn giản như sử dụng câu lệnh if.
Composables có thể và nên chấp nhận các tham số.
Đó là ý của chúng tôi khi chuyển đổi dữ liệu thành giao diện người dùng.
Composable lấy dữ liệu làm tham số hàm và phát ra giao diện người dùng. Bằng cách này,
giao diện người dùng không thể bị mất đồng bộ. Ví dụ như quên xóa không có tin nhắn văn
bản trống.
Nếu trạng thái của bạn thay đổi, nếu danh sách thông báo thay đổi, thì một giao diện
người dùng mới sẽ được tạo bằng cách thực thi lại chức năng này. Chúng tôi gọi đây là sự
sáng tác lại.
Vậy danh sách tin nhắn có thể thay đổi như thế nào?
Đi lên ngăn xếp cuộc gọi, ViewModel của chúng tôi hiển thị một LiveData của các tin
nhắn. Chúng ta có thể quan sát điều này và bây giờ bất kỳ tệp nào có thể đọc trường tin
nhắn sẽ được soạn lại bất cứ khi nào có dữ liệu mới. Bạn không cần phải tự mình thiết lập
các quan sát viên.
Trình biên dịch Compose theo dõi trạng thái đọc có thể tổng hợp nào và tự động thực thi
lại chúng khi trạng thái đó thay đổi. Nó đủ thông minh để chỉ thực thi lại các bản tổng hợp
có đầu vào đã thay đổi và bỏ qua những phần chưa thay đổi, làm cho nó rất hiệu quả.
Mỗi thành phần đều là bất biến. Bạn không thể giữ một tham chiếu đến nó và truy vấn nó
sau này hoặc cập nhật nội dung của nó. Bạn cần chuyển bất kỳ và tất cả thông tin đến một
tệp có thể tổng hợp dưới dạng các tham số khi bạn thừa nhận nó. Nhưng điều đó không
có nghĩa là một tác phẩm có thể kết hợp không thể động.
Hãy tìm hiểu điều này bằng cách thêm một hộp kiểm để chọn tất cả các thư.
Ban đầu, hộp kiểm của chúng tôi không được chọn. Không giống như trong View world,
việc nhấp vào hộp kiểm này sẽ không chuyển đổi nó một cách trực quan. Rốt cuộc, chúng tôi
đã vượt qua trong một trạng thái không đổi.
Nếu chúng ta muốn nó thay đổi, mã phải phản ánh điều đó. Hãy giới thiệu một biến cục bộ
để kiểm soát xem nó có nên được kiểm tra hay không.
Checkbox cung cấp sự kiện onCheckChange khi nó được nhấp vào. Chúng tôi có thể cập
nhật trạng thái địa phương của chúng tôi trong cuộc gọi lại này. Làm như vậy sẽ khiến hộp
kiểm được đọc khi nó đọc trạng thái. Điều quan trọng cần hiểu là nếu chúng tôi không thay
đổi bất kỳ trạng thái nào trong lệnh gọi lại này, hộp kiểm sẽ không cập nhật trực quan.
Thoạt đầu, có vẻ trực quan rằng bạn cần viết mã để chuyển đổi hộp kiểm khi chạm vào,
nhưng đây là một khái niệm chính trong giao diện người dùng khai báo. Các phần tử được
kiểm soát hoàn toàn bởi các tham số bạn chuyển cho chúng. Đây là thứ tạo ra một nguồn
chân lý duy nhất, nghĩa là không có trạng thái nào khác để đồng bộ hóa. Bạn hoàn toàn
quyết định cách phản ứng khi người dùng nhấn vào hộp kiểm. Bạn có thể muốn chạy một
số xác thực và chỉ cập nhật màn hình nếu nó hợp lệ. Mã của bạn hoàn toàn nằm trong tầm
kiểm soát, thay vì phải quay lại và hoàn tác thay đổi nếu quá trình xác thực không thành công.
Trước đó, chúng tôi đã đề cập rằng Compose sẽ thực thi lại chức năng có thể kết hợp này
khi dữ liệu đầu vào thay đổi. Tuy nhiên, có những biến mà chúng tôi có thể muốn giữ lại qua
các lần thực hiện lại hoặc những gì chúng tôi gọi là cải tiến. Các hàm tổng hợp có thể nhớ
một giá trị từ một lần thực thi trước đó bằng cách sử dụng hàm nhớ. Điều này cho phép bạn
sử dụng lại giá trị để tránh phân bổ lại hoặc giữ trạng thái.
Trong ví dụ này, chúng tôi đã triển khai nội tuyến xử lý sự kiện nhưng đối với một ví dụ thực
tế hơn, thay vào đó chúng tôi có thể chuyển trạng thái và cập nhật lambda dưới dạng tham
số cho tệp có thể tổng hợp, di chuyển logic đến bất kỳ nơi nào nguồn của sự thật.
Ý tưởng chính với giao diện người dùng khai báo là bạn mô tả hoàn toàn giao diện người
dùng của mình trông như thế nào đối với một trạng thái nhất định và khuôn khổ sẽ đảm
nhận việc cập nhật giao diện người dùng khi trạng thái thay đổi. Compose có thể hoạt động
với nhiều kiến trúc ứng dụng, nhưng đặc biệt phù hợp với kiến trúc tuân theo luồng dữ liệu
một chiều, nơi ViewModel của bạn hiển thị một luồng trạng thái màn hình. Điều này có thể
được quan sát bởi Giao diện người dùng Compose của bạn và được chuyển cho các
thành phần riêng lẻ dưới dạng tham số.
Mỗi trong số đó chỉ nhận được trạng thái mà nó cần và do đó chỉ cần được cập nhật nếu dữ
liệu thay đổi. Việc tạo ra một luồng đối tượng ViewState giúp tập trung vào nơi có thể thực
hiện các thay đổi trạng thái, giúp dễ dàng lập luận về toàn bộ trạng thái của màn hình và
giảm lỗi. Mẫu này cũng giúp bạn có thể dễ dàng kiểm tra mẫu có thể tổng hợp vì tất cả
chúng đều được kiểm soát hoàn toàn bởi đầu vào của chúng.
3. Cách mô hình khai báo giúp viết giao diện người dùng dễ dàng hơn
Vì vậy, chúng tôi đã xem xét cách mô hình khai báo giúp viết UI dễ dàng hơn. Được xây
dựng dựa trên những nguyên tắc này, Compose cung cấp một bộ công cụ phong phú gồm
các thành phần giao diện người dùng. Jetpack Compose triển khai các thành phần
Material Design và hệ thống chủ đề.
Nó cung cấp các thành phần và khối xây dựng mà bạn cần để lắp ráp các ứng dụng của
mình, chẳng hạn như Buttons, Cards, FABs, hoặc AppBars. Tất cả các thành phần tuân
theo phong cách vật liệu ra khỏi hộp.
Và nó cũng thực hiện Material Theming, cho phép bạn tùy chỉnh tất cả các thành phần một
cách có hệ thống cho thương hiệu của mình bằng cách cung cấp màu sắc, hình dạng và
kiểu chữ của riêng bạn.
Compose cũng cung cấp một hệ thống bố cục mới đơn giản nhưng mạnh mẽ. Nó dựa trên
các Row và Column, gần tương đương với bố cục tuyến tính ngang và dọc. Tuy nhiên,
không giống như hệ thống views, mô hình bố cục Compose ngăn việc vượt qua nhiều
biện pháp, làm cho bố cục lồng nhau hoạt động hiệu quả.
ConstraintLayout, với DSL mới dành riêng cho Compose-specific, cho phép bạn thể hiện các
bố cục phức tạp hơn nhưng cũng đơn giản hơn nhiều để tạo các bố cục tùy chỉnh.
Thực hiện phép đo và vị trí của riêng bạn để đạt được bố cục phù hợp cũng dễ dàng như
thực hiện một chức năng. Một trong những cải tiến thú vị nhất là hệ thống hoạt hình mới.
Nó đơn giản hơn nhiều để sử dụng, cung cấp những cách thực sự mạnh mẽ và đơn giản
để mang lại chuyển động cho giao diện người dùng của bạn. Và chúng tôi cũng đang làm
việc để đưa MotionLayout sang Compose.
Kiểm tra và khả năng tiếp cận là những công dân hạng nhất trong Compose.
Cả hai đều được xây dựng trên một hệ thống ngữ nghĩa, tạo ra một cây song song với giao
diện người dùng, mô tả nó, để cung cấp thêm thông tin cho các dịch vụ trợ năng hoặc giúp
bạn đối sánh các phần tử giao diện người dùng để khẳng định chống lại chúng.
Compose cung cấp một cấu phần thử nghiệm chuyên dụng đã được xây dựng để tối đa hóa
khả năng thử nghiệm và cung cấp các API dễ dàng để thử nghiệm các phần mềm tổng hợp
một cách riêng biệt.
Quy tắc kiểm tra cũng hiển thị đồng hồ, thúc đẩy cập nhật giao diện người dùng và cung
cấp các API để kiểm soát nó. Điều này cho phép bạn có toàn quyền kiểm soát trong các
thử nghiệm của mình, thậm chí kiểm tra mã hoạt ảnh.
Compose hoàn toàn được viết bằng Kotlin và tận dụng các tính năng tuyệt vời của ngôn ngữ
để xây dựng các API trực quan, ngắn gọn, mạnh mẽ. Ví dụ: Coroutines cho phép chúng tôi
viết các API không đồng bộ đơn giản hơn nhiều, chẳng hạn như mô tả cử chỉ, hoạt ảnh
hoặc cuộn.
Điều này giúp dễ dàng hơn khi viết mã kết hợp các sự kiện không đồng bộ, chẳng hạn như
một cử chỉ chuyển sang hoạt ảnh, tất cả đều có tính năng hủy và làm sạch được cung cấp
bởi đồng thời có cấu trúc.
Kotlin cũng mang đến một hệ sinh thái công cụ mạnh mẽ. Ví dụ, việc trích xuất các thành
phần giao diện người dùng thành các chức năng mới, thúc đẩy việc sử dụng lại trở nên
đơn giản.
4. Cách các tính năng này kết hợp với nhau để giúp xây dựng giao diện người dùng
dễ dàng hơn
Để thực sự hiểu cách các tính năng này kết hợp với nhau để giúp xây dựng giao diện
người dùng dễ dàng hơn, hãy xem qua một ví dụ. Đây là Owl, một trong những mẫu chính
thức của chúng tôi có sẵn trên GitHub.
Hãy nhìn vào màn hình chủ đề để xem một số tính năng này đang hoạt động. Hãy bắt đầu
bằng cách xây dựng một chip chủ đề riêng lẻ.
Chúng tôi sẽ viết một hàm có thể tổng hợp mới chấp nhận một đối tượng Mô hình chủ đề
làm tham số. Chúng ta có thể xây dựng thành phần của mình với một hàng chứa hình ảnh
và văn bản. Điều này sẽ hiển thị dữ liệu trong đối tượng chủ đề của chúng tôi.
Đối với nền, chúng ta có thể bao quanh hàng bằng một Thẻ có thể ghép lại. Chúng tôi
cũng muốn có một số khoảng cách xung quanh văn bản. Để thêm điều này, chúng ta có
thể trang trí bất kỳ vật liệu có thể ghép nào bằng cách sử dụng tham số sửa đổi của nó.
Có nhiều công cụ sửa đổi khác nhau có sẵn để tùy chỉnh bố cục, bản vẽ, tương tác và hơn
thế nữa.
Ở đây, chúng tôi đang sử dụng công cụ sửa đổi đệm để thêm một số khoảng trống.
Chúng tôi muốn các chủ đề đã chọn có biểu tượng dấu kiểm được hiển thị trên đầu hình
ảnh. Chúng ta có thể đạt được điều này bằng cách truyền vào tham số Boolean.
Chúng tôi bọc hình ảnh trong một hộp, cho phép chúng tôi xếp chồng các mục lên nhau và
thêm biểu tượng có điều kiện dựa trên tham số đã chọn.
Thiết kế của chúng tôi cũng yêu cầu các mục được chọn phải có góc tròn. Chúng ta có thể
đạt được điều này bằng cách đặt bán kính góc có điều kiện dựa trên thông số đã chọn
và chuyển nó sang hình dạng của Thẻ. Để tạo hiệu ứng cho thay đổi này, chúng ta có thể
chỉ cần bọc điều kiện này bằng một hàm animateAsState. Thao tác này sẽ tự động tạo hiệu
ứng thay đổi kích thước góc.
Cho đến nay, chúng tôi đã tạo một mục chủ đề duy nhất, nhưng trên màn hình, chúng tôi
muốn hiển thị danh sách các chủ đề mà người dùng có thể chọn. Hãy tạo một bản tổng hợp
mới cho việc này, trong đó có một danh sách các đối tượng chủ đề.
Compose cung cấp một khả năng tổng hợp cột lười biếng đặt các phần tử ra theo chiều
dọc, giống như một cột thông thường, nhưng nó chỉ đưa ra đủ các phần tử để lấp đầy
khung nhìn, như RecyclerView. Điều này làm cho nó rất hiệu quả để hiển thị một cửa sổ
của một tập dữ liệu lớn. Chúng ta có thể chuyển danh sách các đối tượng vào một khối mục
và cách hiển thị từng mục riêng lẻ. Và đó là nó, không có bộ điều hợp hoặc tệp bố cục mục
để quản lý.
Tuy nhiên, thiết kế của chúng tôi yêu cầu một chuỗi chủ đề so le theo chiều ngang. Điều
này cũng dễ dàng đạt được trong Compose bằng cách xây dựng bố cục tùy chỉnh. Xây
dựng một cái gì đó giống như lưới được hiển thị chỉ là một vài dòng mã.
Một điều cuối cùng tôi muốn cho bạn thấy là theming. Owl có nền màu vàng từ chủ đề của nó.
Compose giúp dễ dàng thiết lập các chủ đề của bạn để ứng dụng của bạn phản ứng với chế
độ tối. Hãy giải nén cách thực hiện.
Chúng tôi có thể kiểm tra xem hệ thống có ở Dark Theme hay không và chuyển đổi các
phối màu. Bởi vì tất cả các chủ đề được thực hiện trong thời gian chạy,
Soạn dễ dàng hỗ trợ chủ đề động ngoài chủ đề của chúng tôi. Bạn có thể tìm thấy cách
triển khai đầy đủ các ví dụ mà chúng tôi đã đề cập trong Compose samples repo.
Hy vọng rằng ví dụ đó minh họa cách Jetpack Compose giúp xây dựng giao diện người
dùng nhanh hơn và dễ dàng hơn.
Jetpack Compose được xây dựng để cùng tồn tại với hệ thống View hiện có.
Tính năng Compose có thể được áp dụng dần dần khi bạn cần, từ việc thay thế một phần
tử nhỏ của màn hình đến tạo một phần giao diện người dùng lớn hơn hoặc toàn bộ màn
hình, Compose sẽ giúp bạn thực hiện các bước bạn cần. Bạn có thể nhúng Compose
trong Views, cũng như lưu trữ Views trong Compose. Điều này có thể đặc biệt hữu ích để
hiển thị nội dung chưa được xây dựng bằng Compose, chẳng hạn như Quảng cáo
cho MapView. Điều này có thể giúp bạn dần dần chuyển sang Compose, sử dụng nó theo
tốc độ của bạn.
Ngoài View tương tác, chúng tôi cung cấp tích hợp với các thư viện chính khác để Compose
có thể hoạt động với kiến trúc ứng dụng hiện có của bạn mà không cần phải bắt đầu lại từ
đầu. Chúng tôi cũng cung cấp trình bao bọc cho các thư viện tải hình ảnh phổ biến và bộ
điều hợp để chuyển đổi các chủ đề XML của Material hoặc AppCompat thành Compose.
Có toàn bộ bài nói chuyện riêng về Compose và các thư viện hiện có, vì vậy hãy kiểm tra để
biết thêm chi tiết.
5. Những trải nghiệm khi sử dụng Jetpack Compose
Chúng tôi biết rằng trải nghiệm của nhà phát triển sẽ không hoàn chỉnh nếu không có các
công cụ mạnh mẽ và tài liệu toàn diện. Đó là lý do tại sao, bên cạnh việc cập nhật một số
công cụ mà bạn quen thuộc, như Layout Inspector, để hỗ trợ Compose, chúng tôi cũng đã
xây dựng các công cụ mới mạnh mẽ.
Ví dụ: bản Compose Preview giới thiệu một cách mới để làm việc giữa các công cụ và mã,
cho phép bạn xác định các bản xem trước cùng với các thành phần của mình, lặp lại chúng
một cách riêng biệt và xem qua các hoạt ảnh. Nhưng đây chỉ là một cái nhìn sơ lược về
các công cụ Compose mới.
Để tìm hiểu thêm và xem chúng hoạt động, hãy xem các bài nói chuyện Có gì mới trong
Công cụ phát triển và Có gì mới trong Công cụ thiết kế. Chúng tôi đã xây dựng tính
năng Compose với các nhà phát triển, cộng tác với cộng đồng.
Kể từ khi tìm nguồn mở vào năm 2019, phản hồi, yêu cầu tính năng và đóng góp của bạn
đã giúp định hình nó rất nhiều. Chúng tôi cũng đã hợp tác chặt chẽ với một số đối tác đã
bắt đầu khám phá tính năng Compose trong ứng dụng của họ.
Những người chấp nhận ban đầu đã nói với chúng tôi rằng họ đang viết ít mã hơn, giảm
kích thước cơ sở mã của họ, Compose trực quan và thú vị hơn để làm việc, giải phóng họ
để làm việc về các tính năng và chất lượng, đồng thời nó mạnh mẽ, cung cấp những cách
làm mới , đôi khi làm chúng tôi ngạc nhiên với việc sử dụng sáng tạo các API.
Chúng tôi sẽ sớm chia sẻ câu chuyện của các đối tác, vì vậy hãy chú ý những câu chuyện đó.
Compose là một bộ công cụ hiện đại, được xây dựng để hoạt động trên các kích thước
màn hình khác nhau, từ định dạng nhỏ như thiết bị đeo được đến định dạng lớn như máy
tính bảng và Chromebook. Và chúng tôi đang làm việc để cải thiện trải nghiệm phát triển
của bạn trên tất cả các nền tảng này. Để giúp bạn sẵn sàng áp dụng Jetpack Compose khi nó
ra mắt phiên bản 1.0 không lâu, chúng tôi đã xuất bản một bộ tài liệu học tập phong phú.
Vì vậy, hãy tham gia với chúng tôi trên kênh Slack và tiếp tục cung cấp phản hồi cho chúng
tôi khi bạn học Compose và sẵn sàng áp dụng nó trong ứng dụng của bạn.
Chúc bạn sáng tác vui vẻ.
Nhận xét
Đăng nhận xét