ל-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
מומלץ עבורך
- הערה: טקסט הקישור מוצג כאשר JavaScript מושבת
- Loading images {:#loading-images}
- עיצוב Material 2 ב-Compose
- מערכות עיצוב בהתאמה אישית בכתיבה