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

ל-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 כדי לטעון צורת רבים עם כמות מסוימת.

// 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, פרמטר הספירה הראשון בוחר את מחרוזת הרבים המתאימה, ופרמטר הספירה השני מוכנס לפלייס הולדר %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 באופן הדרגתי באפליקציה, אפשר להשתמש ב-API כדי לקבל צבעים מקובץ XML של משאבים.colorResource

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

Drawable

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

משתמשים ב-AnimatedImageVector.animatedVectorResource API כדי לטעון XML של נכס וקטורי ניתן לציור עם אנימציה. השיטה מחזירה מופע של AnimatedImageVector. כדי להציג את התמונה המונפשת, משתמשים בשיטה 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
)
ResourcesSnippets.kt

סמלים

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

כדי לצייר סמל, אפשר להשתמש ב-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.05.00')
  implementation composeBom

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

גופנים

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

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

מידע על שימוש בגופנים להורדה ב-Compose זמין בדף גופנים להורדה.

מידע נוסף על טיפוגרפיה זמין במאמר בנושא יצירת ערכות עיצוב ב-Compose