ทรัพยากรใน 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)
)
ResourcesSnippets.kt

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)
)
ResourcesSnippets.kt

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

ใช้ pluralStringResource API เพื่อโหลดคำที่ใช้กับจำนวนมากกว่า 1 โดยมีจำนวนที่แน่นอน

// 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
    )
)
ResourcesSnippets.kt

เมื่อใช้วิธี pluralStringResource คุณต้องส่งจำนวน 2 ครั้ง หากสตริงมีการจัดรูปแบบสตริงด้วยตัวเลข เช่น สำหรับสตริง %1$d minutes พารามิเตอร์การนับแรกจะเลือกสตริงพหูพจน์ที่เหมาะสม และพารามิเตอร์การนับที่สองจะแทรกลงในตัวยึดตำแหน่ง %1$d หากสตริงพหูพจน์ไม่มีการจัดรูปแบบสตริง คุณไม่จำเป็นต้องส่งพารามิเตอร์ที่สามไปยัง 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)
)
ResourcesSnippets.kt

สี

หากคุณใช้ 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))
ResourcesSnippets.kt

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

ชิ้นงานเวกเตอร์และแหล่งข้อมูลรูปภาพ

ใช้ painterResource API เพื่อโหลดรูปแบบ 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
)
ResourcesSnippets.kt

painterResource ถอดรหัสและแยกวิเคราะห์เนื้อหาของทรัพยากรในเทรดหลัก

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

ใช้ AnimatedImageVector.animatedVectorResource API เพื่อโหลด XML ของ Vector Drawable แบบเคลื่อนไหว เมธอดจะแสดงผลอินสแตนซ์ 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
)
ResourcesSnippets.kt

ไอคอน

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

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

Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
ResourcesSnippets.kt

ไอคอนที่ใช้บ่อยที่สุดบางส่วนพร้อมใช้งานเป็นส่วนหนึ่งของandroidx.compose.material Dependency หากต้องการใช้ไอคอน Material อื่นๆ ให้เพิ่มการอ้างอิง material-icons-extended ลงในไฟล์ build.gradle

dependencies {
  def composeBom = platform('androidx.compose:compose-bom:2025.05.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()
    }
}
ResourcesSnippets.kt

หากต้องการใช้แบบอักษรที่ดาวน์โหลดได้ใน Compose โปรดดูหน้าแบบอักษรที่ดาวน์โหลดได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับการพิมพ์ในเอกสารประกอบเรื่องการกำหนดธีมใน Compose