Chiến lược di chuyển

Nếu sở hữu một ứng dụng có giao diện người 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 sẽ giúp bạn thêm các thành phần Compose mới vào giao diện người 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.

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
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 các tính năng 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 tính năng mới bằng Compose

Việc sử dụng Compose để tạo các tính năng mới 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 các 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.

Màn hình mới

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

Khi sử dụng Compose để tạo các tính năng mới trong ứng dụng hiện có, bạn vẫn đang làm việc dưới những ràng buộc của cấu trúc ứng dụng. Nếu đang dùng Mảnh và Thành phần điều hướng, và tính năng bạn đang tạo cũng cần đến toàn bộ màn hình, thì bạn phải tạo một Mảnh mới nhưng nội dung của Mảnh đó sẽ vẫn nằm 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()
            }
        }
    }
}

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

Màn hình hiện tại

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

Nếu tính năng mới hiển thị trên một màn hình hiện tại, bạn có thể thêm ComposeView vào hệ phân cấp giao diện người dùng, 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 ...>

  <Button ... />

  <TextView ... />

  <androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_view" ... />

</LinearLayout>

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 đưa hoàn toàn ứng dụng của bạn vào trong Compose có thể giúp đẩ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. Xem phần Công thái học dành cho nhà phát triển trong Compose để tìm hiểu thêm.

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>

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))
        }
    }
}

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.

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
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

Sau khi tất cả giao diện người dùng của ứng dụng đều nằm trong Compose, việc sử dụng Mảnh trong ứng dụng sẽ không mang lại nhiều lợi ích. Đến lúc đó, bạn có thể xoá toàn bộ Mảnh và thay thế các Mảnh đó bằng các thành phần kết hợp ở cấp độ màn hình do thành phần Điều hướng trong Compose cung cấp.

Xem bài viết Điều hướng bằng Compose để tìm hiểu thêm.

Bước tiếp theo

Nếu bạn muốn tìm hiểu sâu hơn về cách thêm Compose vào ứng dụng, hãy xem phần Thêm Jetpack Compose vào ứng dụng. Bạn cũng có thể xem những tài nguyên sau: