Style API הוא פרדיגמה חדשה להתאמה אישית או לעיצוב של רכיבים ב-Jetpack פיתוח נייטיב, שעד עכשיו נעשה באמצעות שינויים. הוא נועד לאפשר התאמה אישית מעמיקה ופשוטה יותר.
ה-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 פיתוח נייטיב 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" }