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ư 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, giao diện này sẽ quay lại giao diện cơ sở của Material. Sử dụng GlanceTheme.colors để tạo kiểu với các màu trong 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. Glance 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 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 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
    )
}

Cung cấp màu từ bảng phối màu cho GlanceTheme bao bọc tất cả thành phần kết hợp của bạn, 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),
        // ...
    )
}

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 bảng phối màu của ứng dụng theo điều kiện 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 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.

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

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