Công cụ Compose

Android Studio mang đến rất nhiều tính năng mới dành riêng cho Jetpack Compose. Android Studio giúp bạn thực hiện phương pháp ưu tiên lập trình trong khi vẫn cải thiện năng suất mà không phải lựa chọn giữa giao diện thiết kế hoặc chỉ mỗi trình soạn thảo mã.

Một điểm khác biệt cơ bản giữa Giao diện người dùng dựa trên Thành phần hiển thị (View-based) và Jetpack Compose là Compose không dựa vào View để kết xuất thành phần kết hợp Nhờ phương pháp thiết kế này, Android Studio cung cấp các tính năng mở rộng cho Jetpack Compose mà không cần phải mở trình mô phỏng hoặc kết nối với một thiết bị khi so với Thành phần hiển thị Android (Android Views), giúp các nhà phát triển thực hiện quá trình lặp lại nhanh hơn để triển khai thiết kế giao diện người dùng.

Để bật các tính năng dành riêng cho Android Studio cho Jetpack Compose, bạn cần thêm các phần phụ thuộc này vào tệp build.gradle của ứng dụng:

debugImplementation "androidx.compose.ui:ui-tooling:1.2.1"
implementation "androidx.compose.ui:ui-tooling-preview:1.2.1"

Bản xem trước thành phần kết hợp

Mỗi thành phần kết hợp (composable) được xác định bởi một hàm, được chú thích bằng @Composable:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}

Để bật bản xem trước của thành phần kết hợp này, bạn cần tạo một thành phần kết hợp khác, được chú thích bằng @Composable và @Preview, mô phỏng thành phần kết hợp mà bạn đã tạo ban đầu:

@Preview
@Composable
fun ComposablePreview() {
    SimpleComposable()
}

Cuối cùng, hãy nhấp vào Chế độ xem (thiết kế/mã) phân tách để mở bảng điều khiển bên phải nơi bản xem trước sẽ thể hiện như sau:

Bạn có thể thêm tham số vào mã theo cách thủ công để tuỳ chỉnh cách Android Studio kết xuất @Preview.

Tính năng @Preview

Android Studio cung cấp một số tính năng để mở rộng bản xem trước thành phần kết hợp. Bạn có thể thay đổi thiết kế vùng chứa, tương tác với chúng hoặc triển khai trực tiếp ở một trình mô phỏng hoặc thiết bị.

LocalInspectionMode

Bạn có thể đọc từ LocalInspectionMode CompositionLocal để xem liệu thành phần kết hợp có đang hiện trong bản xem trước hay không. Điều đó cho phép bạn làm những việc như hiện hình ảnh trình giữ chỗ trong cửa sổ xem trước thay vì hiện dữ liệu thực. Nếu cấu trúc đang hiện trong bản xem trước, LocalInspectionMode.current đánh giá là true.

if (LocalInspectionMode.current) {
    // Show this text in a preview window:
    Text("Hello preview user!")
} else {
    // Show this text in the app:
    Text("Hello $name!")
}

Chế độ tương tác

Chế độ tương tác (interactive mode) cho phép bạn tương tác với bản xem trước theo phong cách tương tự mà bạn sẽ thực hiện trên thiết bị. Chế độ tương tác được tách biệt trong một môi trường hộp cát (sandbox) tách biệt với các bản xem trước khác, nơi bạn có thể nhấp vào các thành phần và nhập hoạt động đầu vào của người dùng trong bản xem trước; bản xem trước thậm chí còn phát ảnh động. Đây là một cách nhanh chóng để kiểm tra các trạng thái và cử chỉ của thành phần kết hợp, chẳng hạn như một hộp đánh dấu đã được đánh dấu hoặc để trống.

Chế độ tương tác xem trước chạy trực tiếp bên trong Android Studio mà không cần chạy trình mô phỏng, dẫn đến một số hạn chế như sau:

• Không có quyền truy cập mạng
• Không có quyền truy cập vào tệp
• Một số API Context có thể không dùng được đầy đủ

Triển khai bản xem trước

Bạn có thể triển khai một @Preview cụ thể trên một trình mô phỏng hoặc thiết bị thực. Bản xem trước (preview) được triển khai trong cùng một ứng dụng dự án như là một hoạt động (activity) mới, vì vậy bản xem trước có cùng ngữ cảnh và quyền truy cập, nghĩa là bạn không phải viết mã nguyên mẫu (chẳng hạn như yêu cầu quyền truy cập) nếu đã được cấp.

Nhấp vào biểu tượng Deploy to Device (Triển khai cho thiết bị) bên cạnh chú thích @Preview hoặc ở trên cùng của bản xem trước, và Android Studio sẽ triển khai @Preview đó trên thiết bị đã được kết nối hoặc trình mô phỏng.

Chú thích Multipreview (xem trước nhiều lần)

Với tính năng multipreview (xem trước nhiều lần), bạn có thể xác định một lớp chú thích mà bản thân có nhiều chú thích @Preview với cấu hình khác nhau. Việc thêm chú thích này vào một hàm kết hợp sẽ tự động hiển thị tất cả các bản xem trước khác nhau cùng một lúc. Ví dụ: bạn có thể sử dụng chú thích này để xem trước nhiều thiết bị, kích thước phông chữ hoặc chủ đề cùng một lúc mà không cần phải xác định lại mọi thành phần kết hợp.

Bắt đầu bằng cách tạo lớp chú thích tuỳ chỉnh của riêng bạn:

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
annotation class FontScalePreviews

Bạn có thể sử dụng chú thích tuỳ chỉnh này cho các tài liệu xem trước của mình:

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}

Bạn có thể kết hợp đa dạng các chú thích nhiều bản xem trước với chú thích cấu hình xem trước thông thường để tạo một bộ xem trước hoàn chỉnh hơn. Việc kết hợp chú thích nhiều bản xem trước không có nghĩa là tất cả các kiểu kết hợp khác nhau sẽ hiển thị. Thay vào đó, mỗi chú thích nhiều bản xem trước hoạt động độc lập và chỉ hiển thị các biến thể riêng.

@Preview(
    name = "dark theme",
    group = "themes",
    uiMode = UI_MODE_NIGHT_YES
)
@FontScalePreviews
@DevicePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview() {
    MyTheme { Surface { Text("Hello world") } }
}

Thao tác đối với mã và bản phác thảo thành phần kết hợp

Bạn có thể di chuột qua bản xem trước để xem bản phác thảo của các thành phần kết hợp có trong đó. Khi bạn nhấp vào một bố cục có thể kết hợp, chế độ trình chỉnh sửa của bạn sẽ chuyển đến phần định nghĩa tương ứng.

Sao chép kết xuất @Preview

Mọi bản xem trước được kết xuất có thể được sao chép dưới dạng hình ảnh bằng cách nhấp chuột phải vào hình ảnh đó.

Đặt màu nền

Theo mặc định, thành phần kết hợp của bạn sẽ xuất hiện với nền trong suốt. Để thêm nền, hãy thêm tham số showBackground và backgroundColor. Xin lưu ý rằng backgroundColor là một ARGB Long, không phải là một giá trị Color:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}

Kích thước

Theo mặc định, các kích thước @Preview tự động được chọn để bao phủ nội dung tương ứng. Nếu muốn thiết lập kích thước theo cách thủ công, bạn có thể thêm các tham số heightDp và widthDp. Lưu ý rằng các giá trị đó đã được hiểu là Dp, bạn không cần thêm .dp vào cuối giá trị:

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}

Ngôn ngữ

Để thử nghiệm nhiều ngôn ngữ người dùng, bạn cần phải thêm tham số locale:

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greetings))
}

Giao diện người dùng hệ thống

Nếu bạn cần hiện các thanh trạng thái và hành động bên trong bản xem trước, hãy thêm tham số showSystemUi:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}

@PreviewParameter

Bạn có thể chuyển dữ liệu mẫu sang hàm Xem trước thành phần kết hợp (Composable Preview) bằng cách thêm một tham số bằng chú thích @PreviewParameter.

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}

Để cung cấp dữ liệu mẫu, hãy tạo một hạng mục triển khai PreviewParameterProvider và trả về dữ liệu mẫu dưới dạng trình tự.

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}

Sẽ có một bản xem trước được kết xuất cho mỗi thành phần dữ liệu trong trình tự:

Bạn có thể sử dụng cùng một lớp nhà cung cấp (provider class) cho nhiều bản xem trước. Nếu cần, hãy giới hạn số lần xem trước sẽ xuất hiện bằng cách đặt tham số giới hạn.

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}

Chế độ giao diện người dùng

Tham số uiMode có thể nhận bất kỳ hằng số Configuration.UI_* nào và cho phép bạn thay đổi hành vi của bản xem trước cho phù hợp. Ví dụ: bạn có thể đặt bản xem trước thành Chế độ đêm (Night Mode) để xem giao diện sẽ phản ứng như thế nào.

Thao tác trên trình chỉnh sửa

Android Studio cũng có các tính năng bên trong khu vực chỉnh sửa để cải thiện hiệu suất của bạn bằng Jetpack Compose.

Mẫu trực tiếp

Android Studio đã thêm các mẫu trực tiếp có liên quan đến thành phần kết hợp, cho phép bạn nhập đoạn mã để chèn nhanh bằng cách nhập từ viết tắt mẫu tương ứng:

• comp để thiết lập một hàm @Composable
• prev để tạo một hàm @Preview kết hợp
• paddp để thêm chỉ định truy cập (modifier) padding trong dp
• weight để thêm chỉ định truy cập (modifier) weight
• W, WR, WC để bao quanh thành phần kết hợp hiện tại với vùng chứa Box, Row hoặc Column

Biểu tượng trong rãnh

Các biểu tượng trong rãnh (gutter icon) là các hành động theo ngữ cảnh hiển thị trên thanh bên, bên cạnh số dòng. Android Studio giới thiệu một số biểu tượng trong rãnh dành riêng cho Jetpack Compose để dễ dàng cho trải nghiệm của nhà phát triển

Triển khai bản xem trước

Bạn có thể triển khai @Preview cho trình mô phỏng hoặc thiết bị thực ngay từ biểu tượng trong rãnh:

Công cụ chọn màu

Bất cứ khi nào một màu được xác định bên trong hoặc bên ngoài một thành phần kết hợp, bản xem trước của nó sẽ xuất hiện trên rãnh. Bạn có thể thay đổi màu sắc thông qua bộ chọn màu bằng cách nhấp vào màu đó như sau:

Bộ chọn tài nguyên hình ảnh

Bất cứ khi nào một bản vẽ, vectơ hoặc hình ảnh được xác định bên trong hoặc bên ngoài thành phần kết hợp, bản xem trước của hình ảnh đó sẽ xuất hiện trên rãnh. Bạn có thể thay đổi thông qua bộ chọn tài nguyên hình ảnh bằng cách nhấp vào như sau:

Phát triển mã lặp lại

Là nhà phát triển ứng dụng dành cho thiết bị di động, bạn thường phát triển giao diện người dùng của ứng dụng từng bước thay vì phát triển mọi thứ cùng một lúc. Android Studio áp dụng phương pháp này với Jetpack Compose bằng cách cung cấp các công cụ không yêu cầu một bản dựng đầy đủ để kiểm tra, sửa đổi giá trị và xác minh kết quả cuối cùng.

Chỉnh sửa trực tiếp các giá trị cố định

Android Studio có thể cập nhật theo thời gian thực một số giá trị cố định là hằng số được dùng trong các thành phần kết hợp trong bản xem trước, trình mô phỏng và thiết bị thực. Sau đây là một số loại được hỗ trợ:

• Int
• String
• Color
• Dp
• Boolean

Bạn có thể xem các giá trị cố định liên tục kích hoạt bản cập nhật theo thời gian thực mà không cần bước biên dịch bằng cách bật trang trí giá trị cố định thông qua Chỉnh sửa trực tiếp giá trị cố định của chỉ báo Giao diện người dùng:

Chỉnh sửa trực tiếp

Bạn có thể đẩy nhanh trải nghiệm phát triển Compose bằng cách sử dụng tính năng Chỉnh sửa trực tiếp trong các bản phát hành canary của Android Studio Flamingo. Chỉnh sửa trực tiếp là một phiên bản mạnh mẽ hơn của tính năng Chỉnh sửa trực tiếp các giá trị cố định. Chức năng này cho phép bạn xem tác động của bản cập nhật đối với thành phần kết hợp theo thời gian thực bằng cách tự động triển khai những thay đổi về mã cho trình mô phỏng hoặc thiết bị.

Áp dụng thay đổi

Áp dụng thay đổi (Apply Changes) cho phép bạn cập nhật mã và tài nguyên mà không phải triển khai lại ứng dụng trên trình mô phỏng hoặc thiết bị thực (có một số giới hạn).

Bất cứ khi nào thêm, sửa đổi hoặc xoá thành phần kết hợp, bạn có thể cập nhật ứng dụng mà không cần triển khai lại bằng cách nhấp vào nút này:

Layout Inspector

Layout Inspector cho phép bạn kiểm tra bố cục Compose bên trong một ứng dụng đang chạy trong trình mô phỏng hoặc thiết bị thực tế

Tính số lần tái cấu trúc

Bạn có thể sử dụng công cụ kiểm tra bố cục để kiểm tra tần suất thành phần kết hợp được kết hợp lại hoặc bị bỏ qua. Nếu giao diện người dùng có hiệu suất kém, thì điều này thường là do lỗi mã hoá buộc giao diện người dùng buộc phải kết hợp lại quá mức. Mặt khác, một số lỗi mã hoá có thể ngăn giao diện người dùng được kết hợp lại khi cần, tức là các thay đổi về giao diện người dùng không hiển thị trên màn hình. Việc theo dõi các lần kết hợp lại có thể giúp phát hiện cả hai vấn đề này.

Để theo dõi các lần kết hợp lại, hãy bật tuỳ chọn Show Recomposition Counts (Hiển thị số lần kết hợp lại) trong các tuỳ chọn chế độ xem:

.

Sau khi bật tính năng đó, công cụ kiểm tra bố cục hiển thị số lần kết hợp lại ở bên trái và bỏ qua số lần kết hợp lại ở bên phải:

Nếu nhấp đúp vào một thành phần kết hợp trong công cụ kiểm tra bố cục, bạn sẽ được đưa đến mã tương ứng để phân tích.

Ảnh động

Android Studio cho phép bạn kiểm tra ảnh động trong phần Xem trước ảnh động (Animation Preview). Nếu ảnh động được mô tả trong một bản xem trước của thành phần kết hợp, bạn có thể kiểm tra giá trị chính xác của từng giá trị ảnh động tại một thời điểm cụ thể, tạm dừng ảnh động, lặp lại, tua đi, hoặc giảm tốc độ ảnh động, để giúp bạn gỡ lỗi ảnh động trong suốt các lượt chuyển đổi:

Bạn cũng có thể sử dụng tính năng Xem trước ảnh động để trực quan hoá các đường cong hoạt ảnh, điều này rất hữu ích để đảm bảo rằng các giá trị ảnh động được biên soạn đúng cách:

Tính năng Xem trước ảnh động (Animation Preview) tự động phát hiện các ảnh động có thể kiểm tra, được biểu thị bằng biểu tượng Start Animation Inspection (Bắt đầu kiểm tra ảnh động) .

Tính năng Xem trước ảnh động đang hỗ trợ API updateTransition. Để sử dụng tính năng Xem trước ảnh động với updateTransition, hãy sử dụng phiên bản Compose 1.0.1 trở lên.

Bật các tính năng thử nghiệm

Một số tính năng chỉ dùng được sau khi bạn bật thủ công ở phần thử nghiệm trong mục tuỳ chọn trên Android Studio: File (Tệp) > Settings (Cài đặt) > Experimental (Thử nghiệm) (Android Studio > Preferences (Tuỳ chọn) > Experimental (Thử nghiệm)) trên máy Mac.)