ดีไซน์ Material 3 ใน Compose

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

หมายเหตุ: คำว่า "Material Design 3" "Material 3" และ "M3" ใช้แทนกันได้ ข้อมูลจำเพาะของ Material Design ที่มีอยู่และไลบรารี androidx.compose.material ที่เกี่ยวข้องจะเรียกว่า "Material Design 2" "Material 2" หรือ "M2"

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

รูปที่ 1 แอปตัวอย่างการตอบกลับโดยใช้ Material Design 3

Dependency

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

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

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

API ทดลอง

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

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

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

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

รูปที่ 2 ระบบย่อยของ Material Design: สี การจัดรูปแบบตัวอักษร และรูปร่าง

Jetpack Compose ใช้แนวคิดเหล่านี้กับ M3 MaterialTheme composable

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

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

รูปแบบสี

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

รูปที่ 3 รูปแบบสีอ่อนของตัวอย่างแอปการตอบ

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

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

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

• 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 ของระบบ ชุดสีนี้ใช้เป็นจุดเริ่มต้นในการสร้างรูปแบบสีอ่อนและสีเข้ม

รูปที่ 4 ตัวอย่างธีมแบบไดนามิกของแอปจากวอลเปเปอร์ (ซ้าย) และธีมเริ่มต้นของแอป (ขวา)

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

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

// 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 เพื่อเน้นรายการที่เลือก

รูปที่ 5 คอนเทนเนอร์หลักและช่องข้อความที่มีสี on-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

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

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

การพิมพ์

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

รูปที่ 7 สเกลแบบอักษรเริ่มต้นสำหรับ Material Design 3

M3	ขนาดแบบอักษร/ความสูงของบรรทัดเริ่มต้น
displayLarge	Roboto 57/64
displayMedium	Roboto 45/52
displaySmall	Roboto 36/44
headlineLarge	Roboto 32/40
headlineMedium	Roboto 28/36
headlineSmall	Roboto 24/32
titleLarge	New- Roboto Medium 22/28
titleMedium	Roboto Medium 16/24
titleSmall	Roboto Medium 14/20
bodyLarge	Roboto 16/24
bodyMedium	Roboto 14/20
bodySmall	Roboto 12/16
labelLarge	Roboto Medium 14/20
labelMedium	Roboto Medium 12/16
labelSmall	New Roboto Medium, 11/16

หมายเหตุ: ปัจจุบันคลาส M3 Typography จะไม่มีพารามิเตอร์ defaultFontFamily ซึ่งแตกต่างจากคลาส M2 Typography คุณจะต้องพารามิเตอร์ fontFamily ใน TextStyles แต่ละรายการแทน

กำหนดแบบอักษร

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

รูปที่ 8 ตัวหนังสือขนาดใหญ่ ตัวหนังสือขนาดกลาง และตัวหนังสือขนาดกลางของป้ายกำกับสำหรับการใช้งานแบบอักษรที่แตกต่างกัน

ผลิตภัณฑ์ของคุณอาจไม่จำเป็นต้องใช้รูปแบบเริ่มต้นทั้งหมด 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 แล้ว ให้ส่งไปยัง M3 MaterialTheme ดังนี้

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

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

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

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

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

รูปทรง

พื้นผิวของวัสดุสามารถแสดงเป็นรูปทรงต่างๆ รูปร่างดึงดูดความสนใจ ระบุองค์ประกอบ สื่อสารสถานะ และแสดงแบรนด์

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

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

Compose มีคลาส M3 Shapes ที่มีพารามิเตอร์เพิ่มเติมเพื่อรองรับรูปร่าง 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 แล้ว คุณสามารถส่งไปยัง M3 MaterialTheme ได้โดยทำดังนี้

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

รูปที่ 9 รูปร่างขนาดกลางสําหรับการ์ดและรูปร่างขนาดใหญ่สําหรับปุ่มการทํางานแบบลอยในแอปตัวอย่างของ Reply

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

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

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

รูปที่ 10 ค่ารูปร่างเริ่มต้นสำหรับคอมโพเนนต์ Material 3 ทั้งหมด

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

การเน้น

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

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

รูปที่ 11 การใช้ชุดสีกลางเพื่อเน้น

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

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

หมายเหตุ: สำหรับสถานะปิดใช้ใน M3 คุณยังคงใช้สี "on-x" (โดยที่ x อาจเป็นสีหลัก สีรอง สีพื้น ฯลฯ) ที่มีค่าอัลฟ่าได้

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

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

รูปที่ 12 การปรับโทนด้วยการปรับแสงเงาE

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

รูปที่ 13 ระดับเงาเทียบกับระดับโทนใน Material Design 3

พื้นผิว M3 ซึ่งเป็นคอมโพสิชันที่รองรับด้านหลังของคอมโพเนนต์ 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 มีคอมโพเนนต์เดียวกันหลายเวอร์ชันเพื่อใช้ในบทบาทต่างๆ ตามการเน้นและความสนใจ

รูปที่ 14 เน้นปุ่มจาก FAB, ปุ่มหลัก ไปจนถึงปุ่มข้อความ

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

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 มีชุดคอมโพเนนต์ที่หลากหลาย เช่น ปุ่ม แอปแถบ คอมโพเนนต์การนําทาง ซึ่งออกแบบมาเพื่อกรณีการใช้งานและขนาดหน้าจอที่แตกต่างกันโดยเฉพาะ

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

นอกจากนี้ 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

รูปที่ 15 ตัวอย่างการตอบกลับของ BottomNavigationBar (ซ้าย) และ NavigationRail (ขวา)

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

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

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

รูปที่ 16 การแสดงตัวอย่างการตอบของลิ้นชักการนำทางถาวร

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

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

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 จะใช้ประกายระยิบระยับเล็กน้อยเพื่อส่องสว่างพื้นผิวเมื่อกด คอมโพสิชันของ Material Ripple ใช้ RippleDrawable ของแพลตฟอร์มใน Android อยู่เบื้องหลัง ดังนั้น Ripple แบบประกายจึงพร้อมใช้งานใน Android 12 ขึ้นไปสำหรับคอมโพเนนต์ Material ทั้งหมด

รูปที่ 17 แรงกระเพื่องใน M2 เทียบกับ M3

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

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

รูปที่ 18 การเลื่อนผ่านโดยใช้เอฟเฟกต์การยืดบริเวณขอบของคอนเทนเนอร์

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

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

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

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

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

รูปที่ 19 แอปตัวอย่างของ Reply: ชุดสีหลัก รอง และตติยภูมิ (จากบนลงล่าง)

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

ใช้ on-primary วางไว้ด้านบน primary และ on-primary-container วางไว้ด้านบน primary-container และทําแบบเดียวกันกับสีเฉพาะจุดและสีกลางอื่นๆ เพื่อให้ผู้ใช้เห็นคอนทราสต์ที่เข้าถึงได้

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

// ✅ 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

รูปที่ 20 คอนทราสต์เพียงพอ (ซ้าย) เทียบกับคอนทราสต์ไม่ดี (ขวา)

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

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

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

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

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

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

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

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

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

ตัวอย่างแอป

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

เอกสาร

• การย้ายข้อมูลจาก Material 2 ไปยัง Material 3 ในเครื่องมือเขียน
• หลักเกณฑ์การออกแบบวัสดุ

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

• ข้อมูลอ้างอิงสำหรับ Compose Material 3 API
• คอมโพสิชันตัวอย่างของ Material 3 ในซอร์สโค้ด

วิดีโอ

• Material You ใน Jetpack Compose