Đồ án tìm hiểu jetpack compose và xây dựng ứng dụng

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
----------

BÁO CÁO ĐỒ ÁN 1
Đề tài:
TÌM HIỂU JETPACK COMPOSE
VÀ XÂY DỰNG ỨNG DỤNG
Giảng viên hướng dẫn: ThS. Nguyễn Công Hoan
Lớp: SE121.N21

Sinh viên thực hiện:
BÙI LÊ HOÀI AN - 20520985

TP.HCM, tháng 6 năm 2023


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

Trang 2


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

LỜI CẢM ƠN
Sau q trình học tập và rèn luyện tại khoa Cơng nghệ phần mềm trường Đại

học Công nghệ Thông tin – ĐHQG TP.HCM, em đã được trang bị các kiến thức cơ
bản cùng các kỹ năng thực tế để có thể hồn thành Đồ án 1 của mình.
Để hồn thành đồ án này, với lòng biết ơn sâu sắc em xin gửi lời cảm ơn chân
thành đến:
Ban Giám hiệu trường Đại học Cơng nghệ Thơng tin – ĐHQG TP.HCM vì đã
tạo điều kiện thuận lợi để sinh viên tìm kiếm, nghiên cứu thông tin với hệ thống thư
viện hiện đại, đa dạng các loại sách và tài liệu.
Gần gũi hơn là những lời tốt đẹp nhất xin gửi đến đến thầy Ngũn Cơng
Hoan đã tận tình giúp đỡ, định hướng cách tư duy và hướng làm việc khoa học. Đó
là những góp ý hết sức q báu khơng chỉ trong q trình thực hiện đồ án mà cịn là
hành trang tiếp bước cho em trong quá trình học tập và làm việc sau này.
Sau cùng, xin chúc quý Thầy Cô trong khoa Cơng nghệ Phần mềm nói riêng
cũng như các giáo viên tại trường Cơng nghệ thơng tin nói chung thật dồi dào sức
khỏe, niềm tin để tiếp tục thực hiện sứ mệnh cao đẹp của mình.

Thành phố Hồ Chí Minh, tháng 5 năm 2023
Sinh Viên

Bùi Lê Hoài An

Trang 3


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

NHẬN XÉT CỦA GIẢNG VIÊN
.........................................................................................................................................
.........................................................................................................................................

.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
Trang 4


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

MỤC LỤC
LỜI CẢM ƠN .................................................................................................................................. 3
NHẬN XÉT CỦA GIẢNG VIÊN ................................................................................................... 4
MỤC LỤC ....................................................................................................................................... 5
CHƯƠNG 1: GIỚI THIỆU TỞNG QUAN ................................................................................. 8
1. Thơng tin sinh viên: ............................................................................................................ 8
2. Tổng quan đề tài: ................................................................................................................ 8
2.1

Giới thiệu đề tài: .......................................................................................................... 8

2.2

Phạm vi nghiên cứu: ................................................................................................... 8

2.3

Nội dung nghiên cứu: .................................................................................................. 8

2.4

Kết quả hướng tới: ...................................................................................................... 9

3. Công cụ sử dụng: ................................................................................................................ 9
CHƯƠNG 2: JETPACK COMPOSE ........................................................................................ 10
1. Giới thiệu ngơn ngữ lập trình Kotlin .............................................................................. 10
2. Jetpack Compose .............................................................................................................. 10
3. Tại sao lại là Jetpack Compose? ..................................................................................... 11

4. Mơ hình tư duy trong Jetpack Compose ........................................................................ 11
4.1.

Mơ hình lập trình khai báo....................................................................................... 12

4.2.

Hàm composable đơn giản ....................................................................................... 12

4.3.

Thay đởi mơ hình khai báo ....................................................................................... 14

4.4.

Nợi dung đợng ............................................................................................................ 16

4.5.

Recomposition............................................................................................................ 17

4.5.1.

Các hàm composable có thể thực thi theo thứ tự bất kỳ............................................ 18

4.5.2.

Các hàm composable có thể chạy song song ............................................................... 18

4.5.3.

Bỏ qua recomposition nhiều nhất có thể ..................................................................... 20

4.5.4.

Recomposition là khả quan .......................................................................................... 21

4.5.5.

Các hàm có khả năng recomposition có thể chạy khá thường xuyên ....................... 22

5. Bố cục Compose cơ bản.................................................................................................... 22
5.1.

Mục tiêu ...................................................................................................................... 22

5.2.

Các hàm Composable................................................................................................ 22

5.3.

Các bố cục cơ bản ...................................................................................................... 23
Trang 5


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

5.4.

Mơ hình bố cục .......................................................................................................... 26

5.5.

Hiệu suất..................................................................................................................... 28

5.6.

Sử dụng modifiers ..................................................................................................... 28

6. Quản lý trạng thái............................................................................................................. 29
6.1.

Trạng thái và composition ........................................................................................ 30

6.2.

Trạng thái trong composition................................................................................... 31

6.3.

Chuyển trạng thái lên trên ....................................................................................... 32

6.4.

Khôi phục trạng thái ................................................................................................. 35

6.4.1.

Parcelize ......................................................................................................................... 35

6.4.2.

MapSaver ....................................................................................................................... 36

6.5.

Phần tử giữ trạng thái ............................................................................................... 36

6.6.

Kích hoạt lại tính năng ghi nhớ các tính tốn khi khố thay đởi .......................... 36

7. Vịng đời của Composable ............................................................................................... 38
7.1.

Tởng quan .................................................................................................................. 38

7.2.

Phân tích mợt Composable trong Composition ...................................................... 40

7.2.1.

Thêm thông tin hỗ trợ quá trình recomposition ......................................................... 41
Bỏ qua nếu giá trị đầu vào không thay đổi ..................................................................... 45

7.3.

8. Các giai đoạn trong Jetpack Compose ........................................................................... 46
8.1.

3 giai đoạn của một frame ........................................................................................ 46

8.2.

Đọc trạng thái ............................................................................................................ 48

8.3.

Đọc trạng thái theo giai đoạn ................................................................................... 49

8.3.1.

Giai đoạn 1: Composition ............................................................................................. 49

8.3.2.

Giai đoạn 2: Layout....................................................................................................... 49

8.3.3.

Giai đoạn 3: Drawing .................................................................................................... 50

8.4.

Tối ưu hóa việc đọc trạng thái.................................................................................. 51

8.5.

Vịng lặp tái kết hợp (phần phụ tḥc giai đoạn tuần hoàn)................................. 53

9. Ktor .................................................................................................................................... 56
9.1.

Tổng quan .................................................................................................................. 56

9.2.

Đặc điểm nởi bật ........................................................................................................ 56

9.3.

Vài thành phần chính của Ktor ............................................................................... 57

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG ................................................................................... 59
1. Tổng quan.......................................................................................................................... 59
1.1.

Tên ứng dụng: Yum - Ứng dụng hỗ trợ đầu bếp ....................................................... 59
Trang 6


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

1.2.

Lý do chọn ứng dụng ................................................................................................ 59

1.3.

Đối tượng hướng đến ................................................................................................ 59

1.4.

Môi trường phát triển ứng dụng .............................................................................. 59

1.5.

Kết quả mong đợi ...................................................................................................... 60

1.6.

Quy trình thực hiện các cơng việc chính ................................................................. 60

2. Phân tích, thiết kế hệ thống ............................................................................................. 60
2.1.

Xác định và mơ hình hóa các u cầu phần mềm .................................................. 60

2.1.1.

Xác định yêu cầu ........................................................................................................... 60

2.1.1.1. Một số yêu cầu phần mềm phải có ........................................................................... 61
2.1.1.2. Ràng ḅc logic ban đầu ........................................................................................... 61

2.1.1.3. Tính khả dụng............................................................................................................ 61
2.1.1.4. Tính ởn định ............................................................................................................... 61
2.1.1.5. Hiệu suất..................................................................................................................... 61
2.1.1.6. Bảo mật....................................................................................................................... 62
2.1.2.

Mơ hình hóa u cầu ..................................................................................................... 62

2.1.2.1. Danh sách chức năng ................................................................................................ 62
2.1.2.2. Lược đồ Use-case ....................................................................................................... 62

2.2.

Thiết kế hệ thống ....................................................................................................... 79

2.2.1.

Kiến trúc hệ thống ......................................................................................................... 79

2.3.

Thiết kế dữ liệu .......................................................................................................... 81

2.4.

Thiết kế giao diện ...................................................................................................... 86

2.4.1.

Sơ đờ liên kết màn hình ................................................................................................ 86

2.4.2.

Danh sách các màn hình ............................................................................................... 86

3. Cài đặt và thử nghiệm .................................................................................................... 107
CHƯƠNG 4: KẾT LUẬN ......................................................................................................... 109
1. Kết quả đạt được ............................................................................................................ 109
2. Hướng phát triển ............................................................................................................ 109
TÀI LIỆU THAM KHẢO ......................................................................................................... 110

Trang 7


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

CHƯƠNG 1: GIỚI THIỆU TỞNG QUAN
1. Thơng tin sinh viên:
MSSV
20520985

Họ tên
Bùi Lê Hồi An

Email


2. Tổng quan đề tài:

2.1 Giới thiệu đề tài:
Chúng ta khơng thể phủ nhận sự hữu ích của các framework cossplatform (Flutter, React-Native, …) đã giúp chúng ta phần nào giải quyết được
vấn đề về mặt thời gian. Tuy vậy khi nhìn vào thực tế, các cơng ty lớn trên thế
giới tiếp tục sử dụng các ứng dụng native, đó là vấn đề lớn cũng cần phải được
kể đến: hiệu suất. Hiệu suất ảnh hưởng trực tiếp đến trải nghiệm người dùng.
Vì thế phát triển ứng dụng.
Phát triển ứng dụng native từ lâu đã tồn tại những yếu điểm dễ dàng nhận
thấy. Đơn cử như đối với Android, đó là việc nhà phát triển phải sử dụng một
loại ngôn ngữ khác hồn tồn với ngơn ngữ chính để lập trình – XML. Đối với
các nhà phát triển cũng như các công ty phải học song song 2 ngôn ngữ
(Java/Kotlin và XML) là rất mất thời gian, dẫn đến đó là tiêu tốn nhiều chi
phí.
Kể từ sau Google I/O 2019, Kotlin dần phát triển để thay thế Java, trở
thành một ngôn ngữ lập trình được ưa chuộng nhất cho phát triển ứng dụng
Android native. Và điều chúng ta mong muốn nhất rồi cũng đến: Jetpack
Compose, sử dụng Kotlin làm ngôn ngữ lập trình đã ra đời với nhiệm vụ tiên
quyết: source code chỉ chứa duy nhất 1 ngơn ngữ lập trình.
2.2

Phạm vi nghiên cứu:

Đồ án tập trung vào nghiên cứu tổng quan cách thức hoạt động và cách
sử dụng các thư viện - package cũng như cách lưu trữ dữ liệu của Jetpack
Compose. Đồng thời, em áp dụng các nghiên cứu trên vào một ứng dụng thực
tế để giúp em có thể hiểu sâu hơn các kiến thức đã tìm hiểu.
2.3

Nợi dung nghiên cứu:

Trang 8

ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

Em sẽ tiến hành nghiên cứu chi tiết về cách thức hoạt động, ưu - khuyết
điểm cũng như các thư viện - tính năng - package liên quan đến Compose.
2.4

Kết quả hướng tới:

Với đề tài này, em đề ra hai mục tiêu chính:
• Đối với các nhân: mở rộng kiến thức của mình về Compose thơng
qua q trình tìm hiểu và áp dụng vào ứng dụng thực tế. Các kiến
thức tìm hiểu được thông qua đồ án thúc đẩy em phát triển thêm các
ứng dụng khác bằng Compose Jetpack. Đồng thời, em học được
cách nghiên cứu và sử dụng một framework mới cần trải qua quá
trình gì nhằm giúp em dễ dàng tiếp xúc với các cơng nghệ mới hơn
trong tương lai.
• Đối với các lập trình viên dùng đồ án nghiên cứu này làm tài liệu
tham khảo: thông qua tài liệu nghiên cứu và ứng dụng em đã xây
dựng, các lập trình viên khác có thể dễ dàng định hướng cần phải tìm
hiểu gì khi sử dụng Jetpack Compose. Đồng thời em có nêu ra một
số khái niệm, kiến thức cơ bản và thư viện phổ biến được đề xuất bởi
cộng đồng khi sử dụng Compose Jetpack, các lập trình viên khác có
thể tham khảo và tìm hiểu sâu hơn.
3. Cơng cụ sử dụng:
Trong quá trình xây dựng phần mềm, em đã sử dụng các phần mềm sau:
• Android Studio: phát triển front end

• Intellij IDEA: phát triển back end
• GitHub: quản lý source code

Trang 9


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

CHƯƠNG 2: JETPACK COMPOSE
1. Giới thiệu ngơn ngữ lập trình Kotlin
Kotlin là một ngơn ngữ lập trình đa năng, được thiết kế để chạy trên nền tảng
Java Virtual Machine (JVM), nhưng cũng có thể chạy trên nền tảng Android,
JavaScript và Native. Kotlin được phát triển bởi JetBrains, cùng với một số cộng
đồng lập trình viên đóng góp.
Một số đặc điểm của Kotlin bao gồm:
• Kotlin là một ngơn ngữ lập trình hướng đối tượng (OOP) và hỗ trợ các khái
niệm lập trình hàm (FP), giúp cho việc phát triển ứng dụng linh hoạt hơn.
• Kotlin có cú pháp đơn giản, dễ đọc và dễ viết hơn so với Java và nhiều
ngôn ngữ lập trình khác.
• Kotlin hỗ trợ null safety, giúp tránh được các lỗi runtime liên quan đến null
pointer.
• Kotlin hỗ trợ extension function, giúp mở rộng tính năng của một lớp đối
tượng mà khơng cần thay đổi mã nguồn gốc.
• Kotlin có thể tương thích với mã nguồn Java, cho phép lập trình viên dễ
dàng chuyển đổi từ Java sang Kotlin hoặc sử dụng cả hai ngôn ngữ trong
một dự án.
Kotlin đã được Google chính thức cơng nhận là ngơn ngữ lập trình cho phát
triển ứng dụng Android, và được sử dụng rộng rãi trong cộng đồng lập trình viên

Android. Ngồi ra, Kotlin cũng được sử dụng trong nhiều dự án khác, bao gồm
phát triển trên máy chủ, ứng dụng web và phát triển ứng dụng trên các thiết bị
nhúng.
2. Jetpack Compose
Jetpack Compose là một thư viện UI cho phép bạn xây dựng giao diện người
dùng Android bằng cách sử dụng Kotlin. Nó cho phép tạo các giao diện người dùng
tùy chỉnh và linh hoạt hơn. Bạn có thể tạo các giao di Jetpack Compose là một
framework để phát triển giao diện người dùng (UI) trên nền tảng Android, được
phát triển bởi Google. Nó cho phép lập trình viên tạo giao diện người dùng bằng
cách sử dụng các hàm và phương thức trong ngơn ngữ lập trình Kotlin, thay vì sử
dụng XML như trước đây.
Với Jetpack Compose, người lập trình có thể tạo các giao diện người dùng động
và tương tác với người dùng một cách dễ dàng. Framework này cũng cung cấp cho
người dùng các tính năng như tạo theme, animation, và layout cực kỳ linh hoạt.
Jetpack Compose được xây dựng trên cơ sở của các công nghệ hiện đại như
Kotlin, coroutines, và Android Jetpack.
Trang 10


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

3. Tại sao lại là Jetpack Compose?
• Khai báo giao diện người dùng: Jetpack Compose sử dụng phong cách
lập trình khai báo, cho phép bạn xác định giao diện bằng cách chỉ định
những gì bạn muốn nó hiển thị, thay vì xác định cách để đạt được nó.
Điều này làm cho mã dễ đọc, dễ hiểu hơn và dễ bảo trì hơn so với
phương pháp truyền thống sử dụng XML.
• Dễ dàng tích hợp: Jetpack Compose tích hợp tốt với các thành phần và

cơng nghệ hiện có của Android, cho phép bạn sử dụng các tính năng
mạnh mẽ khác như ViewModel, LiveData và Room để quản lý trạng
thái ứng dụng và tương tác với cơ sở dữ liệu.
• Hiệu suất cao hơn: Jetpack Compose được tối ưu để cung cấp hiệu suất
cao hơn so với phương pháp truyền thống. Compose sử dụng một cơ
chế gọi là "Recompose" để chỉ cập nhật lại các phần tử giao diện người
dùng đã thay đổi thay vì cập nhật toàn bộ giao diện. Điều này giúp giảm
tải cho CPU và cải thiện hiệu suất của ứng dụng.
• Tương thích và tái sử dụng tốt hơn: Jetpack Compose được thiết kế để
tương thích với các phiên bản Android cũ hơn và mới hơn. Bạn có thể
sử dụng Compose trong các dự án hiện có hoặc tích hợp nó với mã
Java/Kotlin truyền thống. Ngồi ra, Jetpack Compose cũng khuyến
khích tái sử dụng mã và các thành phần giao diện người dùng, giúp tiết
kiệm thời gian và công sức trong q trình phát triển.
• Cộng đồng mạnh mẽ: Jetpack Compose đã nhận được sự hỗ trợ rất lớn
từ cộng đồng phát triển Android. Có nhiều tài liệu, ví dụ mã và nguồn
tài nguyên hữu ích được chia sẻ trên trang web của Google và từ các
nhà phát triển khác trên Internet. Bạn cũng có thể nhận được sự hỗ trợ
từ cộng đồng qua các diễn đàn, nhóm Facebook, và các nhóm
Telegram.
Tổng thể, Jetpack Compose là một framework mạnh mẽ và tiện ích cho việc
phát triển giao diện người dùng Android. Nó giúp bạn tăng năng suất, cải thiện hiệu
suất ứng dụng và tạo ra giao diện linh hoạt, tương tác.
4. Mơ hình tư duy trong Jetpack Compose
Jetpack Compose là bộ công cụ khai báo giao diện người dùng hiện đại cho
Android. Compose sẽ giúp bạn dễ dàng ghi và duy trì giao diện người dùng ứng
dụng bằng cách cung cấp API khai báo cho phép bạn hiển thị giao diện người dùng
Trang 11

ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

của ứng dụng mà không cần ra lệnh thay đổi các chế độ xem giao diện người dùng.
Thuật ngữ này cần được giải thích đơi chút nhưng có ý nghĩa rất quan trọng đối với
cách thiết kế ứng dụng của bạn.
4.1. Mơ hình lập trình khai báo
Trước đây, hệ phân cấp chế độ xem Android được biểu thị dưới dạng cây tiện
ích giao diện người dùng. Khi trạng thái của ứng dụng thay đổi vì những yếu tố như
hoạt động tương tác của người dùng, bạn cần cập nhật hệ thống phân cấp giao diện
người dùng để hiển thị dữ liệu hiện tại. Cách phổ biến nhất để cập nhật giao diện
người dùng là hướng dẫn cho cây bằng các hàm như findViewById() và thay đổi
các nút bằng những phương thức gọi như button.setText(String),
container.addChild(View) hoặc img.setImageBitmap(Bitmap). Các phương thức
này thay đổi trạng thái nội bộ của tiện ích.
Việc điều chỉnh chế độ xem theo cách thủ công sẽ làm tăng khả năng xảy ra
lỗi. Nếu một phần dữ liệu hiển thị ở nhiều vị trí thì bạn sẽ có thể qn cập nhật một
trong các chế độ xem hiển thị dữ liệu đó. Việc tạo các trạng thái không hợp lệ cũng
rất dễ xảy ra khi hai lượt cập nhật xung đột theo cách khơng mong đợi. Ví dụ: một
lượt cập nhật có thể cố gắng đặt một giá trị nút vừa mới bị xố khỏi giao diện người
dùng. Nói chung, độ phức tạp của việc bảo trì phần mềm tăng lên cùng với số chế
độ xem cần cập nhật.
Trong vài năm qua, tồn bộ ngành đã bắt đầu chuyển sang mơ hình giao diện
người dùng khai báo, giúp đơn giản hoá rất nhiều kỹ thuật liên quan đến việc xây
dựng và cập nhật giao diện người dùng. Kỹ thuật này hoạt động bằng cách tạo lại
từ đầu tồn bộ màn hình, sau đó chỉ áp dụng những thay đổi cần thiết. Phương pháp
này giúp bạn dễ dàng cập nhật hệ phân cấp chế độ xem có trạng thái theo cách thủ
cơng. Compose là một khung giao diện người dùng khai báo.
Một khó khăn trong việc tạo lại tồn bộ màn hình là giải pháp này có thể tốn

kém về mặt thời gian, khả năng tính tốn và mức sử dụng pin. Để giảm thiểu chi
phí này, Compose sẽ lựa chọn một cách thông minh những phần cần vẽ lại trên
giao diện người dùng bất cứ lúc nào. Điều này có một số ảnh hưởng đến cách bạn
thiết kế các thành phần trên giao diện người dùng, như đã thảo luận trong bài viết
về tính năng kết hợp lại.
4.2.

Hàm composable đơn giản

Trang 12


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

Bằng cách sử dụng Compose, bạn có thể xây dựng giao diện người dùng bằng
cách xác định một tập hợp các hàm có khả năng kết hợp lấy dữ liệu và cung cấp các
thành phần trên giao diện người dùng. Một ví dụ đơn giản là hàm Greeting lấy
String và cung cấp Text hiển thị tin nhắn chào mừng.

Hình 1. Một hàm có khả năng kết hợp đơn giản được chuyển dữ liệu và sử dụng dữ
liệu này để hiển thị một tiện ích văn bản trên màn hình.
Vài điều đáng chú ý về hàm này:
• Hàm này được chú thích bằng chú thích @Composable. Tất cả hàm có khả
năng kết hợp đều phải có chú thích này; chú thích này sẽ thơng báo cho trình
biên dịch Compose rằng hàm này có mục đích chuyển đổi dữ liệu thành giao
diện người dùng.
• Hàm này lấy dữ liệu. Các hàm có khả năng kết hợp có thể chấp nhận các
thơng số cho phép logic của ứng dụng mô tả giao diện người dùng. Trong

trường hợp này, tiện ích của chúng tơi chấp nhận String để có thể chào người
dùng theo tên.
• Hàm này hiển thị văn bản trong giao diện người dùng. Hàm này thực hiện
tính năng này bằng cách gọi hàm có khả năng kết hợp Text() - hàm thực sự
tạo ra thành phần văn bản trên giao diện người dùng. Hàm có khả năng kết
hợp cung cấp sự phân cấp giao diện người dùng bằng cách gọi các hàm có
khả năng kết hợp khác.

Trang 13


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

• Hàm này không trả về bất kỳ giá trị nào. Các hàm Compose cung cấp giao
diện người dùng không cần trả về bất cứ điều gì vì các hàm này mơ tả trạng
thái màn hình mong muốn thay vì tạo các tiện ích giao diện người dùng.
• Hàm này nhanh chóng, khơng thay đổi giá trị và khơng có tác dụng phụ.
• Hàm này hoạt động theo cách tương tự như khi được gọi nhiều lần với cùng
một đối số và không sử dụng các giá trị khác như biến toàn cục hoặc lệnh gọi
đến random().
• Hàm này mơ tả giao diện người dùng mà không để lại bất kỳ tác dụng phụ
nào, chẳng hạn như sửa đổi các thuộc tính hoặc biến tồn cục.
Nhìn chung, bạn phải viết tất cả các hàm có khả năng kết hợp bằng các thuộc
tính này vì những lý do được thảo luận trong phần kết hợp lại.
4.3.

Thay đởi mơ hình khai báo

Với nhiều bộ cơng cụ giao diện người dùng hướng đối tượng bắt buộc, bạn
khởi chạy giao diện người dùng bằng cách tạo một cây tiện ích. Bạn thường thực
hiện việc này bằng cách tăng cường một tệp bố cục XML. Mỗi tiện ích duy trì một
trạng thái nội bộ riêng và hiển thị các phương thức getter và setter cho phép logic
ứng dụng tương tác với tiện ích đó.
Trong phương pháp khai báo của Compose, các tiện ích tương đối khơng có
trạng thái và không hiển thị các hàm setter hoặc getter. Trên thực tế, các tiện ích
khơng xuất hiện dưới dạng đối tượng. Bạn cập nhật giao diện người dùng bằng
cách gọi cùng một hàm có khả năng kết hợp với các đối số khác nhau. Việc này
giúp bạn dễ dàng cung cấp trạng thái cho các mẫu kiến trúc, chẳng hạn như
ViewModel, như mô tả trong Hướng dẫn về cấu trúc ứng dụng. Sau đó, các yếu tố
có thể kết hợp sẽ chịu trách nhiệm chuyển đổi trạng thái ứng dụng hiện tại thành
giao diện người dùng mỗi khi cập nhật dữ liệu có thể quan sát.

Trang 14


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

Hình 2: Logic của ứng dụng cung cấp dữ liệu cho hàm có khả năng kết hợp cấp
cao nhất. Hàm đó sử dụng dữ liệu để mô tả giao diện người dùng bằng cách gọi các
yếu tố có thể kết hợp khác và chuyển dữ liệu thích hợp cho các yếu tố có thể kết
hợp đó và xuống hệ thống phân cấp.
Khi người dùng tương tác với giao diện người dùng, giao diện người dùng sẽ
đưa ra các sự kiện như onClick. Những sự kiện đó sẽ thơng báo cho logic ứng
dụng, qua đó có thể thay đổi trạng thái của ứng dụng. Khi trạng thái thay đổi, các
hàm có khả năng kết hợp được gọi lại bằng dữ liệu mới. Việc này khiến các thành
phần trên giao diện người dùng được vẽ lại–quy trình này được gọi là

recomposition.

Trang 15


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

Hình 3. Người dùng tương tác với một thành phần trên giao diện người dùng,
khiến sự kiện được kích hoạt. Logic của ứng dụng phản hồi sự kiện, sau đó các
hàm có khả năng kết hợp sẽ tự động được gọi lại bằng các thơng số mới (nếu cần).
4.4.

Nợi dung đợng

Vì các hàm có khả năng kết hợp được viết bằng Kotlin thay vì XML nên các
hàm này có thể linh động như mọi mã Kotlin khác. Ví dụ: giả sử bạn muốn tạo giao
diện người dùng chào đón một danh sách người dùng:

Hình 4
Hàm này lấy danh sách tên và tạo lời chào cho từng người dùng. Các hàm có
khả năng kết hợp có thể rất phức tạp. Bạn có thể sử dụng câu lệnh if để quyết định
xem có muốn hiển thị một thành phần trên giao diện người dùng cụ thể hay khơng.
Bạn có thể sử dụng vịng lặp. Bạn có thể gọi các chức năng trợ giúp. Bạn có thể
linh hoạt tuyệt đối với ngôn ngữ cơ bản. Sức mạnh và sự linh hoạt này là một trong
những ưu điểm chính của Jetpack Compose.
Trang 16

ĐỜ ÁN 1

4.5.

Bùi Lê Hồi An - 20520985

Recomposition

Trong mơ hình giao diện người dùng bắt buộc, để thay đổi một tiện ích, bạn
phải gọi một phương thức setter trên tiện ích đó để thay đổi trạng thái nội bộ của
phương thức đó. Trong Compose, bạn gọi lại hàm có khả năng kết hợp với dữ liệu
mới. Cách làm này sẽ giúp vẽ lại hàm được kết hợp lại–các tiện ích do hàm cung
cấp (nếu cần) cùng với dữ liệu mới. Khung Compose có thể chỉ kết hợp lại các
thành phần đã thay đổi một cách thơng minh.
Ví dụ: hãy xem xét hàm có khả năng kết hợp hiển thị một nút này:

Hình 5
Mỗi khi người dùng nhấp vào nút này, trình gọi sẽ cập nhật giá trị của clicks.
Compose gọi lambda bằng hàm Text để hiển thị giá trị mới; quy trình này được gọi
là kết hợp lại. Các hàm khác không phụ thuộc vào giá trị không được kết hợp lại.
Như chúng ta đã thảo luận, việc kết hợp lại tồn bộ cây giao diện người dùng
có thể sẽ tốn kém vì sẽ mất thêm cơng suất tính tốn và thời lượng pin. Compose
giải quyết vấn đề này thông qua phương thức kết hợp lại thông minh sau.
Kết hợp lại là q trình gọi lại các hàm có khả năng kết hợp khi giá trị nhập
thay đổi. Quá trình này được thực hiện khi dữ liệu đầu vào của hàm thay đổi. Khi
Compose kết hợp lại dựa trên dữ liệu nhập mới, công cụ này chỉ gọi các hàm hoặc
lambda có thể đã thay đổi và bỏ qua các yếu tố còn lại. Bằng cách bỏ qua tất cả các
hàm hoặc lambda khơng có thơng số được thay đổi, Compose có thể kết hợp lại
một cách hiệu quả.
Khơng phụ thuộc vào tác dụng phụ của việc thực thi các hàm có khả năng kết

hợp vì việc kết hợp lại một hàm có thể bị bỏ qua. Nếu bạn thực hiện điều này,
người dùng có thể gặp phải hành vi lạ và khơng thể đốn trước trong ứng dụng. Tác
dụng phụ là bất kỳ thay đổi nào hiển thị với phần cịn lại của ứng dụng. Ví dụ:
những hành động sau đây đều là tác dụng phụ nguy hiểm:
• Ghi vào thuộc tính của đối tượng dùng chung
• Cập nhật giá trị có thể quan sát trong ViewModel
Trang 17


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

• Cập nhật các tuỳ chọn dùng chung
Các hàm có khả năng kết hợp có thể được thực thi lại thường xuyên trong mỗi
khung hình, chẳng hạn như khi hệ thống hiển thị một ảnh động. Các hàm có khả
năng kết hợp phải nhanh chóng để tránh bị giật trong ảnh động. Nếu bạn cần thực
hiện các thao tác tốn kém, chẳng hạn như đọc từ các tuỳ chọn dùng chung, hãy thực
hiện việc này trong coroutine trong nền và chuyển giá trị kết quả đến hàm có khả
năng kết hợp dưới dạng thơng số.
Các phần sau đây sẽ trình bày cách tạo hàm có khả năng kết hợp để hỗ trợ q
trình kết hợp lại. Trong mọi trường hợp, phương pháp hay nhất là đảm bảo các hàm
có khả năng kết hợp chạy nhanh, khơng thay đổi giá trị và khơng có tác dụng phụ.
4.5.1. Các hàm composable có thể thực thi theo thứ tự bất kỳ
Nếu kiểm tra mã cho một hàm có khả năng kết hợp, bạn có thể giả định rằng
mã được chạy theo thứ tự nó xuất hiện. Tuy nhiên, điều này không nhất thiết đúng.
Nếu một hàm có khả năng kết hợp chứa lệnh gọi đến các hàm có khả năng kết hợp
khác thì các hàm đó có thể chạy theo thứ tự bất kỳ. Bạn có thể dùng Compose để
nhận diện một số thành phần trên giao diện người dùng có mức độ ưu tiên cao hơn
các thành phần khác và vẽ ra các thành phần đó trước.

Ví dụ: giả sử bạn có mã như sau để vẽ 3 màn hình trong một bố cục thẻ:

Các lệnh gọi đến StartScreen, MiddleScreen và EndScreen có thể xuất hiện
theo thứ tự bất kỳ. Điều này có nghĩa là bạn khơng thể để StartScreen() đặt một số
biến tồn cục (một tác dụng phụ) và để MiddleScreen() tận dụng thay đổi đó. Thay
vào đó, mỗi hàm đó cần phải khép kín.
4.5.2. Các hàm composable có thể chạy song song
Compose có thể tối ưu hoá chức năng kết hợp lại bằng cách chạy song song
các hàm có khả năng kết hợp. Cách này cho phép Compose tận dụng nhiều lõi và

Trang 18


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

chạy các hàm có khả năng kết hợp khơng có trên màn hình ở mức độ ưu tiên thấp
hơn.
Tính năng tối ưu hố này có nghĩa là một hàm có khả năng kết hợp có thể thực
thi trong một nhóm các chuỗi nền. Nếu một hàm có khả năng kết hợp gọi một hàm
trên ViewModel thì Compose có thể gọi hàm đó từ nhiều chuỗi cùng lúc.
Để đảm bảo ứng dụng hoạt động chính xác, tất cả hàm có khả năng kết hợp
khơng được có tác dụng phụ. Thay vào đó, hãy kích hoạt các tác dụng phụ của lệnh
gọi lại, chẳng hạn như onClick luôn thực thi trên chuỗi giao diện người dùng.
Khi một hàm có khả năng kết hợp được gọi, lệnh gọi có thể xảy ra trên một
chuỗi khác với phương thức gọi. Điều đó có nghĩa là bạn nên tránh sử dụng mã sửa
đổi các biến dưới dạng lambda có thể kết hợp vì loại mã này khơng an tồn cho
chuỗi và vì đây là một tác dụng phụ khơng thể chấp nhận được của lambda có thể
kết hợp.

Sau đây là ví dụ về một composable cho thấy danh sách và số lượng:

Mã này khơng có tác dụng phụ và chuyển đổi danh sách nhập vào giao diện
người dùng. Đây là mã lý tưởng cho việc hiển thị một danh sách nhỏ. Tuy nhiên,
nếu hàm này ghi vào một biến cục bộ thì mã này sẽ khơng đúng hoặc khơng an
tồn cho chuỗi:

Trang 19


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

Ở ví dụ này, items được sửa đổi với các thành phần kết hợp lại. Đó có thể là
mọi khung ảnh động hoặc khi danh sách cập nhật. Dù là điều nào thì giao diện
người dùng cũng sẽ hiển thị số lượng không chính xác. Do đó, cách ghi này sẽ
khơng được hỗ trợ trong Compose, với việc cấm các cách ghi đó, chúng tôi cho
phép khung thay đổi các chuỗi thực thi lambda có thể kết hợp.
4.5.3. Bỏ qua recomposition nhiều nhất có thể
Khi các phần trong giao diện người dùng của bạn không hợp lệ, Compose sẽ
cố gắng hết sức để kết hợp lại các phần cần cập nhật. Điều này có nghĩa là cơng cụ
này có thể bỏ qua để chạy lại thành phần có thể kết hợp của một nút mà khơng cần
thực thi bất kỳ thao tác có thể kết hợp nào ở trên hoặc bên dưới trong cây giao diện
người dùng.
Mọi hàm và lambda có khả năng kết hợp đều có thể tự phân tích lại. Sau đây
là ví dụ minh họa cách việc kết hợp lại có thể bỏ qua một số phần tử khi hiển thị
một danh sách:

Trang 20

ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

Mỗi phạm vi này có thể là nội dung duy nhất cần thực thi trong q trình kết
hợp lại. Compose có thể bỏ qua cho đến lambda Column mà không cần thực thi bất
kỳ yếu tố gốc nào của yếu tố này khi header thay đổi. Và khi thực thi Column,
Compose có thể chọn bỏ qua các mục của LazyColumn nếu names không thay đổi.
Xin nhắc lại, việc thực thi tất cả hàm hoặc lambda có khả năng kết hợp khơng
được có tác dụng phụ. Khi bạn cần thực hiện tác dụng phụ, hãy kích hoạt từ lệnh
gọi lại.
4.5.4. Recomposition là khả quan
Việc kết hợp lại bắt đầu lại bất cứ khi nào Compose cho rằng các thơng số của
một thành phần có thể kết hợp có thể đã thay đổi. Việc kết hợp lại là khả quan,
nghĩa là Compose sẽ hoàn thành việc kết hợp lại trước khi các thông số thay đổi lần
nữa.
Trang 21


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

Nếu một thơng số thay đổi trước khi quá trình kết hợp lại hồn tất thì
Compose có thể sẽ hủy q trình kết hợp lại đó và bắt đầu lại bằng thơng số mới.
Khi quá trình kết hợp lại bị hủy, Compose sẽ loại bỏ cây giao diện người dùng
khỏi quá trình kết hợp lại. Nếu bạn có bất kỳ tác dụng phụ nào phụ thuộc vào giao
diện người dùng đang hiển thị thì tác dụng phụ này sẽ được áp dụng ngay cả khi

quá trình kết hợp lại bị hủy. Điều này có thể làm cho trạng thái ứng dụng khơng
nhất qn.
Hãy đảm bảo rằng tất cả hàm và lambda có khả năng kết hợp đều giống nhau
và khơng có tác dụng phụ khi xử lý việc kết hợp lại một cách khả quan.
4.5.5. Các hàm có khả năng recomposition có thể chạy khá thường
xuyên
Trong một số trường hợp, một hàm có khả năng kết hợp có thể chạy cho mọi
khung giao diện người dùng. Nếu thực hiện các thao tác tốn kém (chẳng hạn như
đọc từ bộ nhớ của thiết bị) thì hàm này có thể khiến giao diện người dùng bị giật.
Ví dụ: nếu tiện ích cố gắng đọc chế độ cài đặt của thiết bị thì tiện ích đó có thể
đọc chế độ cài đặt hàng trăm lần mỗi giây và gây ra ảnh hưởng tiêu cực đến hiệu
suất của ứng dụng.
Nếu hàm có khả năng kết hợp của bạn cần dữ liệu thì hàm đó phải xác định
các thơng số cho dữ liệu. Sau đó, bạn có thể chuyển thao tác tốn kém sang một
chuỗi khác, bên ngoài thành phần kết hợp và chuyển dữ liệu sang Compose bằng
mutableStateOf hoặc LiveData.
5. Bố cục Compose cơ bản
5.1. Mục tiêu
Việc triển khai hệ thống bố cục trong Jetpack Compose có hai mục tiêu chính:
• Hiệu suất cao
• Khả năng viết các bố cục tuỳ chỉnh một cách dễ dàng
Lưu ý: Khi sử dụng hệ thống Android View, bạn có thể gặp phải một số vấn
đề về hiệu suất khi lồng một số hệ thống View nhất định, chẳng hạn như
RelativeLayout. Vì Compose tránh nhiều chế độ đo lường, bạn có thể tạo các lớp
lồng nhau nhiều nội dung theo ý muốn mà không ảnh hưởng đến hiệu suất
5.2.

Các hàm Composable
Trang 22

ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

Hàm có khả năng kết hợp là khối xây dựng cơ bản trong Compose. Hàm có
khả năng kết hợp là một hàm chèn Unit mô tả một số phần trên giao diện người
dùng. Hàm sử dụng một số dữ liệu đầu vào và tạo nội dung hiển thị trên màn hình.
Để biết thêm thông tin về các thành phần kết hợp, hãy xem tài liệu Mơ hình tư duy
của Compose.
Một hàm có khả năng kết hợp có thể chuyển phát nhiều thành phần trên giao
diện người dùng. Tuy nhiên, nếu bạn không đưa ra cách sắp xếp, thì Compose có
thể sắp xếp các thành phần theo cách mà bạn khơng muốn. Ví dụ: mã này tạo ra hai
thành phần văn bản:

Nếu bạn không hướng dẫn cách sắp xếp các thành phần này, thì công cụ
Compose sẽ xếp chồng các thành phần văn bản lên nhau, khiến cho chúng không
thể đọc được:

Compose cung cấp một tập hợp các bố cục sẵn sàng sử dụng để giúp bạn sắp
xếp các thành phần trên giao diện người dùng và giúp bạn dễ dàng xác định các bố
cục của riêng mình, ở mức độ chuyên biệt cao hơn.
5.3.

Các bố cục cơ bản

Trong nhiều trường hợp, bạn chỉ cần sử dụng Các thành phần của bố cục tiêu
chuẩn trong Compose.
Hãy dùng Column để đặt các mục theo chiều dọc trên màn hình.

Trang 23


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

Tương tự, hãy dùng Row để đặt các mục theo chiều ngang trên màn hình. Cả
hai mã Column và Row đều hỗ trợ định cấu hình căn chỉnh các thành phần có trong
mã.

Sử dụng Box để xếp các thành phần chồng lên nhau. Box cũng hỗ trợ định cấu
hình căn chỉnh cụ thể các thành phần có trong mã.

Trang 24


ĐỜ ÁN 1

Bùi Lê Hồi An - 20520985

Thơng thường, các khối xây dựng này là tất cả những gì bạn cần. Bạn có thể
viết hàm có khả năng kết hợp của riêng mình để kết hợp các bố cục này vào một bố
cục chi tiết hơn phù hợp với ứng dụng của bạn.

Lưu ý: Compose xử lý hiệu quả các bố cục lớp lồng nhau, khiến chúng trở
thành một cách tuyệt vời để thiết kế giao diện người dùng phức tạp. Đây là một sự
cải tiến so với Android Views, trong đó bạn cần tránh các bố cục lớp lồng ghép vì
lý do hiệu suất.
Để đặt vị trí bố cục con trong Row, hãy đặt các đối số horizontalArrangement

và verticalAlignment. Đối với Column, hãy đặt các đối số verticalArrangement và
horizontalAlignment:

Trang 25