ดีไซน์ Material 3 ใน Compose

Jetpack Compose มีการใช้งาน Material You และ Material 3 Expressive ซึ่งเป็นวิวัฒนาการขั้นถัดไปของ Material Design M3 Expressive เป็นส่วนขยายของ Material Design 3 ซึ่งรวมถึงการอัปเดตธีม คอมโพเนนต์ การเคลื่อนไหว การจัดพิมพ์ และอื่นๆ ที่ได้รับการสนับสนุนจากการวิจัย ทั้งหมดนี้ออกแบบมาเพื่อช่วยให้คุณสร้างผลิตภัณฑ์ที่น่าสนใจและเป็นที่ต้องการซึ่งผู้ใช้ชื่นชอบ นอกจากนี้ยังรองรับฟีเจอร์การปรับเปลี่ยนในแบบของคุณของ Material You เช่น สีแบบไดนามิก M3 Expressive ช่วยเสริมสไตล์ภาพและ UI ของระบบ Android 16

ด้านล่างนี้เราจะสาธิตการใช้งาน Material Design 3 โดยใช้แอปตัวอย่าง Reply เป็นตัวอย่าง ตัวอย่าง Reply อิงตาม Material Design 3 ทั้งหมด

การขึ้นต่อกัน

หากต้องการเริ่มใช้ Material 3 ในแอป Compose ให้เพิ่มทรัพยากร Dependency ของ Compose Material 3 ลงในไฟล์ build.gradle ดังนี้

implementation "androidx.compose.material3:material3:$material3_version"

เมื่อเพิ่มทรัพยากร Dependency แล้ว คุณจะเริ่มเพิ่มระบบการออกแบบ Material Design ซึ่งรวมถึงสี ตัวพิมพ์ และรูปร่างลงในแอปได้

API เวอร์ชันทดลอง

API ของ M3 บางรายการถือว่าอยู่ในขั้นทดลอง ในกรณีเช่นนี้ คุณต้องเลือกใช้ที่ระดับฟังก์ชันหรือไฟล์โดยใช้คำอธิบายประกอบ ExperimentalMaterial3Api ดังนี้

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

การกำหนดธีม Material

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

Jetpack Compose นำแนวคิดเหล่านี้ไปใช้กับ Composable MaterialTheme ของ M3 ดังนี้

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}
Material3Snippets.kt

หากต้องการกำหนดธีมเนื้อหาของแอปพลิเคชัน ให้กำหนดรูปแบบสี ตัวพิมพ์ และรูปร่างที่เฉพาะเจาะจงสำหรับแอปของคุณ

รูปแบบสี

รากฐานของรูปแบบสีคือชุดสีหลัก 5 สี สีแต่ละสีเหล่านี้เกี่ยวข้องกับชุดสี 13 โทน ซึ่งคอมโพเนนต์ Material 3 ใช้ ตัวอย่างเช่น รูปแบบสีสำหรับธีมสว่างของตอบกลับมีดังนี้

อ่านข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบสีและบทบาทของสี

สร้างรูปแบบสี

แม้ว่าคุณจะสร้าง ColorScheme ที่กำหนดเองได้ด้วยตนเอง แต่การสร้างโดยใช้สีต้นทางจากแบรนด์มักจะง่ายกว่า เครื่องมือ Material Theme Builder ช่วยให้คุณทำสิ่งนี้ได้ และเลือกส่งออกโค้ดการกำหนดธีม Compose ได้ ระบบจะสร้างไฟล์ต่อไปนี้

• Color.kt มีสีของธีมพร้อมบทบาททั้งหมดที่กำหนดไว้สำหรับทั้งสีธีมสว่างและธีมมืด

val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
// ..
// ..

val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
// ..
// ..
Material3Snippets.kt

• Theme.kt มีการตั้งค่าสำหรับรูปแบบสีสว่างและสีมืด รวมถึงธีมของแอป

private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    // ..
)
private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    // ..
)

@Composable
fun ReplyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme =
        if (!darkTheme) {
            LightColorScheme
        } else {
            DarkColorScheme
        }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}
Material3Snippets.kt

หากต้องการรองรับธีมสว่างและธีมมืด ให้ใช้ isSystemInDarkTheme() กำหนดรูปแบบสีที่จะใช้ ได้แก่ สว่างหรือมืด โดยอิงตามการตั้งค่าระบบ

รูปแบบสีแบบไดนามิก

สีแบบไดนามิกเป็นส่วนสำคัญของ Material You ซึ่งอัลกอริทึมจะดึงสีแบบกำหนดเองจากวอลเปเปอร์ของผู้ใช้เพื่อนำไปใช้กับแอปและ UI ของระบบ ระบบจะใช้ Color Palette นี้เป็นจุดเริ่มต้นในการสร้างรูปแบบสีอ่อนและสีเข้ม

สีแบบไดนามิกใช้ได้ใน Android 12 ขึ้นไป หากสีแบบไดนามิกพร้อมใช้งาน คุณจะตั้งค่าColorSchemeแบบไดนามิกได้ หากไม่ คุณควรเปลี่ยนไปใช้ColorSchemeแบบสว่างหรือมืดที่กำหนดเอง

ColorScheme มีฟังก์ชัน Builder สำหรับสร้างรูปแบบสีอ่อนหรือเข้มแบบไดนามิก ดังนี้

// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
    dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
    dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
    darkTheme -> DarkColorScheme
    else -> LightColorScheme
}
Material3Snippets.kt

การใช้สี

คุณสามารถเข้าถึงสีของธีม Material ในแอปได้ผ่าน MaterialTheme.colorScheme ดังนี้

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)
Material3Snippets.kt

บทบาทของสีแต่ละสีสามารถใช้ได้ในหลากหลายตำแหน่ง โดยขึ้นอยู่กับสถานะ ความโดดเด่น และการเน้นของคอมโพเนนต์

• สีหลักคือสีพื้นฐานที่ใช้สำหรับองค์ประกอบหลัก เช่น ปุ่มที่โดดเด่น สถานะที่ใช้งานอยู่ และสีอ่อนของพื้นผิวที่ยกขึ้น
• สีหลักรองจะใช้กับคอมโพเนนต์ที่โดดเด่นน้อยกว่าใน UI เช่น ชิปตัวกรอง และเพิ่มโอกาสในการแสดงสี
• ระบบจะใช้สีหลักตติยภูมิเพื่อรับบทบาทของสีเฉพาะจุดที่ตัดกัน ซึ่งสามารถใช้เพื่อปรับสมดุลสีปฐมภูมิและสีทุติยภูมิ หรือดึงดูดความสนใจไปยังองค์ประกอบหนึ่งๆ ได้มากขึ้น

การออกแบบแอปตัวอย่าง Reply ใช้สี On-Primary-Container ที่ด้านบนของ Primary-Container เพื่อเน้นรายการที่เลือก

Card(
    colors = CardDefaults.cardColors(
        containerColor =
        if (isSelected) MaterialTheme.colorScheme.primaryContainer
        else
            MaterialTheme.colorScheme.surfaceVariant
    )
) {
    Text(
        text = "Dinner club",
        style = MaterialTheme.typography.bodyLarge,
        color =
        if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
        else MaterialTheme.colorScheme.onSurface,
    )
}
Material3Snippets.kt

ที่นี่ คุณจะเห็นในลิ้นชักการนำทางของ Reply ว่ามีการใช้สีคอนเทนเนอร์รองและระดับที่ 3 ในคอนทราสต์เพื่อสร้างการเน้นและเน้นเสียงอย่างไร

การพิมพ์

Material Design 3 กำหนดสเกลประเภท ซึ่งรวมถึงรูปแบบข้อความที่ปรับมาจาก Material Design 2 เราได้ปรับให้การตั้งชื่อและการจัดกลุ่มเข้าใจง่ายขึ้นเป็นจอแสดงผล พาดหัว ชื่อ เนื้อหา และป้ายกำกับ โดยแต่ละรายการจะมีขนาดใหญ่ กลาง และเล็ก

กำหนดแบบตัวพิมพ์

Compose มีคลาส M3 Typography พร้อมกับคลาส TextStyle และที่เกี่ยวข้องกับแบบอักษรที่มีอยู่เพื่อจำลองสเกลประเภท Material 3 ตัวสร้าง Typography มีค่าเริ่มต้นสำหรับแต่ละสไตล์ คุณจึงละเว้นพารามิเตอร์ที่ไม่ต้องการปรับแต่งได้ ดังนี้

val replyTypography = Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 22.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.sp
    ),
    titleMedium = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.15.sp
    ),
    // ..
)
// ..
Material3Snippets.kt

ผลิตภัณฑ์ของคุณอาจไม่จำเป็นต้องใช้สไตล์เริ่มต้นทั้ง 15 สไตล์จากสเกลประเภท Material Design ในตัวอย่างนี้ มีการเลือกขนาด 5 ขนาดสำหรับชุดที่ลดลง ส่วนขนาดที่เหลือจะถูกละเว้น

คุณปรับแต่งการจัดพิมพ์ได้โดยเปลี่ยนค่าเริ่มต้นของ TextStyle และพร็อพเพอร์ตี้ที่เกี่ยวข้องกับแบบอักษร เช่น fontFamily และ letterSpacing

bodyLarge = TextStyle(
    fontWeight = FontWeight.Normal,
    fontFamily = FontFamily.SansSerif,
    fontStyle = FontStyle.Italic,
    fontSize = 16.sp,
    lineHeight = 24.sp,
    letterSpacing = 0.15.sp,
    baselineShift = BaselineShift.Subscript
),
Material3Snippets.kt

เมื่อกำหนด Typography แล้ว ให้ส่งไปยัง MaterialTheme ของ M3 ดังนี้

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}
Material3Snippets.kt

ใช้รูปแบบข้อความ

คุณสามารถเรียกข้อมูลแบบตัวพิมพ์ที่ระบุไว้ใน MaterialTheme Composable ของ M3 ได้โดยใช้ MaterialTheme.typography ดังนี้

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)
Material3Snippets.kt

อ่านข้อมูลเพิ่มเติมเกี่ยวกับหลักเกณฑ์ของ Material ในการใช้ตัวพิมพ์

รูปทรง

พื้นผิว Material แสดงได้หลายรูปทรง รูปร่างจะดึงดูดความสนใจ ระบุคอมโพเนนต์ สื่อสารสถานะ และแสดงแบรนด์

สเกลรูปร่างจะกำหนดสไตล์ของมุมคอนเทนเนอร์ โดยมีระดับความโค้งมนตั้งแต่สี่เหลี่ยมจัตุรัสไปจนถึงวงกลมเต็มวง

กำหนดรูปร่าง

Compose มีคลาส Shapes ของ M3 พร้อมพารามิเตอร์ที่ขยายเพื่อรองรับรูปร่างใหม่ของ M3 สเกลรูปร่างของ M3 จะคล้ายกับสเกลประเภท ซึ่งช่วยให้แสดงรูปร่างที่สื่อความหมายได้หลากหลายใน UI

รูปร่างมีขนาดต่างๆ ดังนี้

• เล็กพิเศษ
• เล็ก
• ปานกลาง
• ใหญ่
• ใหญ่พิเศษ

โดยค่าเริ่มต้น รูปร่างแต่ละรายการจะมีค่าเริ่มต้น แต่คุณสามารถลบล้างค่าเหล่านั้นได้ ดังนี้

val replyShapes = Shapes(
    extraSmall = RoundedCornerShape(4.dp),
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp),
    extraLarge = RoundedCornerShape(24.dp)
)
Material3Snippets.kt

เมื่อกำหนด Shapes แล้ว คุณสามารถส่งต่อไปยัง MaterialTheme ของ M3 ได้ดังนี้

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}
Material3Snippets.kt

ใช้รูปร่าง

คุณสามารถปรับแต่งสเกลรูปร่างสำหรับคอมโพเนนต์ทั้งหมดใน MaterialTheme หรือจะทำทีละคอมโพเนนต์ก็ได้

ใช้รูปร่างขนาดกลางและขนาดใหญ่ที่มีค่าเริ่มต้นดังนี้

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}
Material3Snippets.kt

ยังมีรูปร่างอีก 2 แบบ ได้แก่ RectangleShape และ CircleShape ซึ่งเป็นส่วนหนึ่งของ Compose รูปทรงสี่เหลี่ยมผืนผ้าไม่มีรัศมีเส้นขอบ และรูปทรงวงกลมแสดงขอบวงกลมเต็ม:

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
Material3Snippets.kt

ตัวอย่างด้านล่างแสดงคอมโพเนนต์บางส่วนที่มีการใช้ค่ารูปร่างเริ่มต้น

อ่านข้อมูลเพิ่มเติมเกี่ยวกับหลักเกณฑ์ของ Material ในการใช้รูปร่าง

การเน้น

การเน้นใน M3 จะใช้รูปแบบต่างๆ ของสีและชุดค่าผสมสีบนสี ใน M3 มี 2 วิธีในการเพิ่มการเน้นให้กับ UI ดังนี้

• การใช้สีพื้นผิว สีพื้นผิวที่แตกต่าง และสีพื้นหลังร่วมกับสีบนพื้นผิว สีบนพื้นผิวที่แตกต่างจากระบบสี M3 ที่ขยาย ตัวอย่างเช่น สามารถใช้ surface กับ on-surface-variant และใช้ surface-variant กับ on-surface เพื่อเน้นระดับที่แตกต่างกันได้

• การใช้ความหนาของแบบอักษรที่แตกต่างกันสำหรับข้อความ จากด้านบน คุณจะเห็นว่าคุณสามารถระบุน้ำหนักที่กำหนดเองให้กับสเกลประเภทของเราเพื่อเน้นข้อความที่แตกต่างกันได้

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)
Material3Snippets.kt

ระดับความสูง

Material 3 แสดงระดับความสูงโดยใช้การวางซ้อนสีโทนเป็นหลัก นี่เป็นวิธีใหม่ในการแยกความแตกต่างระหว่างคอนเทนเนอร์และพื้นผิวออกจากกัน โดยการเพิ่มระดับโทนสีจะใช้โทนสีที่โดดเด่นมากขึ้น นอกเหนือจากเงา

การวางซ้อนระดับความสูงในธีมมืดยังเปลี่ยนเป็นการวางซ้อนสีโทนเดียวใน Material 3 ด้วย สีที่วางซ้อนจะมาจากช่องสีหลัก

Surface ของ M3 ซึ่งเป็น Composable ที่อยู่เบื้องหลังคอมโพเนนต์ M3 ส่วนใหญ่ รองรับทั้งการยกระดับโทนสีและเงา ดังนี้

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}
Material3Snippets.kt

องค์ประกอบของ Material

Material Design มาพร้อมกับคอมโพเนนต์ Material ที่หลากหลาย (เช่น ปุ่ม ชิป การ์ด แถบการนำทาง) ซึ่งเป็นไปตามการกำหนดธีม Material อยู่แล้ว และช่วยให้คุณสร้างแอป Material Design ที่สวยงามได้ คุณเริ่มใช้คอมโพเนนต์ที่มีพร็อพเพอร์ตี้เริ่มต้นได้ทันที

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}
Material3Snippets.kt

M3 มีคอมโพเนนต์เดียวกันหลายเวอร์ชันเพื่อใช้ในบทบาทต่างๆ ตามการเน้นและความสนใจ

• ปุ่มการทำงานแบบลอยแบบขยายสำหรับการดำเนินการที่เน้นมากที่สุด

ExtendedFloatingActionButton(
    onClick = { /*..*/ },
    modifier = Modifier
) {
    Icon(
        imageVector = Icons.Default.Edit,
        contentDescription = stringResource(id = R.string.edit),
    )
    Text(
        text = stringResource(id = R.string.add_entry),
    )
}
Material3Snippets.kt

• ปุ่มแบบทึบสำหรับการดำเนินการที่เน้นสูง

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}
Material3Snippets.kt

• ปุ่มข้อความสำหรับการดำเนินการที่เน้นน้อย

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}
Material3Snippets.kt

อ่านข้อมูลเพิ่มเติมเกี่ยวกับปุ่มและคอมโพเนนต์อื่นๆ ของ Material Material 3 มีชุดคอมโพเนนต์ที่หลากหลาย เช่น ปุ่ม แถบแอป คอมโพเนนต์การนำทางที่ออกแบบมาโดยเฉพาะสำหรับ Use Case และขนาดหน้าจอที่แตกต่างกัน

คอมโพเนนต์การนำทาง

นอกจากนี้ Material ยังมีคอมโพเนนต์การนำทางหลายรายการที่ช่วยคุณใช้การนำทาง โดยขึ้นอยู่กับขนาดและสถานะหน้าจอที่แตกต่างกัน

NavigationBar ใช้สำหรับอุปกรณ์ขนาดกะทัดรัดเมื่อคุณต้องการกำหนดเป้าหมายปลายทางไม่เกิน 5 รายการ

NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}
Material3Snippets.kt

NavigationRail ใช้สำหรับแท็บเล็ตหรือโทรศัพท์ขนาดเล็กถึงขนาดกลางในโหมดแนวนอน ซึ่งช่วยให้ผู้ใช้ใช้งานได้สะดวกและปรับปรุงประสบการณ์ของผู้ใช้สำหรับอุปกรณ์เหล่านั้น

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}
Material3Snippets.kt

ตอบกลับโดยใช้ทั้ง 2 อย่างในธีมเริ่มต้นเพื่อมอบประสบการณ์การใช้งานที่สมจริงสำหรับอุปกรณ์ทุกขนาด

NavigationDrawer ใช้สำหรับแท็บเล็ตขนาดกลางถึงขนาดใหญ่ซึ่งมีพื้นที่เพียงพอที่จะแสดงรายละเอียด คุณใช้ทั้ง PermanentNavigationDrawer หรือ ModalNavigationDrawer ร่วมกับ NavigationRail ได้

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}
Material3Snippets.kt

ตัวเลือกการนำทางช่วยปรับปรุงประสบการณ์ของผู้ใช้ การยศาสตร์ และความสามารถในการเข้าถึง ดูข้อมูลเพิ่มเติมเกี่ยวกับคอมโพเนนต์การนำทาง Material ได้ใน Codelab แบบปรับอัตโนมัติของ Compose

ปรับแต่งธีมของคอมโพเนนต์

M3 ส่งเสริมการปรับเปลี่ยนในแบบของคุณและความยืดหยุ่น คอมโพเนนต์ทั้งหมดมีสีเริ่มต้นที่ใช้กับคอมโพเนนต์ แต่จะแสดง API ที่ยืดหยุ่นเพื่อปรับแต่งสีหากจำเป็น

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

val customCardColors = CardDefaults.cardColors(
    contentColor = MaterialTheme.colorScheme.primary,
    containerColor = MaterialTheme.colorScheme.primaryContainer,
    disabledContentColor = MaterialTheme.colorScheme.surface,
    disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
    defaultElevation = 8.dp,
    pressedElevation = 2.dp,
    focusedElevation = 4.dp
)
Card(
    colors = customCardColors,
    elevation = customCardElevation
) {
    // m3 card content
}
Material3Snippets.kt

อ่านข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่ง Material 3

UI ของระบบ

บางแง่มุมของ Material You มาจากรูปแบบภาพและ UI ของระบบใหม่ใน Android 12 ขึ้นไป การเปลี่ยนแปลงที่สำคัญ 2 ส่วนคือเอฟเฟกต์ริปเปิลและการเลื่อนเกินขอบเขต คุณไม่จำเป็นต้องดำเนินการใดๆ เพิ่มเติมเพื่อใช้การเปลี่ยนแปลงเหล่านี้

ระลอกคลื่น

ตอนนี้เอฟเฟกต์ Ripple จะใช้ประกายแสงแบบนุ่มนวลเพื่อส่องสว่างพื้นผิวเมื่อกด Compose Material Ripple ใช้ RippleDrawable ของแพลตฟอร์มเป็นส่วนประกอบพื้นฐานในการทำงานบน Android ดังนั้นเอฟเฟกต์ระลอกคลื่นแบบประกายจึงพร้อมใช้งานใน Android 12 ขึ้นไปสำหรับคอมโพเนนต์ Material ทั้งหมด

การเลื่อนเกิน

ตอนนี้การเลื่อนเกินจะใช้เอฟเฟกต์ยืดที่ขอบของคอนเทนเนอร์การเลื่อน การเลื่อนเกินแบบยืดจะเปิดอยู่โดยค่าเริ่มต้นใน Composable ของคอนเทนเนอร์การเลื่อน เช่น LazyColumn, LazyRow และ LazyVerticalGrid ใน Compose Foundation 1.1.0 ขึ้นไป ไม่ว่าจะเป็นระดับ API ใดก็ตาม

การช่วยเหลือพิเศษ

มาตรฐานการช่วยเหลือพิเศษที่สร้างขึ้นในคอมโพเนนต์ Material ได้รับการออกแบบมาเพื่อเป็นรากฐานสำหรับการออกแบบผลิตภัณฑ์ที่ครอบคลุม การทำความเข้าใจการช่วยเหลือพิเศษของผลิตภัณฑ์จะช่วยเพิ่มความสามารถในการใช้งานสำหรับผู้ใช้ทุกคน รวมถึงผู้ที่มีสายตาเลือนราง ตาบอด มีความบกพร่องทางการได้ยิน มีความบกพร่องทางสติปัญญา มีความบกพร่องทางการเคลื่อนไหว หรือมีความพิการตามสถานการณ์ (เช่น แขนหัก)

การช่วยเหลือพิเศษด้านสี

สีแบบไดนามิกได้รับการออกแบบมาให้เป็นไปตามมาตรฐานการช่วยเหลือพิเศษสำหรับคอนทราสต์ของสี ระบบชุดสีเป็นสิ่งสำคัญในการทำให้รูปแบบสีเข้าถึงได้โดยค่าเริ่มต้น

ระบบสีของ Material มีค่าโทนสีและการวัดมาตรฐานที่สามารถใช้เพื่อให้เป็นไปตามอัตราส่วนคอนทราสต์ที่เข้าถึงได้

คอมโพเนนต์ Material และธีมแบบไดนามิกทั้งหมดใช้บทบาทสีข้างต้นจากชุดจานสีโทนสีที่เลือกไว้เพื่อให้เป็นไปตามข้อกำหนดด้านการช่วยเหลือพิเศษอยู่แล้ว อย่างไรก็ตาม หากคุณกำลังปรับแต่งคอมโพเนนต์ ให้ตรวจสอบว่าได้ใช้บทบาทสีที่เหมาะสมและหลีกเลี่ยงความไม่สอดคล้องกัน

ใช้สี On-Primary ด้านบนสีปฐมภูมิ และใช้สี On-Primary-Container ด้านบนสี Primary-Container และใช้สีเดียวกันสำหรับสีเฉพาะจุดและสีกลางอื่นๆ เพื่อให้ผู้ใช้เห็นคอนทราสต์ที่เข้าถึงได้

การใช้คอนเทนเนอร์ระดับที่ 3 ที่ด้านบนของคอนเทนเนอร์หลักจะทำให้ผู้ใช้เห็นปุ่มที่มีคอนทราสต์ต่ำ ดังนี้

// ✅ Button with sufficient contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary,
        contentColor = MaterialTheme.colorScheme.onPrimary
    )
) {
}

// ❌ Button with poor contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.tertiaryContainer,
        contentColor = MaterialTheme.colorScheme.primaryContainer
    )
) {
}
Material3Snippets.kt

การช่วยเหลือพิเศษด้านการพิมพ์

สเกลประเภท M3 จะอัปเดตค่าและประเภทแบบคงที่เพื่อนำเสนอเฟรมเวิร์กที่เรียบง่ายแต่เป็นแบบไดนามิกของหมวดหมู่ขนาดที่ปรับขนาดได้ในอุปกรณ์ต่างๆ

ตัวอย่างเช่น ใน M3 คุณสามารถกำหนดค่าต่างๆ ให้กับ Display Small ได้โดยขึ้นอยู่กับบริบทของอุปกรณ์ เช่น โทรศัพท์หรือแท็บเล็ต

หน้าจอขนาดใหญ่

Material มีคำแนะนำเกี่ยวกับเลย์เอาต์แบบปรับเปลี่ยนได้และอุปกรณ์แบบพับได้เพื่อทำให้แอปของคุณเข้าถึงได้ง่ายและปรับปรุงหลักสรีรศาสตร์ของผู้ใช้ที่ถืออุปกรณ์ขนาดใหญ่

Material มีการนำทางประเภทต่างๆ เพื่อช่วยให้คุณมอบประสบการณ์ของผู้ใช้ที่ดีขึ้นสำหรับอุปกรณ์ขนาดใหญ่

ดูข้อมูลเพิ่มเติมเกี่ยวกับหลักเกณฑ์ด้านคุณภาพแอปสำหรับหน้าจอขนาดใหญ่ของ Android และดูตัวอย่างการตอบกลับสำหรับการออกแบบที่ปรับเปลี่ยนได้และเข้าถึงได้

ดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดธีม Material ใน Compose ได้ที่แหล่งข้อมูลต่อไปนี้

แอปตัวอย่าง

• แอปตัวอย่าง Reply M3

เอกสาร

• การย้ายข้อมูลจาก Material 2 ไปยัง Material 3 ใน Compose
• หลักเกณฑ์ของ Material Design

เอกสารอ้างอิง API และซอร์สโค้ด

• เอกสารอ้างอิง API ของ Compose Material 3
• ตัวอย่าง Compose Material 3 ในซอร์สโค้ด

วิดีโอ

• Material You ใน Jetpack Compose