1. Trước khi bắt đầu
Trong lớp học lập trình này, bạn sẽ sử dụng Jetpack Compose để tạo một ứng dụng Android đơn giản nhằm hiển thị lời chúc mừng sinh nhật trên màn hình.
Điều kiện tiên quyết
- Biết cách tạo ứng dụng trong Android Studio.
- Biết cách chạy ứng dụng trên trình mô phỏng hoặc thiết bị Android.
Kiến thức bạn sẽ học được
- Cách viết các hàm có khả năng kết hợp, chẳng hạn như các hàm
Text
,Column
vàRow
. - Cách hiển thị văn bản trong ứng dụng.
- Cách định dạng văn bản, chẳng hạn như thay đổi kích thước văn bản và cỡ chữ.
Sản phẩm bạn sẽ tạo ra
- Ứng dụng Android hiển thị lời chào sinh nhật ở định dạng văn bản. Bên dưới là ảnh chụp màn hình ứng dụng sau khi hoàn tất:
Bạn cần có
- Một máy tính đã cài đặt Android Studio.
2. Xem video tập lập trình (Không bắt buộc)
Nếu bạn muốn xem một trong những người hướng dẫn của khoá học hoàn thành lớp học lập trình, hãy phát video bên dưới.
Bạn nên mở rộng video ra toàn màn hình (bằng biểu tượng ở góc dưới bên phải của video). Nhờ đó, bạn có thể thấy rõ các đoạn mã và Android Studio hơn.
Bước này là bước không bắt buộc. Bạn cũng có thể bỏ qua video này và bắt đầu tham gia lớp học lập trình ngay.
3. Thiết lập ứng dụng Happy Birthday (Chúc mừng sinh nhật)
Trong nhiệm vụ này, bạn sẽ thiết lập một dự án trong Android Studio thông qua mẫu Empty Compose Activity (Hoạt động Compose trống) và thay đổi thông điệp văn bản thành lời chào sinh nhật được cá nhân hóa.
Tạo dự án Empty Compose Activity
- Trong hộp thoại Welcome to Android Studio (Chào mừng bạn đến với Android Studio), hãy chọn New Project (Dự án mới).
- Trong hộp thoại New Project (Dự án mới), hãy chọn Empty Compose Activity (Hoạt động Compose trống) rồi nhấp vào Next (Tiếp theo).
- Nhập
Happy Birthday
trong trường Name (Tên), sau đó chọn mức API tối thiểu là 21 (Lollipop) trong trường Minimum SDK (SDK tối thiểu) và nhấp vào Finish (Hoàn tất).
- Chờ Android Studio tạo các tệp dự án và xây dựng dự án.
- Nhấp vào
Run ‘app' (Chạy "ứng dụng").
Ứng dụng sẽ có dạng như ảnh chụp màn hình sau:
Khi tạo ứng dụng Happy Birthday này bằng mẫu Empty Compose Activity, Android Studio sẽ thiết lập tài nguyên cho ứng dụng Android cơ bản, bao gồm thông báo Hello Android! (Xin chào Android!) trên màn hình. Trong lớp học lập trình này, bạn tìm hiểu cách hiển thị thông báo này, cách thay đổi văn bản thành lời chào sinh nhật, cũng như cách thêm và định dạng các thông báo bổ sung.
Giao diện người dùng (UI) là gì?
Giao diện người dùng (UI) của một ứng dụng là những gì bạn nhìn thấy trên màn hình: văn bản, hình ảnh, nút lệnh cũng như nhiều thành phần khác và bố cục hiển thị của các thành phần này. Đó là cách ứng dụng hiển thị nội dung cho người dùng và cách người dùng tương tác với ứng dụng.
Hình ảnh này chứa nút có khả năng nhấp (clickable button), thông điệp văn bản và trường nhập dữ liệu văn bản để người dùng có thể nhập dữ liệu.
Nút có khả năng nhấp
Thông điệp văn bản
Trường nhập dữ liệu văn bản
Mỗi phần tử trong số này được gọi là một thành phần giao diện người dùng. Hầu hết những gì bạn thấy trên màn hình của ứng dụng đều là thành phần trên giao diện người dùng (còn được gọi là thành phần giao diện người dùng). Đây là những thành phần có khả năng tương tác, như nút lệnh có khả năng nhấp hoặc trường nhập thông tin có thể chỉnh sửa, hoặc có thể là hình ảnh dùng để trang trí.
Trong lớp học lập trình này, bạn sẽ làm việc với một thành phần giao diện người dùng để hiển thị văn bản có tên là "thành phần Text
".
4. Jetpack Compose là gì?
Jetpack Compose là một bộ công cụ hiện đại giúp xây dựng giao diện người dùng cho Android. Compose giúp đơn giản hóa và tăng tốc quá trình phát triển giao diện người dùng trên Android nhờ dùng ít mã hơn, các công cụ mạnh mẽ và khả năng triển khai trực quan. Với Compose, bạn có thể xây dựng giao diện người dùng bằng cách định nghĩa tập hợp các hàm, gọi là hàm có khả năng kết hợp (composable functions), cho phép lấy dữ liệu và chuyển phát (emit) các thành phần giao diện người dùng.
Hàm có khả năng kết hợp
Các hàm có khả năng kết hợp là thành phần xây dựng giao diện người dùng cơ bản trong Compose. Hàm có khả năng kết hợp:
- Mô tả một số thành phần trên giao diện người dùng.
- Không trả về giá trị.
- Lấy giá trị đầu vào và tạo nội dung hiển thị trên màn hình.
- Có thể chuyển phát một số thành phần giao diện người dùng.
Chú thích (Annotations)
Chú thích là phương tiện để thêm thông tin bổ sung vào mã. Thông tin này giúp các công cụ như trình biên dịch Jetpack Compose và các nhà phát triển khác hiểu được mã của ứng dụng.
Bạn có thể áp dụng chú thích bằng cách thêm tiền tố chú thích chứa ký tự @
ở đầu phần khai báo. Bạn có thể chú thích các thành phần mã khác nhau, bao gồm thuộc tính, hàm và lớp. Trong phần sau của khoá học, bạn sẽ tìm hiểu thêm về lớp.
Biểu đồ dưới đây là một ví dụ về hàm có chú giải:
Đoạn mã sau đây cung cấp các ví dụ về thuộc tính có chú giải. Bạn sẽ dùng tính năng này trong các lớp học lập trình sắp tới.
// Example code, do not copy it over
@Json
val imgSrcUrl: String
@Volatile
private var INSTANCE: AppDatabase? = null
Chú thích chứa tham số
Chú thích có thể chứa các tham số. Các tham số sẽ cung cấp thêm thông tin cho các công cụ trong quá trình xử lý. Sau đây là một số ví dụ về chú thích @Preview
chứa và không chứa tham số.
Chú thích không chứa tham số
Chú thích xem trước phần nền
Chú thích chứa tiêu đề xem trước
Bạn có thể truyền nhiều tham số vào chú thích, như được hiển thị dưới đây.
Chú thích chứa tiêu đề xem trước và giao diện người dùng hệ thống (màn hình điện thoại)
Jetpack Compose sử dụng nhiều chú thích được tích hợp sẵn. Đến thời điểm này, bạn đã xem qua các chú thích @Composable
và @Preview
trong khoá học này. Bạn sẽ tìm hiểu thêm về chú thích và cách sử dụng trong phần sau của khoá học.
Ví dụ về hàm có khả năng kết hợp
Bạn có thể chú thích cho hàm có khả năng kết hợp bằng cách sử dụng chú thích @Composable
. Tất cả hàm có khả năng kết hợp phải dùng chú thích này. Chú thích này sẽ thông báo cho trình biên dịch Compose biết rằng hàm này sẽ giúp chuyển đổi dữ liệu thành giao diện người dùng. Lưu ý rằng trình biên dịch là một chương trình đặc biệt có chức năng lấy mã bạn viết, duyệt mã theo từng dòng rồi dịch mã này dưới dạng thông tin mà máy tính có thể hiểu được (ngôn ngữ máy).
Đoạn mã này là một ví dụ về một hàm có khả năng kết hợp đơn giản dùng để truyền dữ liệu (là tham số name
) và sử dụng đoạn mã này để hiển thị thành phần văn bản trên màn hình.
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
Một số lưu ý về hàm có khả năng kết hợp:
- Các hàm có khả năng kết hợp có thể chấp nhận các tham số, cho phép triển khai logic ứng dụng để mô tả hoặc chỉnh sửa giao diện người dùng. Trong trường hợp này, thành phần giao diện người dùng sẽ chấp nhận một
String
để có thể kèm tên người dùng trong lời chào. - Hàm này không trả về bất kỳ giá trị nào. Hàm có khả năng kết hợp sẽ chuyển phát giao diện người dùng và không trả về bất kỳ giá trị nào vì hàm này được dùng để mô tả trạng thái màn hình mong muốn thay vì xây dựng các thành phần giao diện người dùng. Nói cách khác, hàm có khả năng kết hợp chỉ mô tả giao diện người dùng chứ không tạo hoặc xây dựng giao diện người dùng. Do đó hàm này sẽ không trả về bất cứ giá trị nào.
Lưu ý về hàm có khả năng kết hợp trong mã
- Trong Android Studio, mở tệp
MainActivity.kt
. - Cuộn đến
DefaultPreview()
và xóa hàm này đi. Thêm một hàm có khả năng kết hợp mới có tên làBirthdayCardPreview()
để xem trước hàmGreeting()
, như thể hiện bên dưới. Bạn có thể áp dụng một phương pháp hay khi đặt tên hoặc đổi tên hàm là luôn dùng tên hàm mang tính gợi tả về chức năng hoạt động của hàm đó.
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
HappyBirthdayTheme {
Greeting("Android")
}
}
Hàm có khả năng kết hợp có thể gọi đến các hàm có khả năng kết hợp khác. Trong đoạn mã này, hàm xem trước đang gọi đến hàm có khả năng kết hợp Greeting()
.
Lưu ý rằng hàm trước đó cũng có một chú thích khác, chú thích @Preview
, có chứa một tham số đặt trước chú thích @Composable
. Bạn có thể tìm hiểu thêm về các đối số được truyền đến chú thích @Preview
trong phần sau của khóa học này.
Tên hàm có khả năng kết hợp
Hàm có khả năng kết hợp không trả về giá trị nào và PHẢI đặt tên chú thích @Composable
theo kiểu viết hoa pascal. Kiểu viết hoa pascal là một quy ước đặt tên, trong đó chữ cái đầu của mỗi từ trong từ ghép phải được viết hoa. Sự khác biệt giữa kiểu viết hoa pascal và kiểu viết hoa camel là tất cả từ trong kiểu pascal đều phải viết hoa chữ cái đầu tiên. Với kiểu viết hoa camel, từ đầu tiên không được viết hoa.
Hàm có khả năng kết hợp:
- PHẢI là danh từ:
DoneButton()
- KHÔNG phải động từ hoặc cụm động từ:
DrawTextField()
- KHÔNG phải là giới từ theo sau danh từ:
TextFieldWithLink()
- KHÔNG phải là tính từ:
Bright()
- KHÔNG phải là trạng từ:
Outside()
- Danh từ CÓ THỂ đứng trước tính từ mô tả:
RoundIcon()
Nguyên tắc này được áp dụng dù hàm có chuyển phát thành phần giao diện người dùng hay không. Để tìm hiểu thêm, hãy xem Đặt tên hàm có khả năng kết hợp.
Mã ví dụ Đừng sao chép
// Do: This function is a descriptive PascalCased noun as a visual UI element
@Composable
fun FancyButton(text: String) {
// Do: This function is a descriptive PascalCased noun as a non-visual element
// with presence in the composition
@Composable
fun BackButtonHandler() {
// Don't: This function is a noun but is not PascalCased!
@Composable
fun fancyButton(text: String) {
// Don't: This function is PascalCased but is not a noun!
@Composable
fun RenderFancyButton(text: String) {
// Don't: This function is neither PascalCased nor a noun!
@Composable
fun drawProfileImage(image: ImageAsset) {
5. Ngăn Design (Thiết kế) trên Android Studio
Android Studio cho phép bạn xem trước các hàm có khả năng kết hợp trong IDE thay vì cài đặt ứng dụng trên một thiết bị Android hoặc trình mô phỏng. Như đã tìm hiểu trong lộ trình trước đó, bạn có thể xem trước giao diện của ứng dụng trong ngăn Design (Thiết kế) trên Android Studio.
Hàm có khả năng kết hợp phải cung cấp giá trị mặc định của tất cả tham số để có thể xem trước hàm đó. Vì lý do này, bạn không thể trực tiếp xem trước hàm Greeting()
. Thay vào đó, trong trường hợp này, bạn cần thêm một hàm BirthdayCardPreview()
khác. Hàm này sẽ gọi hàm Greeting()
với một tham số phù hợp.
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
HappyBirthdayTheme {
Greeting("Android")
}
}
Bạn sẽ tìm hiểu về tham số showBackground
trong chú thích @Preview
ở các lớp học lập trình sau này.
Cách xem bản xem trước:
- Tạo mã của bạn.
Bản xem trước sẽ tự động cập nhật.
Một cách khác để cập nhật hoặc làm mới bản xem trước là nhấp vào Build & Refresh (Tạo và làm mới) trong ngăn Design (Thiết kế).
- Trong hàm
BirthdayCardPreview()
, thay đổi đối số ""Android"
trong hàmGreeting()
thành tên của bạn.
fun BirthdayCardPreview() {
HappyBirthdayTheme {
Greeting("James")
}
}
- Nhấp vào
Build & Refresh (Tạo và làm mới) trong ngăn Design (Thiết kế).
Bạn sẽ thấy bản xem trước được cập nhật.
6. Thêm một thành phần văn bản mới
Trong nhiệm vụ này, bạn xóa lời chào Hello Android!
và thêm lời chúc mừng sinh nhật.
Thêm hàm có khả năng kết hợp mới
- Trong tệp
MainActivity.kt
, hãy xóa phần định nghĩa hàmGreeting()
. Bạn sẽ thêm hàm của riêng mình để hiển thị lời chúc trong lớp học lập trình sau này.
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
- Lưu ý rằng Android Studio sẽ làm nổi bật lệnh gọi hàm
Greeting()
và sau đó di chuột qua lệnh gọi hàm này để nhận diện lỗi.
- Xóa lệnh gọi hàm
Greeting()
cùng các đối số của hàm này từ các hàmonCreate()
vàBirthdayCardPreview()
. TệpMainActivity.kt
của bạn sẽ giống như sau:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
HappyBirthdayTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview(){
HappyBirthdayTheme {
}
}
- Trước hàm
BirthdayCardPreview()
, thêm một hàm mới tên làBirthdayGreetingWithText()
. Đừng quên thêm chú thích@Composable
trước hàm này vì đây là một hàm có khả năng kết hợp dùng để chuyển phát một thành phần kết hợpText
.
@Composable
fun BirthdayGreetingWithText() {
}
- Thêm tham số
message
có kiểuString
vào hàm có khả năng kết hợpBirthdayGreetingWithText()
.
@Composable
fun BirthdayGreetingWithText(message: String) {
}
- Trong hàm
BirthdayGreetingWithText()
, thêm một thành phần kết hợpText()
, truyền vào một thông điệp văn bản dưới dạng đối số được đặt tên.
@Composable
fun BirthdayGreetingWithText(message: String) {
Text(
text = message
)
}
Hàm BirthdayGreetingWithText()
này sẽ hiển thị văn bản trên giao diện người dùng. Để thực hiện điều đó, hàm này sẽ gọi đến hàm có khả năng kết hợp Text()
.
Xem trước hàm
Trong nhiệm vụ này, bạn sẽ xem trước hàm BirthdayGreetingWithText()
trong ngăn Design (Thiết kế).
- Gọi hàm
BirthdayGreetingWithText()
bên trong hàmBirthdayCardPreview()
. - Truyền một đối số
String
đến hàmBirthdayGreetingWithText()
. Đây là một lời chào sinh nhật gửi đến bạn bè của bạn. Bạn có thể chỉnh lại lời chào theo tên bạn bè của bạn nếu muốn, chẳng hạn như"Happy Birthday Sam!"
.
@Preview(showBackground = false)
@Composable
fun BirthdayCardPreview() {
HappyBirthdayTheme {
BirthdayGreetingWithText( "Happy Birthday Sam!")
}
}
- Trong ngăn Design (Thiết kế), hãy nhấp vào
Build & Refresh (Tạo và làm mới) rồi chờ quá trình tạo hoàn tất để xem trước hàm này.
7. Thay đổi cỡ chữ
Bạn đã thêm văn bản vào giao diện người dùng, nhưng văn bản này có vẻ chưa giống hoàn toàn với ứng dụng cuối cùng. Trong nhiệm vụ này, bạn tìm hiểu cách thay đổi kích thước, màu sắc văn bản và các thuộc tính khác ảnh hưởng đến hình thức hiển thị của thành phần văn bản. Bạn có thể thử nghiệm các màu sắc và kích thước phông chữ khác nhau.
Pixel có khả năng mở rộng
Các pixel có khả năng mở rộng (SP) là một đơn vị đo kích thước phông chữ. Các thành phần trên giao diện người dùng trong ứng dụng Android sử dụng hai đơn vị đo lường khác nhau: pixel không phụ thuộc vào mật độ (DP), bạn sẽ dùng sau này cho phần bố cục, và pixel có khả năng mở rộng (SP). Theo mặc định, đơn vị SP có cùng kích thước với đơn vị DP, nhưng đơn vị này đổi kích thước dựa trên kích thước văn bản yêu thích của người dùng trong phần cài đặt của điện thoại.
- Trong tệp
MainActivity.kt
, di chuyển đến thành phần kết hợpText()
trong hàmBirthdayGreetingWithText()
. - Truyền vào hàm
Text()
một đối sốfontSize
làm đối số được đặt tên thứ hai và thiết lập giá trị cho đối số đó thành36.
sp
.
Text(
text = message,
fontSize = 36.sp
)
Android Studio sẽ làm nổi bật mã .sp
vì bạn cần nhập một số lớp hoặc thuộc tính để biên dịch ứng dụng.
- Nhấp vào mã
.sp
được Android Studio làm nổi bật ở trên. - Nhấp vào Import (Nhập) trong cửa sổ bật lên để nhập
androidx.compose.ui.unit.sp
để có thể sử dụng thuộc tính tiện ích.sp
.
- Di chuyển lên đầu tệp và chú ý các câu lệnh
import
, trong đó bạn sẽ thấy câu lệnhimport androidx.compose.ui.unit.sp
. Điều này có nghĩa là Android Studio đã thêm gói này vào tệp.
- Nhấp vào Build & Refresh (Tạo và làm mới) trong ngăn Design (Thiết kế) để xem bản xem trước được cập nhật. Lưu ý phần thay đổi kích thước phông chữ trong bản xem trước của lời chúc mừng sinh nhật.
Bây giờ, bạn có thể thử nghiệm với các kích thước phông chữ khác nhau.
8. Thêm một thành phần văn bản khác
Trong các nhiệm vụ trước, bạn đã thêm thông điệp chúc mừng sinh nhật cho bạn bè của mình. Trong nhiệm vụ này, bạn sẽ ký tên mình vào thiệp sinh nhật.
- Trong tệp
MainActivity.kt
, di chuyển đến hàmBirthdayGreetingWithText()
. - Truyền vào hàm này tham số
from
có kiểuString
cho phần chữ ký của bạn.
fun BirthdayGreetingWithText(message: String, from: String)
- Sau thành phần kết hợp
Text
dành cho thông điệp sinh nhật, thêm một thành phần kết hợpText
khác chấp nhận đối sốtext
và sau đó thiết lập giá trị đối số này thànhfrom
.
Text(
text = from
)
- Thêm đối số có tên
fontSize
và đặt giá trị là24.sp
.
Text(
text = from,
fontSize = 24.sp
)
- Di chuyển đến hàm
BirthdayCardPreview()
. - Thêm một đối số
String
khác dùng để ký thiệp sinh nhật, chẳng hạn như"- from Emma"
.
BirthdayGreetingWithText( "Happy Birthday Sam!", "- from Emma")
- Nhấp vào Build & Refresh (Tạo và làm mới) trong ngăn Design (Thiết kế).
- Quan sát bản xem trước này.
Một hàm có khả năng kết hợp có thể chuyển phát nhiều thành phần giao diện người dùng. Tuy nhiên, nếu bạn không cung cấp hướng dẫn về cách sắp xếp chúng, thì tính năng Soạn thư có thể sắp xếp các phần tử theo cách bạn không muốn. Ví dụ: mã trước tạo ra hai phần tử văn bản chồng chéo nhau vì chưa có hướng dẫn về cách sắp xếp hai thành phần kết hợp này.
Trong nhiệm vụ tiếp theo, bạn sẽ tìm hiểu cách sắp xếp các thành phần kết hợp trong một hàng và trong một cột.
9. Sắp xếp các thành phần văn bản trong một hàng và cột
Hệ phân cấp giao diện người dùng
Hệ phân cấp giao diện người dùng dựa trên vùng chứa, có nghĩa là một thành phần có thể chứa một hoặc nhiều thành phần khác, theo đó thỉnh thoảng bạn sẽ thấy xuất hiện các thuật ngữ như thành phần mẹ (parent) và con (child). Ngữ cảnh đề cập ở đây là các thành phần giao diện người dùng mẹ chứa các thành phần giao diện người dùng con. Đến lượt mình, các thành phần con này có thể chứa các thành phần giao diện người dùng con khác. Trong phần này, bạn sẽ tìm hiểu về các thành phần kết hợp Column (Cột), Row (Hàng) và Box (Hộp). Các thành phần này có thể hoạt động như các thành phần giao diện người dùng mẹ.
Ba thành phần bố cục chuẩn cơ bản trong Compose là các thành phần kết hợp Column
, Row
và Box
. Bạn có thể tìm hiểu thêm về thành phần kết hợp Box
trong lớp học lập trình tiếp theo.
Column
, Row
và Box
là các hàm có khả năng kết hợp. Những hàm này sẽ nhận các nội dung có thể kết hợp làm đối số, vì vậy, bạn có thể đặt các thành phần bên trong các thành phần bố cục này. Ví dụ: mỗi thành phần con bên trong một thành phần kết hợp Row
có thể đặt ngang hàng với nhau.
// Don't copy.
Row {
Text("First column")
Text("Second column")
}
Các thành phần văn bản này hiển thị bên cạnh nhau trên màn hình như thể hiện trong hình bên dưới.
Đường viền màu xanh dương chỉ nhằm mục đích minh họa và không hiển thị.
Cú pháp trailing lambda
Hãy lưu ý rằng trong đoạn mã trước đó, dấu ngoặc nhọn được dùng thay cho dấu ngoặc đơn trong hàm có khả năng kết hợp Row
. Hành động này được gọi là Cú pháp Trailing Lambda. Bạn có thể tìm hiểu chi tiết về lambdas và cú pháp lambda ở phần sau trong khóa học này. Bây giờ, hãy làm quen với cú pháp Compose thường dùng.
Kotlin cung cấp một cú pháp đặc biệt để truyền các hàm đến các hàm khác dưới dạng tham số, trong đó tham số cuối cùng sẽ là một hàm.
Nếu muốn truyền một hàm dưới dạng tham số như vậy, bạn có thể sử dụng cú pháp trailing lambda. Thay vì đặt hàm cùng với tên hàm trong dấu ngoặc đơn, bạn sẽ đặt dấu ngoặc đơn sau tên hàm. Đây là một phương pháp phổ biến trong Compose, vì vậy bạn cần phải làm quen với cú pháp viết mã theo cách này.
Ví dụ: tham số cuối cùng trong hàm có khả năng kết hợp Row()
là content
. Đây là một hàm dùng để chuyển phát các thành phần giao diện người dùng con. Giả sử bạn muốn tạo một hàng chứa ba thành phần văn bản. Mã này vẫn hoạt động tốt nhưng rất cồng kềnh:
Row(
content = {
Text("Some text")
Text("Some more text")
Text("Last text")
}
)
Vì tham số content
là tham số cuối cùng trong chữ ký hàm (function signature) và bạn truyền giá trị của tham số đó dưới dạng một biểu thức lambda (hiện tại, bạn không cần biết lambda là gì, chỉ cần làm quen với cú pháp), bạn có thể xoá tham số content
và các dấu ngoặc đơn như sau:
Row {
Text("Some text")
Text("Some more text")
Text("Last text")
}
Sắp xếp các thành phần văn bản trong một hàng
Trong nhiệm vụ này, bạn sẽ sắp xếp các thành phần văn bản trong ứng dụng thành một hàng để tránh chồng chéo.
- Trong tệp
MainActivity.kt
, di chuyển đến hàmBirthdayGreetingWithText()
. - Thêm thành phần kết hợp
Row
xung quanh các thành phần văn bản này để hiển thị một cột gồm 2 thành phần văn bản.
Bây giờ, hàm này sẽ có dạng như đoạn mã sau:
@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
Row{
Text(
text = message,
fontSize = 36.sp,
)
Text(
text = from,
fontSize = 24.sp,
)
}
}
- Nhấp vào
Row
được làm nổi bật trong đoạn mã. - Lưu ý rằng Android Studio cung cấp nhiều lựa chọn lệnh nhập cho
Row
. - Nhấp vào Import (Nhập).
- Chọn gói trong lớp
androidx.compose.ui
, bắt đầu bằngRow(androidx.compose.ui.Modifier, androidx.compose.foundation.layout.Argument.Horizontal, androidx
....
- Nhấp vào Build & Refresh (Tạo và làm mới) để cập nhật bản xem trước trong ngăn Design (Thiết kế).
Bản xem trước bây giờ đã đẹp hơn rất nhiều vì các thành phần không còn chồng chéo lẫn nhau. Tuy nhiên, giao diện này vẫn chưa đáp ứng yêu cầu của bạn vì không có đủ không gian cho phần chữ ký. Trong nhiệm vụ tiếp theo, bạn sẽ sắp xếp các thành phần văn bản trong một cột để xử lý vấn đề này.
Sắp xếp các thành phần văn bản trong một cột
Trong việc này, bạn cần thay đổi hàm BirthdayGreetingWithText()
để sắp xếp các thành phần văn bản trong một cột. Sau khi bạn hoàn tất, đừng quên nhấp vào Tạo và làm mới để cập nhật bản xem trước. Bản xem trước này sẽ có dạng như sau:
Bây giờ, bạn hãy thử tự kiểm tra mã của bạn với đoạn mã sau trong mã giải pháp:
@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
Column {
Text(
text = message,
fontSize = 36.sp,
)
Text(
text = from,
fontSize = 24.sp,
)
}
}
Nhập gói này khi được Android Studio nhắc nhở:
import androidx.compose.foundation.layout.Column
10. Hiển thị trên thiết bị
Nếu thấy hài lòng với bản xem trước, bạn hãy chạy ứng dụng trên thiết bị hoặc trình mô phỏng.
- Trong tệp
MainActivity.kt
, chuyển đến hàmonCreate()
. - Gọi hàm
BirthdayGreetingWithText()
trong khối lệnhSurface
. - Truyền lời chúc mừng sinh nhật và chữ ký của bạn vào hàm
BirthdayGreetingWithText()
.
Hàm onCreate()
hoàn chỉnh sẽ có dạng như đoạn mã sau:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
HappyBirthdayTheme {
// A surface container that uses the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
BirthdayGreetingWithText( "Happy Birthday Sam!", "- from Emma")
}
}
}
}
}
- Tạo và chạy ứng dụng trên trình mô phỏng.
11. Lấy mã giải pháp
MainActivity.kt
hoàn chỉnh:
package com.example.android.happybirthday
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.happybirthday.ui.theme.HappyBirthdayTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
HappyBirthdayTheme {
// A surface container that uses the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
BirthdayGreetingWithText( "Happy Birthday Sam!", "- from Emma")
}
}
}
}
}
@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
Column {
Text(
text = message,
fontSize = 36.sp,
)
Text(
text = from,
fontSize = 24.sp,
)
}
}
@Preview(showBackground = false)
@Composable
fun BirthdayCardPreview() {
HappyBirthdayTheme {
BirthdayGreetingWithText( "Happy Birthday Sam!", "- from Emma")
}
}
12. Kết luận
Bạn đã tạo ứng dụng Chúc mừng sinh nhật.
Trong lớp học lập trình tiếp theo, bạn sẽ thêm hình ảnh vào ứng dụng và thay đổi cách căn chỉnh để hiển thị các thành phần văn bản đẹp hơn.
Tóm tắt
- Jetpack Compose là một bộ công cụ hiện đại giúp xây dựng giao diện người dùng Android. Jetpack Compose giúp đơn giản hóa và tăng tốc quá trình phát triển giao diện người dùng trên Android nhờ dùng ít mã hơn, các công cụ mạnh mẽ và API Kotlin trực quan.
- Giao diện người dùng (UI) của một ứng dụng là những gì bạn thấy trên màn hình: văn bản, hình ảnh, nút lệnh và nhiều loại thành phần khác.
- Các hàm có khả năng kết hợp là thành phần xây dựng cơ bản trong Compose. Hàm có khả năng kết hợp là một hàm mô tả một số thành phần trên giao diện người dùng.
- Hàm có khả năng kết hợp được chú thích bằng chú thích
@Composable
; chú thích này sẽ thông báo cho trình biên dịch Compose biết rằng hàm này sẽ giúp chuyển đổi dữ liệu thành giao diện người dùng. - Ba thành phần bố cục chuẩn cơ bản trong Compose là
Column
,Row
vàBox
. Đây là các hàm có khả năng kết hợp và nhận tham số là các nội dung có thể kết hợp. Vì vậy, bạn có thể đặt các thành phần bên trong những hàm này. Ví dụ: mỗi thành phần con trong mộtRow
sẽ được xếp cạnh nhau theo chiều ngang.