@ExperimentalStyle API הוא פרדיגמה חדשה להתאמה אישית או לעיצוב של רכיבים ב-Jetpack Compose. בעבר, ההתאמה האישית נעשתה באמצעות שינויים. ה-API החדש נועד לאפשר התאמה אישית עמוקה ופשוטה יותר.
Styles API משפר את הגמישות בגורמי צורה שונים, מספק ביצועים טובים יותר ומאפשר ליצור בקלות מערכת עיצוב בהתאמה אישית. גם אם אתם לא צריכים רכיבים בהתאמה אישית, ל-Styles API יש יתרונות רבים למערכת העיצוב שלכם.
חשוב להבחין בין הדברים הבאים: סגנונות לא מחליפים את התכונות לשינוי, אבל הם כן מחליפים את פרמטרים העיצוב, כמו ריווח פנימי וצבעים. מומלץ לעבור לשימוש בסגנונות במקום בפרמטרים כדי לשפר את הגמישות והביצועים.
היתרונות של סגנונות
- פשוט יותר להגדיר סגנונות מבוססי-מצב: ה-API מספק דרך תמציתית יותר להגדיר סגנונות שמשתנים בהתאם למצבים שונים (למשל, ריחוף, מיקוד, לחיצה), ומצמצם באופן משמעותי את קוד ה-boilerplate בהשוואה למערכת של שינוי המאפיינים.
- שיפור המעברים בין מצבים באנימציה: Style API מאפשר אנימציה מובנית של מאפייני סגנון בין מצבים עם מאפייני ביצועים אופטימליים, וכך נמנעות קומפוזיציות מחדש שמתרחשות בגישה הנוכחית של
animateColorAsState. - מייעלים את ממשקי ה-API של הרכיבים: הוספנו פרמטר Style יחיד להתאמה אישית, וכך ממשקי ה-API של הרכיבים פשוטים הרבה יותר ומציעים גמישות רבה יותר.
- פחות קומפוזיציות מחדש שמובילות לביצועים טובים יותר בהשוואה למשנים: הסגנונות מופעלים בשלבי הציור והפריסה של Compose, ודילגו על שלב הקומפוזיציה.
- סט סטנדרטי יותר של ממשקי API: סט סטנדרטי של מאפייני סגנון מאפשר להגדיר סגנון לכל רכיב.
מושגי ליבה
| קונספט | תיאור |
|---|---|
Style |
ממשק שמגדיר את המראה של רכיב בממשק משתמש, עם קבוצה סטנדרטית של מאפיינים שניתנים לעיצוב. הוא דומה לסגנונות CSS ואפשר להתאים אותו אישית באופן מקומי או באמצעות ערכת נושא. סגנונות דורסים אחד את השני. אם מגדירים מאפיין פעמיים (למשל, background()), מקבלים ערך סופי יחיד. |
StyleScope |
היקף של מקבל עבור הפונקציה applyStyle() בתוך Style. הוא מספק פונקציות להגדרת מאפיינים חזותיים (padding, background, border וכו') ולגישה ל-StyleState הנוכחי. |
StyleState |
מספק מצב (למשל, isEnabled, isPressed, isChecked, מצבים מותאמים אישית) שאפשר להשתמש בו בסגנון כדי להגדיר עיצוב מותנה. |
תחילת העבודה: הוספת יחסי תלות
כדי להשתמש בממשקי ה-API בפרויקט שלכם, צריך לוודא שאתם משתמשים בגרסת האלפא האחרונה של Jetpack Compose foundation. בקובץ settings.gradle.kts, מוסיפים את מאגר ה-Maven של תמונת המצב לרשימת המאגרים שבהם רוצים להשתמש.
ב-libs.versions.toml או ישירות בקובץ app/build.gradle.kts, מגדירים את גרסת Compose ל-1.12.0-alpha03:
compose = "1.12.0-alpha03"
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" }