צבע דינמי נוסף לאפליקציה

1. לפני שמתחילים

ב-Codelab הזה תעדכנו את אפליקציה לתחילת הדרך, אפליקציה לחישוב טיפים, כדי להשתמש בתכונות החדשות ב-Material Design 3. התכונות האלה מאפשרות להחיל על ממשק המשתמש של האפליקציה ערכת נושא באופן דינמי על סמך הטפט של המשתמש. בהמשך מופיעים כמה צילומי מסך של האפליקציה עם צבע דינמי. תבחנו גם תרחישים נוספים שיאפשרו לכם לשלוט באופן שבו הצבעים מוחלים.

דרישות מוקדמות

מפתחים צריכים

היכרות עם מושגי בסיס בנושא עיצובים ב-Android
יש לכם ניסיון בשינוי העיצוב של אפליקציה

מה תלמדו

איך מבדילים בין רכיבי Material קיימים לבין עיצובים של Material 3
איך מעדכנים עיצוב ל-Material 3
איך יוצרים עיצובים באמצעות הכלים שלנו ואיך משתמשים בהם
איך מאפייני הנושא קשורים זה לזה

הדרישות

מחשב עם Android Studio מותקן.
קוד לאפליקציה Tip Time. https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution

2. סקירה כללית של אפליקציה למתחילים

אפליקציית Tip Time היא מחשבון טיפים עם אפשרויות להתאמה אישית של הטיפ. זו אחת מהאפליקציות לדוגמה מקורס ההדרכה שלנו בנושא יסודות Android ב-Kotlin.

3. עדכון יחסי תלות ב-Gradle

לפני שנעדכן את ערכת הנושא בפועל ונחיל את הצבע הדינמי, צריך לבצע כמה שינויים בקובץ build.gradle של האפליקציה.

בקטע dependencies, מוודאים שספריית ה-Material היא 1.5.0-alpha04 ואילך:

dependencies {
    // ...
    implementation 'com.google.android.material:material:<version>'
}

בקטע android, משנים את compileSdkVersion ואת targetSdkVersion.

עד 31 או מאוחר יותר:

android {
    compileSdkVersion 31
    // ...

    defaultConfig {
        // ...
        targetSdkVersion 31
    }
}

ההנחיות האלה מניחות שמדובר באפליקציה עם תלות עדכנית יחסית. אם האפליקציה לא משתמשת כבר ב-Material או בגרסה ישנה יותר, כדאי לעיין בהוראות שבמסמכי ההתחלה של רכיבי Material Design ל-Android.

בכל מקום שבו יצרתם את העיצובים, משנים את ההפניות של Theme.MaterialComponents.* ל-Theme.Material3.*. לחלק מהסגנונות עדיין אין סגנון חדש במרחב השמות Material3, אבל רוב הרכיבים עדיין יקבלו בירושה את הסגנון החדש אחרי שהעיצוב הראשי יעודכן ל-Theme.Material3.*. בתמונה שלמטה אפשר לראות שהכפתורים מקבלים עכשיו את העיצוב החדש עם הפינות המעוגלות.

בקובץ העיצוב שבהמשך, הדבר היחיד שהשתנה הוא עיצוב האב. בעוד רגע נחליף את העיצוב הזה לגמרי. חלק ממאפייני הצבע כבר לא רלוונטיים, וחלק מהסגנונות המותאמים אישית שיצרנו הם עכשיו סטנדרטיים ב-Material3, אבל רצינו שתהיה לך

themes.xml

<style name="Theme.TipTime" parent="Theme.Material3.Light">
   <!-- Primary brand color. -->
   <item name="colorPrimary">@color/green</item>
   <item name="colorPrimaryVariant">@color/green_dark</item>
   <item name="colorOnPrimary">@color/white</item>
   <!-- Secondary brand color. -->
   <item name="colorSecondary">@color/blue</item>
   <item name="colorSecondaryVariant">@color/blue_dark</item>
   <item name="colorOnSecondary">@color/black</item>
   <!-- Status bar color. -->
   <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
   <!-- For text input fields -->
   <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
   <!-- For radio buttons -->
   <item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
   <!-- For switches -->
   <item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>

4. הסבר על ערכות נושא של צבעים ותפקידי צבעים

מערכת הצבעים Material 3 משתמשת בגישה מאורגנת להחלת צבעים על ממשק המשתמש. חלק מהמאפיינים מ-Theme.AppCompat עדיין בשימוש. עם זאת, נוספו עוד מאפיינים בגרסה Theme.MaterialComponents.* ועוד יותר בגרסה Theme.Material3.*, ולכן חשוב לבדוק את כל המסכים באפליקציה כדי לוודא שמאפיינים שלא הוטמעו לא מופיעים בטעות מתוך ערכת הנושא הבסיסית.

הסבר על תפקידי הצבעים

יש יותר מ-20 מאפיינים שקשורים לצבע בעיצוב Material 3. יכול להיות שזה נשמע מסובך בהתחלה, אבל יש רק כמה צבעים מרכזיים שמשולבים עם אותם 4-5 תפקידי צבע כדי ליצור צבעים נגזרים.

קבוצות הצבעים האלה הן:

הצבע הראשי של האפליקציה
משני, הצבע המשני של האפליקציה
צבע שלישוני, שהוא צבע שלישי שמשלים את הצבע הראשי והצבע המשני
שגיאה, משמש לטקסטים ולתיבות דו-שיח של שגיאות
רקע
Surface, SurfaceVariant, Surface Inverse

התפקידים הם: ראשי, משני, שלישוני ושגיאה:

<base color>	צבע הבסיס
on<base color>	הצבע של הסמלים והטקסט שמופיעים על צבע הבסיס
‫<base color>Container	נגזר מהצבע הבסיסי, משמש ללחצנים, לתיבות דו-שיח וכו'
on<base color>Container	הצבע של הסמלים והטקסט במאגר

לדוגמה, כפתור פעולה צף (FAB) עם סגנון ברירת מחדל ב-Material 3 משתמש ב-Primary כצבע הבסיס שלו, ולכן הוא משתמש ב-primaryContainer לצבע הרקע של הלחצן וב-onPrimaryContainer לתוכן שלו.

כשמבצעים התאמה אישית של עיצוב באופן ידני, חשוב לוודא לפחות שהמאפיין on<base color> של כל צבע בסיסי שמשנים עדיין קריא.

השיטה המומלצת היא לשנות את כל התפקידים בקבוצת צבעים בו-זמנית, כדי שלא יהיו ארטיפקטים מהבסיס ועד לאפליקציה.

לצבעי הרקע והרקע יש בדרך כלל שני תפקידים: הצבע עצמו וon<base color> הסמלים או הטקסט שמופיעים עליו.

5. יצירת עיצוב Material 3 באמצעות Material Theme Builder

בעזרת הכלי Material Theme Builder, קל ליצור ערכת צבעים בהתאמה אישית, להשתמש בייצוא הקוד המובנה שלו כדי לבצע מיגרציה למערכת הצבעים M3 וליהנות מצבעים דינמיים. מידע נוסף material.io/material-theme-builder

העיצוב של אפליקציית Tip Time מכיל כמה סגנונות לרכיבים, אבל רוב הסגנונות הם ברירת מחדל בעיצובים של Material 3. שני צבעי המפתח היחידים שצריך להתייחס אליהם הם הצבע הראשי והצבע המשני.

הצבעים האלה תואמים לצבע ירוק ראשי (#1B5E20) ולצבע כחול משני (#0288D1).

אפשר להזין את הצבעים האלה בכלי ליצירת עיצוב Material ולייצא עיצוב מלא (בהנחה שיש קישור למאמר עם סקירה מלאה במקום אחר).

חשוב לדעת שהגוונים של הצבעים שתזינו עשויים להשתנות כדי להתאים לאלגוריתם ליצירת צבעים, וכדי להבטיח שהצבעים יהיו משלימים וקריאים.

בהמשך מוצגת קבוצת משנה של הערכים שנוצרים כשמזינים צבעים בהתאמה אישית.

6. עבודה עם קובצי ייצוא של Material Theme Builder

ארכיון הייצוא מכיל את הערכים ואת ספריות הערכים-night/ עם קובץ themes.xml משלהן, שמתאים לערכות נושא בהירות וכהות. כל הצבעים מוגדרים בקובץ values/colors.xml.

אפשר להעתיק את הקבצים כמו שהם, אבל תצטרכו לשנות את שם העיצוב ב-AndroidManifest.xml או בקובצי העיצוב כך שיהיה זהה בשניהם. שם ברירת המחדל מכלי הפיתוח הוא AppTheme.

מפעילים מחדש את האפליקציה והיא נראית כמעט בדיוק אותו דבר. שינוי בולט אחד הוא ב-Switch וב-RadioButtons, שהמצבים הנבחרים שלהם מעוצבים עכשיו עם גוונים מהצבע הראשי לעומת צבעים משניים. באפליקציות גדולות יותר, יכול להיות שתצטרכו לחזור לעיצובים מסוימים.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.tiptime">

   <application ...>
       <activity android:name=".MainActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />

               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
   </application>

</manifest>

7. הוספת צבע דינמי

אם משתמשים בערכת נושא מתאימה של Material 3, אפשר להפוך את ממשק המשתמש לדינמי באמצעות כמה תוספות קטנות.

‫Dynamic Colors API מאפשר לכם להחיל צבעים דינמיים על כל הפעילויות

באפליקציה, בפעילויות ספציפיות או בתצוגות או בקטעים ספציפיים. עבור

האפליקציה הזו, נחיל צבע דינמי באופן גלובלי.

יצירת קובץ של מחלקת אפליקציה

class TipTimeApplication: Application() {
    override fun onCreate() {
        // Apply dynamic color
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

צריך להפנות לקובץ החדש הזה במניפסט של Android:

AndroidManifest.xml

< application android name=".TipTimeApplication
<!--- Other existing attributes –>

</application >

במערכות Android מגרסה 12 ואילך, נבדק הטפט של המשתמש (לסכימה שמוגדרת כברירת מחדל) כדי ליצור כמה פלטות של גוונים. הערכים מלוחות הצבעים האלה משמשים ליצירת ThemeOverlay.

המחלקות DynamicColors רושמות ActivityLifecycleCallbacks שמבצעת יירוט ב-ActivityPreCreated כדי להחיל את שכבת העל של העיצוב הדינמי שנוצר על ידי המערכת או את העיצוב שסיפקתם.

8. החלת שכבת-על של עיצוב מותאם אישית

הכלים שלנו יכולים לייצא שכבות-על של ערכות נושא, אבל אפשר גם ליצור אותן באופן ידני אם אתם מבטלים מספר קטן של מאפיינים.

שכבת-על של עיצוב מיועדת לשימוש בשילוב עם עיצוב אחר, והיא מספקת רק את הערכים שישתנו מעל העיצוב הבסיסי.

נניח שמסיבה כלשהי, אולי מיתוג, אנחנו רוצים שגווני הצבע העיקרי יהיו גוונים של אדום. אפשר לעשות זאת עם הקבצים והמאפיינים הבאים.

colors.xml

<resources>
    <color name="overlay_light_primary">#9C4146</color>
    <color name="overlay_light_onPrimary">#FFFFFF</color> 
    <color name= "overlay_light_primaryContainer">#FFDADB</color>
    <color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >

themes_overlays.xml

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
    <item name="colorPrimary">@color/overlay_light_primary</item>
    <item name="colorOnPrimary">@color/overlay_light_onPrimary</item> 
    <item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item> 
    <item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>

במקרה של הקוד שלמעלה, מערכת Android 12 תחיל עיצוב בהיר דינמי ותוסיף את השינויים שלכם על גבי העיצוב הזה. לחלופין, אפשר להשתמש בכל ThemeOverlay תקין כרכיב אב, כולל כל אחד מהרכיבים הבאים:

ThemeOverlay.Material3.Light

ThemeOverlay.Material3.Dark

ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark

ThemeOverlay.Material3.DynamicColors.DayNight

כדי להשתמש ב-Theme Overlay הזה במקום בברירת המחדל של Material, צריך לשנות את השיחה ל-DynamicColors.applyToActivitiesIfAvailable ל:

DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)

9. הוספת צבע דינמי למאפיינים מותאמים אישית

עד עכשיו ביטלנו מאפיינים שכבר קיימים בערכת נושא של Material 3. יש עוד מקרה אפשרי של צבע דינמי שבו יכול להיות שיש לנו מאפיין מותאם אישית אחד או יותר שצריך להקצות.

כשאפליקציה בוחרת להשתמש בצבעים דינמיים, היא מקבלת גישה ל-5 לוחות צבעים טונאליים – שלושה לוחות צבעים להדגשה ושני לוחות צבעים ניטרליים עם התפקידים המשוערים הבאים:

system_accent1	גוונים של הצבע הראשי
system_accent2	גווני צבע משניים
system_accent3	גווני צבע שלישוניים
system_neutral1	רקעים ומשטחים ניטרליים
system_neutral2	משטחים ומתארים ניטרליים

לכל פלטה יש מספר שלבים טונאליים, מלבן

לשחור: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.

כשמעצבים ממשק משתמש עם צבעים דינמיים, כדאי להתמקד פחות בצבע הספציפי ויותר בקשר בין הגוון והבהירות של הרכיב לבין רכיבים אחרים במערכת העיצוב.

נניח שרוצים שהסמלים יהיו מעוצבים באמצעות פלטת הצבעים המשנית, והוספתם מאפיין לצביעת הסמלים עם הערך הבא בקובץ attrs.xml.

attrs.xml

<resources>
    <attr name="iconColor" format="color" />
</resources>

שכבת העל של העיצוב יכולה להיראות כך:

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight"> 
<item name="iconColor">@android:color/system_accent2_600</item>
</style>

כשמתקינים מחדש את האפליקציה ומשנים את הטפט, האפליקציה תזהה את הפלטה המשנית.

הפלטות האלה ספציפיות ל-Android 12 (API 31), ולכן צריך למקם את הקבצים הרלוונטיים בתיקיות עם הסיומת -v31, אלא אם ה-SDK המינימלי של האפליקציה מוגדר ל-31 ומעלה.

10. סיכום

ב-Codelab הזה למדתם איך:

מוסיפים יחסי תלות כדי לשדרג את העיצוב ל-Material 3.
הסבר על קבוצות הצבעים והתפקידים החדשים.
איך עוברים מעיצוב סטטי לצבע דינמי.
להבין איך להשתמש בשכבות-על של עיצובים ולהשתמש בצבע דינמי למאפייני עיצוב בהתאמה אישית.