Jetpack Compose รองรับการใช้งาน Material Design 3 ซึ่งเป็นวิวัฒนาการขั้นถัดไปของ Material Design Material 3 ประกอบด้วยธีม คอมโพเนนต์ และฟีเจอร์การปรับแต่งในแบบของคุณของ Material You ที่อัปเดตแล้ว เช่น สีแบบไดนามิก และออกแบบมาให้สอดคล้องไปกับสไตล์ภาพและ UI ของระบบแบบใหม่ใน Android 12 ขึ้นไป
ด้านล่างนี้เราจะสาธิตการใช้งาน Material Design 3 โดยใช้แอปตัวอย่างของ Reply เป็นตัวอย่าง ตัวอย่างการตอบกลับนี้อิงตาม 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
}
การกำหนดธีม Material
ธีม M3 มีระบบย่อยต่อไปนี้ รูปแบบสี การจัดรูปแบบตัวอักษร และรูปร่าง เมื่อคุณปรับแต่งค่าเหล่านี้ การเปลี่ยนแปลงจะแสดงในคอมโพเนนต์ M3 ที่คุณใช้สร้างแอปโดยอัตโนมัติ
Jetpack Compose ใช้แนวคิดเหล่านี้กับ M3 MaterialTheme
composable
MaterialTheme(
colorScheme = /* ...
typography = /* ...
shapes = /* ...
) {
// M3 app content
}
หากต้องการกำหนดธีมให้กับเนื้อหาแอปพลิเคชัน ให้กำหนดรูปแบบสี การจัดรูปแบบตัวอักษร และรูปร่างเฉพาะสำหรับแอปของคุณ
รูปแบบสี
รากฐานของรูปแบบสีคือชุดสีหลัก 5 สี สีเหล่านี้แต่ละสีเกี่ยวข้องกับชุดสี 13 โทนที่คอมโพเนนต์ Material 3 ใช้ ตัวอย่างเช่น รูปแบบสีสำหรับธีมแสงของ Reply มีดังนี้
อ่านข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบสีและบทบาทของสี
สร้างรูปแบบสี
แม้ว่าคุณจะสร้าง 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) // .. // ..
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 ของระบบ ชุดสีนี้ใช้เป็นจุดเริ่มต้นในการสร้างรูปแบบสีอ่อนและสีเข้ม
สีแบบไดนามิกใช้งานได้ใน 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
}
การใช้สี
คุณสามารถเข้าถึงสีธีม 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,
)
}
ในลิ้นชักการนําทางของกล่องโต้ตอบ คุณจะเห็นว่ามีการใช้สีของคอนเทนเนอร์รองและคอนเทนเนอร์เสริมเพื่อสร้างความโดดเด่น
การพิมพ์
Material Design 3 กำหนดขนาดแบบ รวมถึงรูปแบบข้อความที่ปรับมาจาก Material Design 2 เราได้ลดความซับซ้อนในการตั้งชื่อและการจัดกลุ่มเหลือเพียง 5 รายการ ได้แก่ ข้อความแสดงผล บรรทัดแรก ชื่อ เนื้อความ และป้ายกำกับ โดยแต่ละรายการจะมีขนาดใหญ่ ปานกลาง และเล็ก
| 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 แล้ว ให้ส่งไปยัง M3 MaterialTheme ดังนี้
MaterialTheme(
typography = replyTypography,
) {
// M3 app Content
}
ใช้รูปแบบข้อความ
คุณเรียกข้อมูลแบบอักษรที่ระบุไว้ในคอมโพสิชัน M3 MaterialTheme ได้โดยใช้ MaterialTheme.typography ดังนี้
Text(
text = "Hello M3 theming",
style = MaterialTheme.typography.titleLarge
)
Text(
text = "you are learning typography",
style = MaterialTheme.typography.bodyMedium
)
อ่านเพิ่มเติมเกี่ยวกับหลักเกณฑ์ของ 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)
)
เมื่อกําหนด Shapes แล้ว คุณสามารถส่งไปยัง M3 MaterialTheme ได้โดยทำดังนี้
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 การเพิ่มการเน้นให้กับ UI ทำได้ 2 วิธีดังนี้
- การใช้สีของพื้นผิว สีของพื้นผิวย่อย และสีพื้นหลังควบคู่ไปกับสีของพื้นผิวย่อยและสีของพื้นผิวย่อยจากระบบสี M3 ที่ขยายการให้บริการ เช่น ใช้ surface กับ on-surface-variant ได้ และ surface-variant สามารถใช้กับ on-surface เพื่อเน้นระดับต่างๆ ได้
- การใช้แบบอักษรที่มีน้ำหนักต่างกันสำหรับข้อความ ด้านบนคุณได้เห็นแล้วว่าคุณสามารถกำหนดน้ำหนักที่กำหนดเองให้กับรูปแบบตัวอักษรเพื่อเน้นข้อความที่แตกต่างกัน
bodyLarge = TextStyle(
fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
fontWeight = FontWeight.Normal
)
ระดับความสูง
วัสดุที่ 3 แสดงระดับความสูงโดยใช้การวางซ้อนสีโทนเป็นหลัก วิธีนี้เป็นวิธีใหม่ในการแยกคอนเทนเนอร์และพื้นผิวออกจากกัน โดยการเพิ่มระดับโทนสีจะใช้โทนที่โดดเด่นมากขึ้น นอกเหนือจากเงา
นอกจากนี้ การวางซ้อนระดับความสูงในธีมมืดยังเปลี่ยนเป็นการวางซ้อนสีโทนใน Material 3 ด้วย สีวางซ้อนมาจากช่องสีหลัก
พื้นผิว M3 ซึ่งเป็นคอมโพสิชันที่รองรับด้านหลังของคอมโพเนนต์ 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 มีชุดคอมโพเนนต์ที่หลากหลาย เช่น ปุ่ม แอปแถบ คอมโพเนนต์การนําทาง ซึ่งออกแบบมาเพื่อกรณีการใช้งานและขนาดหน้าจอที่แตกต่างกันโดยเฉพาะ
คอมโพเนนต์การนำทาง
นอกจากนี้ 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 ได้ใน 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
}
อ่านเพิ่มเติมเกี่ยวกับการปรับแต่ง Material 3
UI ของระบบ
ลักษณะบางอย่างของ Material You มาจากสไตล์ภาพและ UI ของระบบแบบใหม่ใน Android 12 ขึ้นไป 2 ประเด็นหลักที่มีการเปลี่ยนแปลงคือ การสั่นไหวและการเลื่อนผ่าน คุณไม่จำเป็นต้องดำเนินการใดๆ เพิ่มเติมเพื่อใช้การเปลี่ยนแปลงเหล่านี้
คลื่น
ตอนนี้ Ripple จะใช้ประกายระยิบระยับเล็กน้อยเพื่อส่องสว่างพื้นผิวเมื่อกด คอมโพสิชันของ Material Ripple ใช้ RippleDrawable ของแพลตฟอร์มใน Android อยู่เบื้องหลัง ดังนั้น Ripple แบบประกายจึงพร้อมใช้งานใน Android 12 ขึ้นไปสำหรับคอมโพเนนต์ Material ทั้งหมด
การเลื่อนเกิน
ตอนนี้การเลื่อนผ่านขอบจะใช้เอฟเฟกต์การยืดที่ขอบของคอนเทนเนอร์ที่เลื่อน
การเลื่อนแบบยืดจะเปิดอยู่โดยค่าเริ่มต้นในคอมโพสิชันคอนเทนเนอร์แบบเลื่อน เช่น LazyColumn, LazyRow และ LazyVerticalGrid ใน Compose Foundation 1.1.0 ขึ้นไป โดยไม่คำนึงถึงระดับ API
การช่วยเหลือพิเศษ
มาตรฐานการช่วยเหลือพิเศษที่ฝังอยู่ในคอมโพเนนต์ Material ออกแบบมาเพื่อเป็นรากฐานของการออกแบบผลิตภัณฑ์ที่ครอบคลุม การทําความเข้าใจการช่วยเหลือพิเศษของผลิตภัณฑ์จะช่วยปรับปรุงความสามารถในการใช้งานสําหรับผู้ใช้ทุกคน ซึ่งรวมถึงผู้ที่มีปัญหาการมองเห็น ตาบอด หูหนวก ความบกพร่องทางสติปัญญา ความบกพร่องทางการเคลื่อนไหว หรือความพิการตามสถานการณ์ (เช่น แขนหัก)
การช่วยเหลือพิเศษเกี่ยวกับสี
สีแบบไดนามิกออกแบบมาเพื่อให้เป็นไปตามมาตรฐานการช่วยเหลือพิเศษสำหรับคอนทราสต์สี ระบบของชุดสีเป็นองค์ประกอบสําคัญในการทําให้รูปแบบสีใดๆ เข้าถึงได้โดยค่าเริ่มต้น
ระบบสีของ Material มีค่าและวิธีการวัดโทนสีมาตรฐานที่สามารถใช้เพื่อให้ได้อัตราส่วนคอนทราสต์ที่เข้าถึงได้
คอมโพเนนต์ 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
)
) {
}
การช่วยเหลือพิเศษด้านการพิมพ์
รูปแบบประเภท M3 จะอัปเดตค่าและช่วงการเพิ่มแบบคงที่เพื่อนำเสนอเฟรมเวิร์กหมวดหมู่ขนาดแบบไดนามิกที่ปรับขนาดได้สำหรับอุปกรณ์ต่างๆ
เช่น ใน M3 คุณสามารถกําหนดค่าที่แตกต่างกันสําหรับ Display Small ได้ ทั้งนี้ขึ้นอยู่กับบริบทของอุปกรณ์ เช่น โทรศัพท์หรือแท็บเล็ต
หน้าจอขนาดใหญ่
Material มีคำแนะนำเกี่ยวกับเลย์เอาต์แบบปรับเปลี่ยนได้และอุปกรณ์แบบพับได้เพื่อให้แอปของคุณเข้าถึงได้และปรับปรุงการยศาสตร์ของผู้ใช้ที่ถืออุปกรณ์ขนาดใหญ่
Material มีการนําทางหลายประเภทเพื่อช่วยให้คุณมอบประสบการณ์การใช้งานที่ดีขึ้นสําหรับอุปกรณ์ขนาดใหญ่
ดูข้อมูลเพิ่มเติมเกี่ยวกับหลักเกณฑ์ด้านคุณภาพของแอปหน้าจอขนาดใหญ่ของ Android และดูตัวอย่างคำตอบสำหรับการออกแบบที่ปรับเปลี่ยนได้และเข้าถึงได้
ดูข้อมูลเพิ่มเติม
ดูข้อมูลเพิ่มเติมเกี่ยวกับธีม Material ใน Compose ได้ที่แหล่งข้อมูลต่อไปนี้
ตัวอย่างแอป
เอกสาร
เอกสารอ้างอิงและซอร์สโค้ดของ API
วิดีโอ
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- ย้ายข้อมูลจากวัสดุ 2 ไปยังวัสดุ 3 ในเครื่องมือเขียน
- Material Design 2 ในเครื่องมือเขียน
- ระบบการออกแบบที่กำหนดเองใน Compose