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 }
การกำหนดธีม Material
ธีม M3 ประกอบด้วยระบบย่อยต่อไปนี้ รูปแบบสี การจัดพิมพ์ และรูปร่าง เมื่อคุณปรับแต่งค่าเหล่านี้ การเปลี่ยนแปลงจะแสดงในคอมโพเนนต์ M3 ที่คุณใช้สร้างแอปโดยอัตโนมัติ
Jetpack Compose นำแนวคิดเหล่านี้ไปใช้กับ Composable MaterialTheme ของ M3 ดังนี้
MaterialTheme( colorScheme = /* ... typography = /* ... shapes = /* ... ) { // M3 app content }
หากต้องการกำหนดธีมเนื้อหาของแอปพลิเคชัน ให้กำหนดรูปแบบสี ตัวพิมพ์ และรูปร่างที่เฉพาะเจาะจงสำหรับแอปของคุณ
รูปแบบสี
รากฐานของรูปแบบสีคือชุดสีหลัก 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) // .. // ..
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 ) }
หากต้องการรองรับธีมสว่างและธีมมืด ให้ใช้ 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 }
การใช้สี
คุณสามารถเข้าถึงสีของธีม Material ในแอปได้ผ่าน MaterialTheme.colorScheme ดังนี้
Text( text = "Hello theming", color = MaterialTheme.colorScheme.primary )
บทบาทของสีแต่ละสีสามารถใช้ได้ในหลากหลายตำแหน่ง โดยขึ้นอยู่กับสถานะ ความโดดเด่น และการเน้นของคอมโพเนนต์
- สีหลักคือสีพื้นฐานที่ใช้สำหรับองค์ประกอบหลัก เช่น ปุ่มที่โดดเด่น สถานะที่ใช้งานอยู่ และสีอ่อนของพื้นผิวที่ยกขึ้น
- สีหลักรองจะใช้กับคอมโพเนนต์ที่โดดเด่นน้อยกว่าใน 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, ) }
ที่นี่ คุณจะเห็นในลิ้นชักการนำทางของ Reply ว่ามีการใช้สีคอนเทนเนอร์รองและระดับที่ 3 ในคอนทราสต์เพื่อสร้างการเน้นและเน้นเสียงอย่างไร
การพิมพ์
Material Design 3 กำหนดสเกลประเภท ซึ่งรวมถึงรูปแบบข้อความที่ปรับมาจาก Material Design 2 เราได้ปรับให้การตั้งชื่อและการจัดกลุ่มเข้าใจง่ายขึ้นเป็นจอแสดงผล พาดหัว ชื่อ เนื้อหา และป้ายกำกับ โดยแต่ละรายการจะมีขนาดใหญ่ กลาง และเล็ก
| 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 |
กำหนดแบบตัวพิมพ์
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 ), // .. ) // ..
ผลิตภัณฑ์ของคุณอาจไม่จำเป็นต้องใช้สไตล์เริ่มต้นทั้ง 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 ),
เมื่อกำหนด Typography แล้ว ให้ส่งไปยัง MaterialTheme ของ M3 ดังนี้
MaterialTheme( typography = replyTypography, ) { // M3 app Content }
ใช้รูปแบบข้อความ
คุณสามารถเรียกข้อมูลแบบตัวพิมพ์ที่ระบุไว้ใน MaterialTheme Composable ของ M3 ได้โดยใช้ MaterialTheme.typography ดังนี้
Text( text = "Hello M3 theming", style = MaterialTheme.typography.titleLarge ) Text( text = "you are learning typography", style = MaterialTheme.typography.bodyMedium )
อ่านข้อมูลเพิ่มเติมเกี่ยวกับหลักเกณฑ์ของ 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) )
เมื่อกำหนด Shapes แล้ว คุณสามารถส่งต่อไปยัง MaterialTheme ของ M3 ได้ดังนี้
MaterialTheme( shapes = replyShapes, ) { // M3 app Content }
ใช้รูปร่าง
คุณสามารถปรับแต่งสเกลรูปร่างสำหรับคอมโพเนนต์ทั้งหมดใน MaterialTheme หรือจะทำทีละคอมโพเนนต์ก็ได้
ใช้รูปร่างขนาดกลางและขนาดใหญ่ที่มีค่าเริ่มต้นดังนี้
Card(shape = MaterialTheme.shapes.medium) { /* card content */ } FloatingActionButton( shape = MaterialTheme.shapes.large, onClick = { } ) { /* fab content */ }
ยังมีรูปร่างอีก 2 แบบ ได้แก่ RectangleShape และ CircleShape ซึ่งเป็นส่วนหนึ่งของ Compose รูปทรงสี่เหลี่ยมผืนผ้าไม่มีรัศมีเส้นขอบ และรูปทรงวงกลมแสดงขอบวงกลมเต็ม:
Card(shape = RectangleShape) { /* card content */ } Card(shape = CircleShape) { /* card content */ }
ตัวอย่างด้านล่างแสดงคอมโพเนนต์บางส่วนที่มีการใช้ค่ารูปร่างเริ่มต้น
อ่านข้อมูลเพิ่มเติมเกี่ยวกับหลักเกณฑ์ของ Material ในการใช้รูปร่าง
การเน้น
การเน้นใน M3 จะใช้รูปแบบต่างๆ ของสีและชุดค่าผสมสีบนสี ใน M3 มี 2 วิธีในการเพิ่มการเน้นให้กับ UI ดังนี้
- การใช้สีพื้นผิว สีพื้นผิวที่แตกต่าง และสีพื้นหลังร่วมกับสีบนพื้นผิว สีบนพื้นผิวที่แตกต่างจากระบบสี M3 ที่ขยาย ตัวอย่างเช่น สามารถใช้ surface กับ on-surface-variant และใช้ surface-variant กับ on-surface เพื่อเน้นระดับที่แตกต่างกันได้
- การใช้ความหนาของแบบอักษรที่แตกต่างกันสำหรับข้อความ จากด้านบน คุณจะเห็นว่าคุณสามารถระบุน้ำหนักที่กำหนดเองให้กับสเกลประเภทของเราเพื่อเน้นข้อความที่แตกต่างกันได้
bodyLarge = TextStyle( fontWeight = FontWeight.Bold ), bodyMedium = TextStyle( fontWeight = FontWeight.Normal )
ระดับความสูง
Material 3 แสดงระดับความสูงโดยใช้การวางซ้อนสีโทนเป็นหลัก นี่เป็นวิธีใหม่ในการแยกความแตกต่างระหว่างคอนเทนเนอร์และพื้นผิวออกจากกัน โดยการเพิ่มระดับโทนสีจะใช้โทนสีที่โดดเด่นมากขึ้น นอกเหนือจากเงา
การวางซ้อนระดับความสูงในธีมมืดยังเปลี่ยนเป็นการวางซ้อนสีโทนเดียวใน Material 3 ด้วย สีที่วางซ้อนจะมาจากช่องสีหลัก
Surface ของ M3 ซึ่งเป็น Composable ที่อยู่เบื้องหลังคอมโพเนนต์ M3 ส่วนใหญ่ รองรับทั้งการยกระดับโทนสีและเงา ดังนี้
Surface( modifier = Modifier, tonalElevation = /*... shadowElevation = /*... ) { Column(content = content) }
องค์ประกอบของ Material
Material Design มาพร้อมกับคอมโพเนนต์ Material ที่หลากหลาย (เช่น ปุ่ม ชิป การ์ด แถบการนำทาง) ซึ่งเป็นไปตามการกำหนดธีม Material อยู่แล้ว และช่วยให้คุณสร้างแอป Material Design ที่สวยงามได้ คุณเริ่มใช้คอมโพเนนต์ที่มีพร็อพเพอร์ตี้เริ่มต้นได้ทันที
Button(onClick = { /*..*/ }) { Text(text = "My Button") }
M3 มีคอมโพเนนต์เดียวกันหลายเวอร์ชันเพื่อใช้ในบทบาทต่างๆ ตามการเน้นและความสนใจ
- ปุ่มการทำงานแบบลอยแบบขยายสำหรับการดำเนินการที่เน้นมากที่สุด
ExtendedFloatingActionButton( onClick = { /*..*/ }, modifier = Modifier ) { Icon( imageVector = Icons.Default.Edit, contentDescription = stringResource(id = R.string.edit), ) Text( text = stringResource(id = R.string.add_entry), ) }
- ปุ่มแบบทึบสำหรับการดำเนินการที่เน้นสูง
Button(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.view_entry)) }
- ปุ่มข้อความสำหรับการดำเนินการที่เน้นน้อย
TextButton(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.replated_articles)) }
อ่านข้อมูลเพิ่มเติมเกี่ยวกับปุ่มและคอมโพเนนต์อื่นๆ ของ Material Material 3 มีชุดคอมโพเนนต์ที่หลากหลาย เช่น ปุ่ม แถบแอป คอมโพเนนต์การนำทางที่ออกแบบมาโดยเฉพาะสำหรับ Use Case และขนาดหน้าจอที่แตกต่างกัน
คอมโพเนนต์การนำทาง
นอกจากนี้ Material ยังมีคอมโพเนนต์การนำทางหลายรายการที่ช่วยคุณใช้การนำทาง โดยขึ้นอยู่กับขนาดและสถานะหน้าจอที่แตกต่างกัน
NavigationBar ใช้สำหรับอุปกรณ์ขนาดกะทัดรัดเมื่อคุณต้องการกำหนดเป้าหมายปลายทางไม่เกิน 5 รายการ
NavigationBar(modifier = Modifier.fillMaxWidth()) { Destinations.entries.forEach { replyDestination -> NavigationBarItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }
NavigationRail ใช้สำหรับแท็บเล็ตหรือโทรศัพท์ขนาดเล็กถึงขนาดกลางในโหมดแนวนอน ซึ่งช่วยให้ผู้ใช้ใช้งานได้สะดวกและปรับปรุงประสบการณ์ของผู้ใช้สำหรับอุปกรณ์เหล่านั้น
NavigationRail( modifier = Modifier.fillMaxHeight(), ) { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }
BottomNavigationBar (ซ้าย) และ NavigationRail (ขวา)ตอบกลับโดยใช้ทั้ง 2 อย่างในธีมเริ่มต้นเพื่อมอบประสบการณ์การใช้งานที่สมจริงสำหรับอุปกรณ์ทุกขนาด
NavigationDrawer ใช้สำหรับแท็บเล็ตขนาดกลางถึงขนาดใหญ่ซึ่งมีพื้นที่เพียงพอที่จะแสดงรายละเอียด คุณใช้ทั้ง PermanentNavigationDrawer หรือ ModalNavigationDrawer ร่วมกับ NavigationRail ได้
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { }, label = { } ) } }) { }
ตัวเลือกการนำทางช่วยปรับปรุงประสบการณ์ของผู้ใช้ การยศาสตร์ และความสามารถในการเข้าถึง ดูข้อมูลเพิ่มเติมเกี่ยวกับคอมโพเนนต์การนำทาง 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 }
อ่านข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่ง 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 ) ) { }
การช่วยเหลือพิเศษด้านการพิมพ์
สเกลประเภท M3 จะอัปเดตค่าและประเภทแบบคงที่เพื่อนำเสนอเฟรมเวิร์กที่เรียบง่ายแต่เป็นแบบไดนามิกของหมวดหมู่ขนาดที่ปรับขนาดได้ในอุปกรณ์ต่างๆ
ตัวอย่างเช่น ใน M3 คุณสามารถกำหนดค่าต่างๆ ให้กับ Display Small ได้โดยขึ้นอยู่กับบริบทของอุปกรณ์ เช่น โทรศัพท์หรือแท็บเล็ต
หน้าจอขนาดใหญ่
Material มีคำแนะนำเกี่ยวกับเลย์เอาต์แบบปรับเปลี่ยนได้และอุปกรณ์แบบพับได้เพื่อทำให้แอปของคุณเข้าถึงได้ง่ายและปรับปรุงหลักสรีรศาสตร์ของผู้ใช้ที่ถืออุปกรณ์ขนาดใหญ่
Material มีการนำทางประเภทต่างๆ เพื่อช่วยให้คุณมอบประสบการณ์ของผู้ใช้ที่ดีขึ้นสำหรับอุปกรณ์ขนาดใหญ่
ดูข้อมูลเพิ่มเติมเกี่ยวกับหลักเกณฑ์ด้านคุณภาพแอปสำหรับหน้าจอขนาดใหญ่ของ Android และดูตัวอย่างการตอบกลับสำหรับการออกแบบที่ปรับเปลี่ยนได้และเข้าถึงได้
ดูข้อมูลเพิ่มเติม
ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดธีม Material ใน Compose ได้ที่แหล่งข้อมูลต่อไปนี้
แอปตัวอย่าง
เอกสาร
เอกสารอ้างอิง API และซอร์สโค้ด
วิดีโอ
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- ย้ายข้อมูลจาก Material 2 ไปยัง Material 3 ใน Compose
- Material Design 2 ใน Compose
- ระบบการออกแบบที่กำหนดเองใน Compose