Triển khai giao diện Xem nhanh

Glance cung cấp một API để quản lý chủ đề màu sắc. Đố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

Glance 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 bắt nguồn 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, công cụ này sẽ quay lại sử dụng Material giao diện cơ sở. Sử dụng GlanceTheme.colors để tạo kiểu bằng các màu từ chế độ gói chủ đề. 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),
        // ...

    )
}
GlanceSnippets.kt

Để tuỳ chỉnh giao diện, bạn có thể truyền colors vào 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 cho màu Material 3 của Google.

Ví dụ: cung cấp màu Material hiện có của ứng dụng cho ColorProviders API để tạo bảng phối màu Glance, 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
    )
}
GlanceSnippets.kt

Cung cấp màu từ lược đồ cho GlanceTheme để bao bọc tất cả thành phần kết hợp, như 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),
        // ...
    )
}
GlanceSnippets.kt

Nếu bạn muốn sử dụng màu động trên hình nền (khi được hỗ trợ), Nếu không, bạn có thể chuyển bảng phối màu của ứng dụng một cách có điều kiện trong GlanceTheme. Thông tin này được minh hoạ 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),
        // ...
    )
}
GlanceSnippets.kt

Thêm hình dạng

Để tạo hình dạng hoặc bóng đặc biệt cho tiện ích ứng dụng, hãy sử dụng API đối tượng 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ẽ (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>
button_outline.xml

Cung cấp cho thành phần kết hợp đích:

GlanceModifier.background(
    imageProvider = ImageProvider(R.drawable.button_outline)
)
GlanceSnippets.kt

Trước
Xây dựng giao diện người dùng bằng tính năng Xem nhanh
Tiếp
Khả năng tương tác của nhanh