Jetpack Compose จะเข้าถึงทรัพยากรที่กำหนดไว้ในโปรเจ็กต์ Android ของคุณได้ ช่วงเวลานี้ เอกสารที่อธิบายถึง API ที่ Compose เสนอให้ทำเช่นนั้น
ทรัพยากรคือไฟล์เพิ่มเติมและเนื้อหาแบบคงที่ที่โค้ดของคุณใช้ เช่น เป็นบิตแมป การกำหนดเลย์เอาต์ สตริงอินเทอร์เฟซผู้ใช้ คำแนะนำเกี่ยวกับภาพเคลื่อนไหว และอื่นๆ หากคุณไม่คุ้นเคยกับแหล่งข้อมูลใน Android โปรดดูที่ คู่มือภาพรวมทรัพยากร
เครื่องสาย
ประเภททรัพยากรที่พบบ่อยที่สุดคือสตริง ใช้ stringResource
API
เพื่อเรียกสตริงที่กำหนดแบบคงที่ในทรัพยากร XML
// In the res/values/strings.xml file // <string name="compose">Jetpack Compose</string> // In your Compose code Text( text = stringResource(R.string.compose) )
stringResource
ยังใช้การจัดรูปแบบตำแหน่งได้ด้วย
// In the res/values/strings.xml file // <string name="congratulate">Happy %1$s %2$d</string> // In your Compose code Text( text = stringResource(R.string.congratulate, "New Year", 2021) )
สตริงพหูพจน์ (ทดลอง)
ใช้ API ของ pluralStringResource
เพื่อโหลดรูปพหูพจน์ที่มีจำนวนที่กำหนด
// In the res/strings.xml file // <plurals name="runtime_format"> // <item quantity="one">%1$d minute</item> // <item quantity="other">%1$d minutes</item> // </plurals> // In your Compose code Text( text = pluralStringResource( R.plurals.runtime_format, quantity, quantity ) )
เมื่อใช้เมธอด pluralStringResource
คุณจะต้องผ่านการนับ 2 ครั้ง
หากสตริงมีการจัดรูปแบบสตริงด้วยตัวเลข ตัวอย่างเช่น สำหรับ
สตริง %1$d minutes
พารามิเตอร์การนับแรกจะเลือกรูปพหูพจน์ที่เหมาะสม
ระบบจะแทรกสตริงและพารามิเตอร์จํานวนที่ 2 ลงในตัวยึดตำแหน่ง %1$d
หากสตริงพหูพจน์ของคุณไม่มีการจัดรูปแบบสตริง คุณก็ไม่จำเป็นต้องส่งผ่าน
พารามิเตอร์ที่ 3 เป็น pluralStringResource
ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปพหูพจน์ได้ที่ เอกสารประกอบเกี่ยวกับสตริงจำนวน
ขนาด
ในทำนองเดียวกัน ให้ใช้ dimensionResource
API เพื่อรับมิติข้อมูลจาก XML ของทรัพยากร
// In the res/values/dimens.xml file // <dimen name="padding_small">8dp</dimen> // In your Compose code val smallPadding = dimensionResource(R.dimen.padding_small) Text( text = "...", modifier = Modifier.padding(smallPadding) )
สี
หากคุณจะใช้งาน Compose แบบค่อยเป็นค่อยไปในแอป ให้ใช้ colorResource
API เพื่อรับสีจากไฟล์ XML ของทรัพยากร
// In the res/colors.xml file // <color name="purple_200">#FFBB86FC</color> // In your Compose code Divider(color = colorResource(R.color.purple_200))
colorResource
ทำงานได้อย่างที่คาดไว้กับสีคงที่ แต่จะทำให้ สีคงที่
ทรัพยากรรายการสถานะ
เนื้อหาเวกเตอร์และทรัพยากรรูปภาพ
ใช้ painterResource
API เพื่อโหลดเวกเตอร์ที่ถอนออกได้หรือแรสเตอร์
เช่น PNG คุณไม่จำเป็นต้องรู้ประเภทของ
โฆษณาที่ถอนออกได้
ใช้ painterResource
ใน Composable Image
หรือตัวแก้ไข paint
// Files in res/drawable folders. For example: // - res/drawable-nodpi/ic_logo.xml // - res/drawable-xxhdpi/ic_logo.png // In your Compose code Icon( painter = painterResource(id = R.drawable.ic_logo), contentDescription = null // decorative element )
painterResource
จะถอดรหัสและแยกวิเคราะห์เนื้อหาของทรัพยากรในหน้าหลัก
ชุดข้อความ
เวกเตอร์แบบเคลื่อนไหวที่ถอนออกได้
ใช้ AnimatedImageVector.animatedVectorResource
API เพื่อโหลดภาพเคลื่อนไหว
Vector Drawable XML เมธอดจะแสดงอินสแตนซ์ AnimatedImageVector
ใน
หากต้องการแสดงภาพเคลื่อนไหว ให้ใช้ rememberAnimatedVectorPainter
เพื่อสร้าง Painter
ที่ใช้ใน Composable Image
และ Icon
ได้
พารามิเตอร์บูลีน atEnd
ของเมธอด rememberAnimatedVectorPainter
ระบุว่าควรวาดรูปภาพในช่วงท้ายของภาพเคลื่อนไหวทั้งหมดหรือไม่
หากใช้กับสถานะที่เปลี่ยนแปลงได้ การเปลี่ยนแปลงค่านี้จะทริกเกอร์แอตทริบิวต์
ภาพเคลื่อนไหว
// Files in res/drawable folders. For example: // - res/drawable/ic_hourglass_animated.xml // In your Compose code val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated) val atEnd by remember { mutableStateOf(false) } Icon( painter = rememberAnimatedVectorPainter(image, atEnd), contentDescription = null // decorative element )
ไอคอน
Jetpack Compose มาพร้อมกับออบเจ็กต์ Icons
ซึ่งเป็นจุดแรกเข้าสำหรับการใช้
ไอคอน Material ใน
เขียน ธีมไอคอนที่แตกต่างกันมี 5 แบบดังนี้
กรอกข้อมูลแล้ว
โครงร่าง
ปัดเศษ
twoTone และ
Sharp ชิ้น
ธีมมีไอคอนเดียวกัน แต่มีสไตล์การแสดงผลที่ต่างกัน คุณควร
โดยปกติแล้วจะเลือกหนึ่งธีมและใช้ทั่วทั้งแอปพลิเคชันของคุณเพื่อความสอดคล้อง
หากต้องการวาดไอคอน คุณสามารถใช้
Icon
Composable ซึ่งใช้การแต้มสีและให้ขนาดเลย์เอาต์ที่ตรงกับไอคอน
Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
ไอคอนยอดนิยมบางส่วนพร้อมให้ใช้งานเป็นส่วนหนึ่งของ
ทรัพยากร Dependency androidx.compose.material
หากต้องการใช้ไอคอน Material อื่นๆ
เพิ่มทรัพยากร Dependency material-icons-extended
ลงในไฟล์ build.gradle
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.06.00')
implementation composeBom
implementation 'androidx.compose.material:material-icons-extended'
}
แบบอักษร
หากต้องการใช้แบบอักษรใน "เขียน" ให้ดาวน์โหลดและรวมไฟล์แบบอักษรไว้ใน
APK โดยวางไว้ในโฟลเดอร์ res/font
โหลดแบบอักษรแต่ละรายการโดยใช้
Font
API และสร้าง
FontFamily
พร้อม
ที่คุณสามารถใช้ใน
TextStyle
อินสแตนซ์ไปยัง
สร้างของคุณเอง
Typography
ต่อไปนี้เป็นโค้ดจาก
เครน
เขียนตัวอย่างและ
Typography.kt
// Define and load the fonts of the app private val light = Font(R.font.raleway_light, FontWeight.W300) private val regular = Font(R.font.raleway_regular, FontWeight.W400) private val medium = Font(R.font.raleway_medium, FontWeight.W500) private val semibold = Font(R.font.raleway_semibold, FontWeight.W600) // Create a font family to use in TextStyles private val craneFontFamily = FontFamily(light, regular, medium, semibold) // Use the font family to define a custom typography val craneTypography = Typography( titleLarge = TextStyle( fontFamily = craneFontFamily ) /* ... */ ) // Pass the typography to a MaterialTheme that will create a theme using // that typography in the part of the UI hierarchy where this theme is used @Composable fun CraneTheme(content: @Composable () -> Unit) { MaterialTheme(typography = craneTypography) { content() } }
สำหรับการใช้แบบอักษรที่สามารถดาวน์โหลดได้ใน Compose โปรดดู แบบอักษรที่ดาวน์โหลดได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับการพิมพ์ตัวอักษรในการใช้ธีมใน Compose เอกสารประกอบ
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- กำลังโหลดรูปภาพ {:#loading-images}
- ดีไซน์ Material 2 ใน Compose
- ระบบการออกแบบที่กำหนดเองใน Compose