Chiến lược di chuyển

Nếu đã có một ứng dụng dựa trên Khung hiển thị, có thể bạn sẽ không muốn viết lại toàn bộ giao diện người dùng cho ứng dụng đó cùng một lúc. Trang này giúp bạn thêm các thành phần Compose mới vào ứng dụng hiện có. Để bắt đầu sử dụng Compose trong ứng dụng, hãy xem bài viết Thiết lập Compose cho một ứng dụng hiện có.

Ngay từ đầu, Jetpack Compose được thiết kế hướng đến khả năng tương tác của Khung hiển thị. Nhờ có chức năng này, bạn có thể di chuyển ứng dụng dựa trên Khung hiển thị hiện có sang Compose mà vẫn có thể tạo các tính năng mới. Để di chuyển sang Compose, bạn nên di chuyển lần lượt tại vị trí Compose và Khung hiển thị cùng tồn tại trong cơ sở mã cho đến khi ứng dụng của bạn hoàn toàn chuyển sang Compose.

Hình 1. Các giai đoạn trong quá trình di chuyển ứng dụng dựa trên Khung hiển thị sang Compose

Để di chuyển ứng dụng của bạn sang Compose, hãy làm theo các bước sau:

1. Tạo màn hình mới bằng Compose.
2. Khi bạn tạo các tính năng, hãy xác định những thành phần có thể tái sử dụng và bắt đầu tạo thư viện gồm các thành phần giao diện người dùng phổ biến.
3. Thay thế các tính năng hiện có theo từng màn hình một.

Tạo màn hình mới bằng Compose

Việc sử dụng Compose để tạo các tính năng mới bao gồm toàn bộ màn hình là cách tốt nhất để tăng tỷ lệ sử dụng Compose. Với chiến lược này, bạn có thể thêm nhiều tính năng và tận dụng lợi ích của Compose mà vẫn đáp ứng được nhu cầu kinh doanh của công ty.

Hình 2. Một màn hình mới được viết trong Compose

Khi sử dụng Compose để tạo màn hình mới trong ứng dụng hiện có, bạn vẫn đang làm việc dưới những hạn chế của cấu trúc ứng dụng. Nếu đang sử dụng Mảnh và thành phần Điều hướng, thì bạn sẽ phải tạo một Mảnh mới và có nội dung của Mảnh đó trong Compose.

Để sử dụng Compose trong một Mảnh, hãy trả về một ComposeView trong phương thức vòng đời onCreateView() của Mảnh. ComposeView cung cấp phương thức setContent() để bạn có thể cung cấp hàm có khả năng kết hợp.

class NewFeatureFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                NewFeatureScreen()
            }
        }
    }
}
MigrationStrategySnippets.kt

Xem ComposeView trong Mảnh để tìm hiểu thêm.

Thêm tính năng mới vào màn hình hiện có

Hình 3. Màn hình hiện tại có Khung hiển thị kết hợp và Compose

Bạn cũng có thể sử dụng Compose trong màn hình dựa trên Khung hiển thị hiện có nếu tính năng mới bạn đang thêm là một phần của màn hình hiện có. Để thực hiện việc này, hãy thêm ComposeView vào Hệ phân cấp khung hiển thị, giống như mọi Khung hiển thị khác.

Ví dụ: giả sử bạn muốn thêm khung hiển thị con vào LinearLayout. Bạn có thể làm việc này trong XML như sau:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/compose_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>
migration_strategy_existing_screens.xml

Sau khi khung hiển thị được tăng cường, bạn có thể tham chiếu ComposeView trong hệ phân cấp và gọi setContent().

Để tìm hiểu thêm về ComposeView, hãy xem Interoperability API (API khả năng tương tác).

Tạo thư viện gồm các thành phần giao diện người dùng phổ biến

Khi tạo các tính năng bằng Compose, bạn sẽ nhanh chóng nhận ra rằng rồi bạn cũng sẽ tạo một thư viện thành phần. Việc tạo một thư viện gồm các thành phần giao diện người dùng phổ biến sẽ cho phép bạn có một nguồn tin cậy duy nhất cho các thành phần này trong ứng dụng và thúc đẩy khả năng tái sử dụng. Sau đó, các tính năng mà bạn tạo có thể phụ thuộc vào thư viện này. Kỹ thuật này đặc biệt hữu ích nếu bạn đang tạo một hệ thống thiết kế tuỳ chỉnh trong Compose.

Tuỳ thuộc vào kích thước của ứng dụng, thư viện này có thể là một gói, mô-đun hoặc mô-đun thư viện riêng biệt. Để biết thêm thông tin về cách sắp xếp các mô-đun trong ứng dụng, hãy xem Hướng dẫn về việc mô-đun hoá ứng dụng Android.

Thay thế các tính năng hiện có bằng Compose

Bên cạnh việc sử dụng Compose để tạo tính năng mới, bạn cũng cần từng bước di chuyển các tính năng hiện có trong ứng dụng để tận dụng Compose.

Việc thiết lập chế độ chỉ Compose cho ứng dụng có thể đẩy nhanh quá trình phát triển, đồng thời giảm kích thước APK và thời gian xây dựng ứng dụng. Hãy xem bài viết So sánh hiệu suất của Compose và Thành phần hiển thị để tìm hiểu thêm.

Lưu ý: Dựa vào kiểm thử giao diện người dùng để đảm bảo bạn không tạo các lượt hồi quy trong quá trình di chuyển. Hãy xem phần Kiểm thử ứng dụng trên Android và Kiểm thử bố cục Compose để tìm hiểu thêm về cách kiểm thử giao diện người dùng.

Màn hình đơn giản

Những nơi đầu tiên cần xem xét khi di chuyển các tính năng hiện có sang Compose là các màn hình đơn giản. Màn hình đơn giản có thể là màn hình chào mừng, màn hình xác nhận hoặc màn hình cài đặt, trong đó dữ liệu hiển thị trong giao diện người dùng là tương đối tĩnh.

Lấy tệp XML sau:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/title_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/title"
      android:textAppearance="?attr/textAppearanceHeadline2" />

  <TextView
      android:id="@+id/subtitle_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/subtitle"
      android:textAppearance="?attr/textAppearanceHeadline6" />

  <TextView
      android:id="@+id/body_text"
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:text="@string/body"
      android:textAppearance="?attr/textAppearanceBody1" />

  <Button
      android:id="@+id/confirm_button"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="@string/confirm"/>
</LinearLayout>
migration_strategy_xml_example.xml

Bạn có thể viết lại tệp XML này trong Compose bằng vài dòng:

@Composable
fun SimpleScreen() {
    Column(Modifier.fillMaxSize()) {
        Text(
            text = stringResource(R.string.title),
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = stringResource(R.string.subtitle),
            style = MaterialTheme.typography.headlineSmall
        )
        Text(
            text = stringResource(R.string.body),
            style = MaterialTheme.typography.bodyMedium
        )
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) {
            Text(text = stringResource(R.string.confirm))
        }
    }
}
MigrationStrategySnippets.kt

Khung hiển thị kết hợp và màn hình Compose

Màn hình đã chứa một chút mã Compose cũng thích hợp để di chuyển hoàn toàn sang Compose. Tuỳ thuộc vào độ phức tạp của màn hình, bạn có thể di chuyển từng phần hoặc toàn bộ màn hình sang Compose. Nếu màn hình bắt đầu bằng Compose trong một cây con của hệ phân cấp giao diện người dùng, bạn sẽ tiếp tục di chuyển các thành phần giao diện người dùng cho đến khi toàn bộ màn hình nằm trong Compose. Phương pháp này còn được gọi là phương pháp từ dưới lên.

Hình 4. Phương pháp từ dưới lên để di chuyển các Khung hiển thị kết hợp và Giao diện người dùng Compose sang Compose

Xoá Mảnh và thành phần Điều hướng

Bạn có thể chuyển sang Navigation Compose (Điều hướng trong Compose) sau khi có thể xoá tất cả các Mảnh và thay thế bằng các thành phần kết hợp tương ứng ở cấp màn hình. Các thành phần kết hợp cấp màn hình có thể chứa kết hợp nội dung Compose và Thành phần hiển thị, nhưng tất cả đích đến điều hướng đều phải là thành phần kết hợp để bật tính năng di chuyển Navigation Compose. Cho đến lúc đó, bạn nên tiếp tục sử dụng thành phần Điều hướng dựa trên mảnh trong cơ sở mã Khung hiển thị và Compose kết hợp. Hãy xem phần Di chuyển Jetpack Navigation sang Navigation Compose để biết thêm thông tin.

Lưu ý: Bạn không bắt buộc phải sử dụng Navigation Compose trong một ứng dụng chỉ dùng Compose. Bạn có thể tiếp tục sử dụng Thành phần điều hướng dựa trên Mảnh, miễn là bạn giữ lại Mảnh để lưu trữ nội dung có thể kết hợp.

Tài nguyên khác

Hãy xem các tài nguyên khác sau đây để tìm hiểu thêm về cách di chuyển ứng dụng hiện có dựa trên Khung hiển thị sang Compose:

• Lớp học lập trình
  • Di chuyển sang Jetpack Compose: Tìm hiểu cách di chuyển một phần của ứng dụng Sunflower sang Compose trong lớp học lập trình này.
• Bài đăng trên blog
  • Migrating Sunflower to Jetpack Compose (Di chuyển Sunflower sang Jetpack Compose): Tìm hiểu cách di chuyển Sunflower sang Compose bằng chiến lược mô tả trên trang này.
  • Jetpack Compose Interop: Using Compose in a RecyclerView (Khả năng tương tác trong Jetpack Compose: Sử dụng Compose trong RecyclerView): Tìm hiểu cách sử dụng Compose hiệu quả trong RecyclerView.

Bước tiếp theo

Giờ đây, bạn đã biết chiến lược mà mình có thể thực hiện để di chuyển ứng dụng hiện có dựa trên Khung hiển thị, hãy khám phá Interoperability API (API Khả năng tương tác) để tìm hiểu thêm.