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

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

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

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

מידות

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

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

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

סמלים

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

כדי לשרטט סמל, אפשר להשתמש 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:2024.06.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

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

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