Sử dụng Android Studio với Jetpack Compose

Để có trải nghiệm tốt nhất khi phát triển bằng Jetpack Compose, hãy tải Android Studio xuống và cài đặt. Phiên bản này có nhiều tính năng trình chỉnh sửa thông minh, chẳng hạn như mẫu dự án mới và khả năng xem trước ngay giao diện người dùng cũng như ảnh động của Compose.

Tải Android Studio

Sau khi bạn đã cài đặt Android Studio, hãy làm theo hướng dẫn dưới đây để dùng thử ứng dụng mẫu sử dụng Jetpack Compose, tạo một dự án ứng dụng Jetpack Compose mới hoặc thêm hỗ trợ cho Jetpack Compose vào một dự án ứng dụng hiện có.

Thử các ứng dụng mẫu sử dụng Jetpack Compose

Sau khi bạn chạy phiên bản Android Studio mới nhất, cách nhanh nhất để thử nghiệm các khả năng của Jetpack Compose là dùng thử Ứng dụng mẫu Jetpack Compose được lưu trữ trên GitHub. Để nhập dự án ứng dụng mẫu từ Android Studio, hãy tiến hành như sau:

  1. Nếu bạn đang ở cửa sổ Chào mừng bạn đến với Android Studio, hãy chọn Nhập mẫu mã Android. Nếu bạn đã mở một dự án Android Studio, hãy chọn Tệp > Mới > Nhập mẫu từ thanh trình đơn.
  2. Trong thanh tìm kiếm gần phía trên cùng của trình hướng dẫn Duyệt qua mẫu, hãy nhập "soạn".
  3. Chọn một trong những ứng dụng mẫu Jetpack Compose từ các kết quả tìm kiếm và nhấp vào Tiếp theo.
  4. Thay đổi Tên ứng dụngVị trí dự án hoặc giữ nguyên giá trị mặc định.
  5. Nhấp vào Hoàn tất.

Android Studio sẽ tải ứng dụng mẫu xuống đường dẫn mà bạn đã chỉ định và mở dự án. Sau đó, bạn có thể kiểm tra MainActivity.kt trong mỗi ví dụ để xem các API của Jetpack Compose, chẳng hạn như ảnh động làm mờ ảnh, các thành phần tuỳ chỉnh, sử dụng kiểu chữ và hiển thị màu sáng và tối trong chế độ xem trước trong IDE.

Tạo ứng dụng mới có hỗ trợ Jetpack Compose

Nếu bạn muốn bắt đầu một dự án mới có hỗ trợ Jetpack Compose theo mặc định, thì Android Studio sẽ cung cấp các mẫu dự án mới để giúp bạn bắt đầu. Để tạo một dự án mới có chứa Jetpack Compose, hãy tiến hành như sau:

  1. Nếu bạn đang ở cửa sổ Chào mừng bạn đến với Android Studio, hãy nhấp vào Bắt đầu dự án Android Studio mới. Nếu bạn đã mở một dự án Android Studio, hãy chọn Tệp > Mới > Dự án mới trong thanh trình đơn.
  2. Trong cửa sổ Chọn mẫu dự án, hãy chọn Hoạt động Compose trống và nhấp vào Tiếp theo.
  3. Trong cửa sổ Định cấu hình dự án của bạn, hãy làm như sau:
    1. Đặt Tên, Tên góiLưu vị trí như bình thường.
    2. Xin lưu ý rằng trong trình đơn thả xuống Ngôn ngữ, bạn chỉ có thể sử dụng tuỳ chọn Kotlin vì Jetpack Compose chỉ hoạt động với các lớp được viết trong Kotlin.
    3. Trong trình đơn thả xuống cấp độ API tối thiểu, hãy chọn API cấp 21 trở lên.
  4. Nhấp vào Hoàn tất.
  5. Xác minh rằng tệp build.gradle của dự án được định cấu hình chính xác, như mô tả trong phần Thêm các phần phụ thuộc của bộ công cụ Jetpack Compose.

Giờ đây, bạn đã sẵn sàng bắt đầu phát triển một ứng dụng bằng Jetpack Compose. Để giúp bạn bắt đầu và tìm hiểu những việc bạn có thể làm với bộ công cụ này, hãy xem Hướng dẫn về công cụ Jetpack Compose.

Để dùng Jetpack Compose cho Wear OS, hãy xem phần Thiết lập Jetpack Compose trên Wear OS.

Thêm các phần phụ thuộc vào bộ công cụ Jetpack Compose

Bao gồm các phần phụ thuộc cho bộ công cụ Jetpack Compose trong tệp build.gradle của ứng dụng, như minh họa bên dưới:

Groovy

dependencies {
    implementation 'androidx.compose.ui:ui:1.2.0'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.2.0'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.2.0'
    // Material Design
    implementation 'androidx.compose.material:material:1.2.0'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.2.0'
    implementation 'androidx.compose.material:material-icons-extended:1.2.0'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.5.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.2.0'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.2.0'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.2.0'
}

Kotlin

dependencies {
    implementation("androidx.compose.ui:ui:1.2.0")
    // Tooling support (Previews, etc.)
    implementation("androidx.compose.ui:ui-tooling:1.2.0")
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation("androidx.compose.foundation:foundation:1.2.0")
    // Material Design
    implementation("androidx.compose.material:material:1.2.0")
    // Material design icons
    implementation("androidx.compose.material:material-icons-core:1.2.0")
    implementation("androidx.compose.material:material-icons-extended:1.2.0")
    // Integration with observables
    implementation("androidx.compose.runtime:runtime-livedata:1.2.0")
    implementation("androidx.compose.runtime:runtime-rxjava2:1.2.0")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.2.0")
}

Thêm Jetpack Compose vào một dự án hiện có

Nếu muốn sử dụng Jetpack Compose trong một dự án hiện có, bạn cần định cấu hình dự án của mình với các chế độ cài đặt và phần phụ thuộc bắt buộc. Để biết thêm thông tin, hãy xem phần Thêm Jetpack Compose vào ứng dụng của bạn.