Jetpack Compose hỗ trợ khả năng tương tác với Khung hiển thị – bạn có thể dùng Compose trong Khung hiển thị và Khung hiển thị trong Compose. Điều này cho phép sử dụng Compose trong các ứng dụng hiện có dựa trên Khung hiển thị mà không cần phải di chuyển tất cả Khung hiển thị ngay lập tức.
Các bước di chuyển
- Tạo kế hoạch: Tạo một kế hoạch toàn diện và từng bước để thực hiện quy trình di chuyển. Bạn nên có một danh sách tồn đọng các công việc di chuyển được ưu tiên.
- Xác định ứng cử viên XML để di chuyển : Xác định và bắt đầu từ các thành phần nhỏ nhất là các nút lá trong hệ phân cấp, đồng thời mở rộng kế hoạch di chuyển từ dưới lên đến các thành phần cao hơn theo từng bước trong hệ phân cấp. Các ứng dụng phù hợp để di chuyển ban đầu là những ứng dụng nhỏ, không trạng thái và có ít phần phụ thuộc hơn.
- Phân tích hệ phân cấp: Sau khi xác định View XML cần di chuyển, hãy phân tích cấu trúc và cách triển khai bố cục XML của View đó.
- Chụp trạng thái ban đầu: Chạy một quy trình kiểm thử ảnh chụp màn hình để chụp trạng thái ban đầu của Khung hiển thị XML đã chọn.
- Điều kiện tiên quyết: Thiết lập các phần phụ thuộc Compose Xác định xem dự án có các phần phụ thuộc Compose và Trình biên dịch được thiết lập hay không. Nếu không, hãy làm theo hướng dẫn Thiết lập các phần phụ thuộc và trình biên dịch của Compose.
- Điều kiện tiên quyết: Thiết lập tính năng tạo chủ đề trong Compose Xác định xem dự án đã thiết lập tính năng tạo chủ đề trong Compose hay chưa. Nếu không, hãy làm theo hướng dẫn về chủ đề Compose. Giữ nguyên giao diện XML ban đầu trong khi ứng dụng đang tương tác Di chuyển giao diện XML sang Compose để hiểu các mẫu về cách khai báo và cho đến khi dự án được di chuyển hoàn toàn sang Compose.
- Di chuyển Khung hiển thị XML sang Compose: Bắt đầu chuyển đổi mã XML sang Compose, áp dụng giao diện phù hợp và thêm bản Xem trước Compose cho các thành phần kết hợp đã di chuyển. Đối với các trường hợp di chuyển phổ biến, hãy tham khảo các tài nguyên bổ sung. Ví dụ: để di chuyển sang Lazy API trong Compose, hãy làm theo các bước trong phần Di chuyển RecyclerView sang Compose.
- Thay thế cách sử dụng: Thay thế cách sử dụng trước đây của Khung hiển thị XML để sử dụng thành phần Compose mới. Để thêm Compose vào Khung hiển thị, hãy làm theo các bước trong phần Compose trong Khung hiển thị. Để thêm các thành phần hiển thị trong Compose, hãy làm theo các bước trong phần Các thành phần hiển thị trong Compose.
- Xác thực quá trình di chuyển: Xác minh rằng trạng thái ban đầu được ghi lại trong kiểm thử ảnh chụp màn hình giống với Bản xem trước Compose của thành phần kết hợp đã di chuyển. Nếu không khớp, hãy lặp lại trên giao diện người dùng có khả năng kết hợp mới và cải thiện giao diện đó để điều chỉnh cho phù hợp với trạng thái ban đầu. Tạo các chương trình kiểm thử giao diện người dùng Compose mới cho thành phần kết hợp mới.
- Xoá XML: Sau khi thành phần kết hợp mới di chuyển khớp với giao diện người dùng XML ban đầu, hãy xoá mã Lớp hiển thị XML không dùng nữa và các kiểm thử của mã đó.
Các trường hợp di chuyển phổ biến
Xác minh rằng các tiện ích dp và sp được dùng (16.dp, 20.sp) trong các thành phần kết hợp.
Nếu tools:text có trong Khung hiển thị XML, hãy dùng thành phần kết hợp @Preview riêng biệt.
Chuyển đổi thuộc tính thành giá trị điều chỉnh
Hầu hết các thuộc tính XML đều trở thành một phần của chuỗi modifier hoặc các tham số của hàm có khả năng kết hợp.
| Thuộc tính XML | Tương đương với Compose |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
(Hành vi mặc định, thường không cần có giá trị sửa đổi) |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp) (Khoảng đệm bên ngoài) |
android:gravity="center" |
contentAlignment = Alignment.Center (Hộp) hoặc horizontalAlignment / verticalArrangement (Cột/Hàng) |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
Gói trong khối if (visible) { ... } |
Di chuyển kiểu (styles.xml)
Các kiểu XML thường kết hợp nhiều thuộc tính để tạo ra một kiểu. Trong Compose, bạn có thể thực hiện việc này bằng cách tạo một biến thể thành phần kết hợp có kiểu cụ thể.
Cung cấp các hàm @Composable riêng biệt được đặt tên theo kiểu và thành phần cơ sở, để biểu thị sự khác biệt về kiểu dáng và trường hợp sử dụng cho các thành phần đó.
- Mẫu: Nếu một phần tử XML sử dụng kiểu tuỳ chỉnh (ví dụ:
style="@style/MyPrimaryButton"), đừng cố gắng sao chép kiểu cùng dòng. Thay vào đó, hãy đề xuất tạo một thành phần kết hợp cụ thể. - Ví dụ:
- XML:
<Button style="@style/MyPrimaryButton" ... /> - Soạn:
MyPrimaryButton(onClick = { ... })
- XML:
- Nhóm thuộc tính chung: Nếu một kiểu đặt các đối tượng sửa đổi chung (chẳng hạn như khoảng đệm + chiều cao), hãy trích xuất các đối tượng đó vào một thuộc tính tiện ích có thể đọc hoặc một biến Modifier dùng chung.