ทรัพยากรใน Compose

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)
)

พหูพจน์ของสตริง (ทดลอง)

ใช้ pluralStringResource API เพื่อโหลดพหูพจน์ที่มีจำนวนหนึ่งๆ

// 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 ในแอปแบบค่อยเป็นค่อยไป ให้ใช้ API colorResource เพื่อรับสีจากไฟล์ XML ของทรัพยากร

// In the res/colors.xml file
// <color name="purple_200">#FFBB86FC</color>

// In your Compose code
HorizontalDivider(color = colorResource(R.color.purple_200))

colorResource ทำงานตามที่คาดไว้กับสีคงที่ แต่จะทำให้ทรัพยากรรายการสถานะสีเป็นแบบแบนราบ

ชิ้นงานเวกเตอร์และทรัพยากรรูปภาพ

ใช้ painterResource API เพื่อโหลด Vector Drawable หรือรูปแบบชิ้นงานที่ผ่านการแรสเตอร์ เช่น PNG คุณไม่จำเป็นต้องทราบประเภทของ Drawable เพียงแค่ใช้ 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 จะถอดรหัสและแยกวิเคราะห์เนื้อหาของทรัพยากรในเทรดหลัก

Vector Drawable แบบเคลื่อนไหว

ใช้ AnimatedImageVector.animatedVectorResource API เพื่อโหลด XML ของ Vector Drawable แบบเคลื่อนไหว เมธอดจะแสดงผลอินสแตนซ์ AnimatedImageVector หากต้องการแสดงภาพเคลื่อนไหว ให้ใช้เมธอด rememberAnimatedVectorPainter เพื่อสร้าง Painter ที่ใช้ได้ในคอมโพสิเบิล 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 ใน Compose ธีมไอคอนมี 5 แบบ ได้แก่ Filled, Outlined, Rounded, TwoTone และ Sharp แต่ละธีมจะมีไอคอนเหมือนกัน แต่มีสไตล์ภาพที่แตกต่างกัน โดยทั่วไป คุณควรเลือกธีมเดียวและใช้ธีมนั้นในแอปพลิเคชันเพื่อความสอดคล้อง

หากต้องการวาดไอคอน คุณสามารถใช้ Composable Icon ซึ่งจะใช้สีและให้ขนาดเลย์เอาต์ที่ตรงกับไอคอน

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:2026.09.00')
  implementation composeBom

  implementation 'androidx.compose.material:material-icons-extended'
}

แบบอักษร

หากต้องการใช้แบบอักษรใน Compose ให้ดาวน์โหลดและรวมไฟล์แบบอักษรไว้ใน APK โดยตรงโดยวางไว้ในโฟลเดอร์ res/font

โหลดแบบอักษรแต่ละแบบโดยใช้ API Font และสร้าง FontFamily ด้วยแบบอักษรเหล่านั้นซึ่งคุณสามารถใช้ในอินสแตนซ์ TextStyle เพื่อสร้าง Typography ของคุณเอง โค้ดต่อไปนี้มาจากตัวอย่าง Compose ของ Crane และไฟล์ 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