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

ל-Jetpack פיתוח נייטיב יש גישה למשאבים שהוגדרו בפרויקט 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)
)

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, פרמטר הספירה הראשון בוחר את צורת הרבים המתאימה ופרמטר הספירה השני נוסף ל-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)
)

צבעים

אם אתם מטמיעים את Compose באפליקציה באופן מצטבר, תוכלו להשתמש ב-API ‏colorResource כדי לקבל צבעים מקובץ 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. אין צורך לדעת מה סוג פריט הגרפיקה, פשוט צריך להשתמש ב-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
)

painterResource מפענח ומנתח את תוכן המשאב בשרשור הראשי.

פריטי גרפיקה וקטוריים מונפשים

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

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

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

גופנים

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

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