משאבים בכתיבה

ל-Jetpack Compose יש גישה למשאבים שהוגדרו בפרויקט Android. הזה מסביר חלק מההצעות של APIs Compose כדי לעשות זאת.

משאבים הם הקבצים הנוספים והתוכן הסטטי שבהם הקוד שלכם משתמש, כמו קובצי bitmap, הגדרות פריסה, מחרוזות של ממשק משתמש, הוראות אנימציה ועוד. אם אתם לא יודעים מהם המשאבים ב-Android, אפשר לעיין באפליקציה מדריך סקירה כללית של מקורות מידע.

מיתרים

סוג המשאב הנפוץ ביותר הוא String (מחרוזות). שימוש ב-API של stringResource כדי לאחזר מחרוזת שמוגדרת באופן סטטי במשאבי ה-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

צורת רבים של מחרוזות (ניסיוני)

משתמשים ב-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
    )
)
ResourcesSnippets.kt

כשמשתמשים בשיטה pluralStringResource, צריך להעביר את המספר של הפעמים שרוצים לחפש פעמיים אם המחרוזת כוללת עיצוב של מחרוזת עם מספר. לדוגמה, עבור המחרוזת %1$d minutes, פרמטר הספירה הראשון בוחר את המחרוזת המתאימה לרבים ופרמטר הספירה השני מוכנס ל-placeholder %1$d. אם מחרוזות הרבים לא כוללות עיצוב של מחרוזות, אין צורך להעביר את הפרמטר השלישי אל pluralStringResource.

למידע נוסף על צורות רבות, אפשר לעיין במסמכי התיעוד בנושא מחרוזות כמות.

מידות

באופן דומה, משתמשים ב-API dimensionResource כדי לקבל מאפיינים מ-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

צבעים

אם התחלתם להשתמש בתכונה 'כתיבה' באפליקציה שלכם באופן מצטבר, כדאי להשתמש ב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 כדי לטעון נכסים גרפיים וקטוריים או נכסים בפורמטים רסטריים כמו PNG. אין צורך לדעת מה סוג פריט הגרפיקה, פשוט צריך להשתמש ב-painterResource ב-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 מפענח ומנתח את תוכן המשאב בשרשור הראשי.

אנימציות של פריטים גרפיים וקטורים שניתן לשרטוט

משתמשים ב-API ‏AnimatedImageVector.animatedVectorResource כדי לטעון קובץ XML של וקטור מונפש שניתן לציור. ה-method מחזירה מופע של AnimatedImageVector. כדי להציג את התמונה האנימציה, משתמשים ב-method‏ rememberAnimatedVectorPainter כדי ליצור Painter שאפשר להשתמש בו ב-composables של 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 פיתוח נייטיב' מגיע עם האובייקט Icons שמשמש כנקודת הכניסה לשימוש סמלי חומרים ב- פיתוח נייטיב. יש חמישה עיצובים שונים של סמלים: סמל מלא, סמל עם קו מתאר, סמל מעוגל, סמל דו-גוני וסמל חד. כל אחד מכיל את אותם סמלים, אבל בסגנון חזותי ייחודי. אתם צריכים בדרך כלל בוחרים עיצוב אחד ומשתמשים בו בכל האפליקציה כדי לשמור על עקביות.

כדי לצייר סמל, אפשר להשתמש ב-composable‏ Icon, שמחילה גוון ומספקת גודל פריסה שמתאים לסמל.

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

כמה מהסמלים הנפוצים ביותר זמינים כחלק תלות ב-androidx.compose.material. כדי להשתמש בסמלים אחרים של Material: מוסיפים את התלות material-icons-extended לקובץ build.gradle.

dependencies {
  def composeBom = platform('androidx.compose:compose-bom:2025.02.00')
  implementation composeBom

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

גופנים

כדי להשתמש בגופנים במצב 'כתיבה', צריך להוריד ולקבץ את קובצי הגופנים ישירות חבילות APK על ידי הצבתן בתיקייה res/font.

אפשר לטעון כל גופן באמצעות ה-API Font וליצור ממנו 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()
    }
}
ResourcesSnippets.kt

כדי להשתמש בגופנים שניתן להוריד במצב 'כתיבה', אפשר לעיין הדף גופנים להורדה.

אפשר לקרוא מידע נוסף על טיפוגרפיה בקטע עיצובים בקטע 'כתיבה' תיעוד