Ứng dụng hiện tại có thể cần trải qua nhiều lần thiết kế giao diện và định kiểu cho các Khung hiển thị. Khi đưa Compose vào ứng dụng hiện tại, bạn cần di chuyển (các) giao diện để dùng MaterialTheme cho các màn hình Compose. Như vậy, giao diện của ứng dụng sẽ có 2 nguồn đáng tin cậy: giao diện dựa trên Khung hiển thị và giao diện Compose. Mọi thay đổi đối với kiểu sẽ cần được thực hiện ở nhiều nơi.
Để di chuyển ứng dụng của bạn sang Compose, bạn cần tạo phiên bản Compose của giao diện hiện có. Tuy nhiên, trong quá trình di chuyển, bạn tạo càng sớm thì càng phải tốn công duy trì cả giao diện XML và Compose. Đây có thể là một gánh nặng về bảo trì.
Bộ chuyển đổi giao diện Material
Nếu bạn đang sử dụng giao diện Theme.MaterialComponents.* của thư viện MDC-Android trong ứng dụng của mình, thì thư viện Material Theme Adapter (Bộ chuyển đổi giao diện Material) sẽ cho phép bạn dễ dàng dùng lại chủ đề màu sắc, kiểu chữ và hình dạng Material 2 từ giao diện XML dựa trên Khung hiển thị hiện có trong các thành phần kết hợp.
Sử dụng thành phần kết hợp MdcTheme:
import com.google.accompanist.themeadapter.material.MdcTheme
class MdcThemeExample : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Use MdcTheme instead of M2 MaterialTheme
// Colors, typography, and shapes have been read from the
// View-based theme used in this Activity
setContent {
MdcTheme {
// Your app-level composable here
}
}
}
}
Hãy xem tài liệu về thư viện Material Theme Adapter (Bộ chuyển đổi giao diện Material) để biết thêm thông tin.
Bộ chuyển đổi giao diện Material 3
Nếu bạn đang sử dụng giao diện Theme.Material3.* của thư viện MDC-Android trong ứng dụng của mình, thì thư viện Material 3 Theme Adapter (Bộ chuyển đổi giao diện Material 3) sẽ cho phép bạn dễ dàng dùng lại chủ đề màu sắc, kiểu chữ và hình dạng Material 3 từ giao diện XML dựa trên Khung hiển thị hiện có trong các thành phần kết hợp.
Sử dụng thành phần kết hợp Mdc3Theme:
import com.google.accompanist.themeadapter.material3.Mdc3Theme
class Mdc3ThemeExample : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Use Mdc3Theme instead of M3 MaterialTheme
// Color scheme, typography, and shapes have been read from the
// View-based theme used in this Activity
setContent {
Mdc3Theme {
// Your app-level composable here
}
}
}
}
Hãy xem tài liệu về thư viện Material 3 Theme Adapter (Bộ chuyển đổi giao diện Material 3) để biết thêm thông tin.
Bộ chuyển đổi giao diện AppCompat
Thư viện AppCompat Theme Adapter (Bộ chuyển đổi giao diện AppCompat) giúp bạn dễ dàng sử dụng lại các giao diện XML của AppCompat để thiết kế giao diện trong Jetpack Compose. Thư viện này sẽ tạo một MaterialTheme M2 sử dụng các giá trị màu sắc và kiểu chữ từ giao diện của ngữ cảnh.
Sử dụng thành phần kết hợp AppCompatTheme:
import com.google.accompanist.themeadapter.appcompat.AppCompatTheme
class AppCompatThemeExample : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// Colors and typography have been read from the
// View-based theme used in this Activity
// Shapes are the default for M2 as this didn't exist in M1
AppCompatTheme {
// Your app-level composable here
}
}
}
}
Hãy xem tài liệu về thư viện AppCompat Theme Adapter (Bộ chuyển đổi giao diện AppCompat) để biết thêm thông tin.
Thuộc tính giao diện tuỳ chỉnh
Thư viện Core Theme Adapter (Bộ chuyển đổi giao Core) được sử dụng bởi tất cả các thư viện Accompanist Theme Adapter (Bộ chuyển đổi giao diện Accompanist) ở trên và chứa logic phổ biến cho nhiều tài nguyên XML để chuyển đổi Compose. Bạn có thể sử dụng các tiện ích tài nguyên này để phân tích cú pháp các thuộc tính giao diện tuỳ chỉnh.
Hãy xem tài liệu về thư viện Core Theme Adapter (Bộ chuyển đổi giao diện Core) để biết thêm thông tin.
Kiểu thành phần mặc định
Thư viện Accompanist Theme Adapter (Bộ chuyển đổi giao diện Accompanist) không đọc bất kỳ kiểu tiện ích mặc định nào theo giao diện. Nguyên nhân là do Compose không có khái niệm về các thành phần kết hợp mặc định.
Hãy xem bài viết Các hệ thống thiết kế tuỳ chỉnh trong Compose để biết thêm thông tin.
Lớp phủ giao diện
Khi di chuyển các màn hình dựa trên Khung hiển thị sang Compose, hãy lưu ý đến cách sử dụng thuộc tính android:theme. Có thể bạn cần một MaterialTheme mới trong phần đó của cây giao diện người dùng Compose.