Xem nhanh cung cấp API để quản lý giao diện màu. Đối với các thuộc tính kiểu khác, chẳng hạn như TextStyle, hãy khai báo các biến cấp cao nhất.
Thêm màu
Xem nhanh cung cấp cách triển khai màu Material ngay từ đầu. Để sử dụng giao diện tích hợp sẵn, hãy gói thành phần kết hợp cấp cao nhất bằng GlanceTheme, như minh hoạ trong ví dụ sau.
Trên các thiết bị hỗ trợ màu động, giao diện này được lấy từ màu nền tảng dành riêng cho người dùng. Trên các thiết bị khác, điều này sẽ quay lại dùng giao diện cơ sở Material. Sử dụng GlanceTheme.colors để tạo kiểu với các màu từ giao diện được gói. Bạn có thể sử dụng các giá trị này trong giao diện ở bất kỳ nơi nào cần tô màu.
override suspend fun provideGlance(context: Context, id: GlanceId) {
provideContent {
GlanceTheme {
MyContent()
}
}
}
@Composable
private fun MyContent() {
Image(
colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
// ...
)
}
Để tuỳ chỉnh giao diện, bạn có thể truyền colors đến GlanceTheme. Xem nhanh cung cấp thư viện khả năng tương tác androidx.glance:glance-material cho Material 2 và androidx.glance:glance-material3 để hỗ trợ màu sắc trong Material 3.
Ví dụ: cung cấp màu Material hiện có của ứng dụng cho API ColorProviders để tạo bảng phối màu Xem nhanh, như trong đoạn mã sau:
// Remember, use the Glance imports
// import androidx.glance.material3.ColorProviders
// Example Imports from your own app
// import com.example.myapp.ui.theme.DarkColors
// import com.example.myapp.ui.theme.LightColors
object MyAppWidgetGlanceColorScheme {
val colors = ColorProviders(
light = LightColors,
dark = DarkColors
)
}
Cung cấp màu từ lược đồ đến GlanceTheme bao gồm tất cả các thành phần kết hợp của bạn, như minh hoạ trong ví dụ sau:
override suspend fun provideGlance(context: Context, id: GlanceId) {
// ...
provideContent {
GlanceTheme(colors = MyAppWidgetGlanceColorScheme.colors) {
MyContent()
}
}
}
@Composable
private fun MyContent() {
Image(
colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
// ...
)
}
Nếu muốn sử dụng màu động từ hình nền khi được hỗ trợ và bảng phối màu của ứng dụng, bạn có thể truyền có điều kiện bảng phối màu của ứng dụng trong GlanceTheme. Điều này được thể hiện trong đoạn mã sau:
override suspend fun provideGlance(context: Context, id: GlanceId) {
provideContent {
GlanceTheme(
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S)
GlanceTheme.colors
else
MyAppWidgetGlanceColorScheme.colors
) {
MyContent()
}
}
}
@Composable
private fun MyContent() {
// ...
Image(
colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
// ...
)
}
Thêm hình dạng
Để cung cấp các hình dạng hoặc bóng đặc biệt cho tiện ích ứng dụng, hãy sử dụng Android Drawables API (API Android có thể vẽ).
Ví dụ: đoạn mã sau đây cho biết cách tạo một đối tượng có thể vẽ (một hình dạng):
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="16dp"/>
<stroke android:color="@color/outline_color" android:width="1dp"/>
</shape>
Cung cấp giá trị này cho thành phần kết hợp mục tiêu:
GlanceModifier.background(
imageProvider = ImageProvider(R.drawable.button_outline)
)