Style API הוא פרדיגמה חדשה להתאמה אישית או ל "עיצוב" של רכיבים ב-Jetpack Compose, שבאופן מסורתי נעשה באמצעות מגבילים. הוא נועד לאפשר התאמה אישית מעמיקה וקלה יותר.
Styles API משפר את הגמישות בגורמי צורה שונים, מספק ביצועים טובים יותר ומאפשר ליצור בקלות מערכת עיצוב בהתאמה אישית. גם אם אתם לא צריכים רכיבים בהתאמה אישית, ל-Styles API יש הרבה יתרונות למערכת העיצוב שלכם.
חשוב להבחין בין סגנונות לבין מגדירי שינוי. סגנונות לא מחליפים את מגדירי השינוי, אבל הם כן מחליפים את הפרמטרים של הסגנון, כמו ריפוד וצבעים. כדי ליהנות מגמישות וביצועים משופרים, מומלץ לעבור לשימוש בסגנונות במקום בפרמטרים.
מיומנויות ב-Android
הצגת הקוד ב-GitHubסגנונות
android skills add stylesהיתרונות של סגנונות
- עיצוב פשוט יותר שמבוסס על מצבים: ה-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.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" }