ใช้ธีมข้อมูลโดยย่อ

Glance มี API สำหรับจัดการธีมสี สำหรับแอตทริบิวต์สไตล์อื่นๆ เช่น TextStyle ให้ประกาศตัวแปรระดับบนสุด

เพิ่มสี

Glance มีการติดตั้งใช้งานสี Material ที่พร้อมใช้งานทันที หากต้องการใช้ธีมในตัว ให้รวม Composable ระดับบนสุดด้วย GlanceTheme ดังที่แสดงในตัวอย่างต่อไปนี้

ในอุปกรณ์ที่รองรับสีแบบไดนามิก ธีมนี้จะมาจากสีของแพลตฟอร์มที่ผู้ใช้กำหนด ในอุปกรณ์อื่นๆ ระบบจะเปลี่ยนกลับไปใช้ธีมพื้นฐานของ Material ใช้ GlanceTheme.colors เพื่อจัดสไตล์ด้วยสีจากธีมที่รวมไว้ คุณสามารถใช้ค่าเหล่านี้จากธีมได้ทุกที่ที่ต้องการสี

override suspend fun provideGlance(context: Context, id: GlanceId) {

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...

    )
}

หากต้องการปรับแต่งธีม คุณสามารถส่ง colors ไปยัง GlanceTheme ได้ Glance มีไลบรารีการทำงานร่วมกัน androidx.glance:glance-material สำหรับ Material 2 และ androidx.glance:glance-material3 สำหรับการรองรับสี Material 3

เช่น ระบุสี Material ที่มีอยู่ของแอปให้กับ ColorProviders API เพื่อสร้างรูปแบบสี Glance ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

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

ระบุสีจากรูปแบบให้กับ GlanceTheme ที่รวม Composable ทั้งหมดไว้ ดังที่แสดงในตัวอย่างต่อไปนี้

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),
        // ...
    )
}

หากต้องการใช้สีแบบไดนามิกจากวอลเปเปอร์เมื่อรองรับ และใช้รูปแบบสีของแอปในกรณีอื่นๆ คุณสามารถส่งรูปแบบสีของแอปแบบมีเงื่อนไขใน GlanceTheme ได้ ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

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),
        // ...
    )
}

เพิ่มรูปร่าง

หากต้องการกำหนดรูปร่างหรือเงาพิเศษให้กับวิดเจ็ตแอป ให้ใช้ Android Drawables API

ตัวอย่างเช่น ข้อมูลโค้ดต่อไปนี้แสดงวิธีสร้าง Drawable (รูปร่าง)

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="16dp"/>
    <stroke android:color="@color/outline_color" android:width="1dp"/>
</shape>

ระบุให้กับ Composable เป้าหมาย ดังนี้

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

ก่อนหน้า
สร้าง UI ด้วยข้อมูลโดยย่อ
ถัดไป
สรุปความสามารถในการทำงานร่วมกัน