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

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

// 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 של פריט גרפי וקטורי שניתן לשרטוט דינמי (AVD). השיטה מחזירה מופע של 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
)

סמלים

‫Jetpack Compose כולל את האובייקט Icons שהוא נקודת הכניסה לשימוש בסמלי Material ב-Compose. יש חמישה סגנונות שונים של סמלים: מלא, קווי מתאר, מעוגל, דו-גווני וחד. כל ערכת נושא מכילה את אותם סמלים, אבל עם סגנון חזותי שונה. בדרך כלל מומלץ לבחור עיצוב אחד ולהשתמש בו בכל האפליקציה כדי לשמור על עקביות.

כדי לצייר סמל, אפשר להשתמש בקוד 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'
}

גופנים

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

טוענים כל גופן באמצעות Font API ויוצרים FontFamily עם הגופנים האלה שאפשר להשתמש בהם במופעי TextStyle כדי ליצור Typography משלכם. הקוד הבא נלקח מדוגמת הקומפוזיציה של 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