Style API הוא פרדיגמה חדשה להתאמה אישית או 'עיצוב' של רכיבים ב-Jetpack Compose, שעד עכשיו נעשה באמצעות שינויים. הוא נועד לאפשר התאמה אישית מעמיקה ופשוטה יותר.
ה-Styles API משפר את הגמישות בפורמטים שונים, מספק ביצועים טובים יותר ומאפשר ליצור בקלות מערכת עיצוב בהתאמה אישית. גם אם אתם לא צריכים רכיבים בהתאמה אישית, ל-Styles API יש הרבה יתרונות למערכת העיצוב שלכם.
חשוב להבחין בין הדברים הבאים: סגנונות לא מחליפים את התכונות לשינוי, אבל הם כן מחליפים את פרמטרים של עיצוב, כמו ריווח פנימי וצבעים. מומלץ לעבור לשימוש בסגנונות במקום בפרמטרים כדי לשפר את הגמישות והביצועים.
היתרונות של סגנונות
- מפשט את העיצוב שמבוסס על מצב: ה-API מספק דרך תמציתית יותר להגדיר סגנונות שמשתנים בהתאם למצבים שונים (למשל, ריחוף, מיקוד, לחיצה), ומצמצם באופן משמעותי את קוד ה-boilerplate בהשוואה למערכת של שינוי המאפיינים.
- שיפור המעברים בין מצבים מונפשים: Style API מאפשר אנימציה מובנית של מאפייני סגנון בין מצבים עם מאפייני ביצועים אופטימליים, וכך נמנעות קומפוזיציות מחדש שמתרחשות בגישה הנוכחית של
animateColorAsState. - מפשטים את ממשקי ה-API של הרכיבים: הוספנו פרמטר Style יחיד להתאמה אישית, וכך ממשקי ה-API של הרכיבים פשוטים בהרבה ומציעים גמישות רבה יותר.
- פחות קומפוזיציות מחדש שמובילות לביצועים טובים יותר בהשוואה למאפייני שינוי: סגנונות פועלים בשלבי הציור והפריסה של Compose, ומדלגים על שלב הקומפוזיציה.
- סט סטנדרטי יותר של ממשקי API: סט סטנדרטי של מאפייני סגנון מאפשר להגדיר סגנון לכל רכיב.
מושגי ליבה
| קונספט | תיאור |
|---|---|
Style |
ממשק שמגדיר את המראה של רכיב בממשק משתמש, עם קבוצה סטנדרטית של מאפיינים שניתנים לעיצוב. הוא דומה לסגנונות CSS ואפשר להתאים אותו אישית באופן מקומי או באמצעות ערכת נושא. הסגנונות דורסים אחד את השני. אם מגדירים מאפיין פעמיים (למשל, background()), מקבלים ערך סופי יחיד. |
StyleScope |
היקף של מקבל עבור הפונקציה applyStyle() בתוך סגנון. הוא מספק פונקציות להגדרת מאפיינים חזותיים (שוליים פנימיים, רקע, גבול וכו') ולגישה ל-StyleState הנוכחי. |
StyleState |
מספק מצב (למשל, isEnabled, isPressed, isChecked, מצבים מותאמים אישית) שאפשר להשתמש בו בסגנון כדי להגדיר עיצוב מותנה. |
תחילת העבודה: הוספת יחסי תלות
כדי להשתמש בממשקי ה-API בפרויקט שלכם, צריך לוודא שאתם משתמשים בגרסת האלפא האחרונה של Jetpack Compose foundation. בקובץ settings.gradle.kts, מוסיפים את מאגר ה-Maven של תמונת המצב לרשימת המאגרים שבהם רוצים להשתמש.
ב-libs.versions.toml או ישירות בקובץ app/build.gradle.kts, מגדירים את גרסת Compose ל-1.11.0-alpha06:
compose = "1.11.0-alpha06"
androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }