Jetpack Compose 可以存取 Android 專案中定義的資源。本文件將說明 Compose 支援存取這些資源的部分 API。
資源是程式碼使用的額外檔案和靜態內容,例如點陣圖、版面配置定義、使用者介面字串和動畫指示等。如果您不熟悉 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
方法時,如果您的字串包含數字格式,您就必須傳送兩次此計數。舉例來說,如果是 %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) )
顏色
如果要為應用程式階段採用 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。您不需要知道可繪項目的類型,只要在 Image
可組合項或 paint
修飾符中使用 painterResource
即可。
// 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 可載入動畫向量可繪項目 XML。這個方法會傳回 AnimatedImageVector
執行個體。如要顯示動畫圖片,請使用 rememberAnimatedVectorPainter
方法建立可用於 Image
和 Icon
可組合項的 Painter
。rememberAnimatedVectorPainter
方法的 atEnd
布林值參數會指出圖片是否要繪製在所有動畫的結尾處。如果與可變動狀態搭配使用,變更這個值將觸發相應的動畫。
// 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
物件,方便您在 Compose 中使用質感設計圖示。這些圖示有五種不同的主題:Filled、Outlined、Rounded、TwoTone 和 Sharp。每個主題都包含相同的圖示,但視覺樣式各不相同。一般而言,您應選擇一種主題並用於整個應用程式,以維持一致性。
如要繪製圖示,可以使用 Icon
,這個可組合項會套用色調並依據圖示提供大小相符的版面配置。
Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
某些最常用的圖示是由 androidx.compose.material
依附元件提供使用。如要使用任何其他質感設計圖示,請將 material-icons-extended
依附元件新增至 build.gradle
檔案。
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.10.01')
implementation composeBom
implementation 'androidx.compose.material:material-icons-extended'
}
字型
如要在 Compose 中使用字型,請將字型檔案放入 res/font
資料夾,即可直接下載這些檔案並納入在 APK 中。
透過 Font
API 載入每種字型,然後使用這些字型建立 FontFamily
,以便在 TextStyle
執行個體中使用,建立自己的 Typography
。下方是從 Crane Compose 範例和相關的 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}
- Compose 中的 Material Design 2
- Compose 中的自訂設計系統