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

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

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

מיתרים

הסוג הנפוץ ביותר של משאבים הוא מחרוזות. משתמשים ב-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)
)

‫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, צריך להעביר את הספירה פעמיים אם המחרוזת כוללת עיצוב מחרוזת עם מספר. לדוגמה, במחרוזת %1$d minutes, הפרמטר הראשון של הספירה בוחר את המחרוזת המתאימה בלשון רבים, והפרמטר השני של הספירה מוכנס לפלייסהולדר %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)
)

צבעים

אם אתם מטמיעים את 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 פועל כמו שצריך עם צבעים סטטיים, אבל הוא משטח משאבים של רשימת מצבי צבע.

נכסים וקטוריים ומשאבי תמונות

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

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

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

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

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

חלק מהסמלים הנפוצים ביותר זמינים כחלק מהתלות androidx.compose.material. כדי להשתמש בסמלים אחרים של Material, צריך להוסיף את התלות 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 משלכם. הקוד הבא נלקח מהקובץ Typography.kt של דוגמת הקומפוזיציה Crane.

// 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.