הטמעת עיצוב כהה

איך עושים את זה ב-Compose
‫Jetpack Compose היא ערכת הכלים המומלצת לפיתוח ממשק משתמש ב-Android. איך עובדים עם עיצובים ב-Compose.
ערכת צבעים – Material Design 3 ←

תרשים 1. עיצוב כהה.

העיצוב הכהה זמין ב-Android מגרסה 10 (רמת API‏ 29) ואילך. היתרונות של השיטה הזו:

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

העיצוב הכהה חל על ממשק המשתמש של מערכת Android ועל האפליקציות שפועלות במכשיר.

יש שלוש דרכים להפעיל את העיצוב הכהה ב-Android מגרסה 10 ואילך:

  • כדי להפעיל את העיצוב הכהה, משתמשים בהגדרת המערכת: עוברים אל הגדרות > תצוגה > עיצוב.
  • כשההגדרה מופעלת, אפשר להשתמש בכפתור ב"הגדרות מהירות" כדי להחליף עיצובים ממגש ההתראות.
  • במכשירי Pixel, הפעלה של מצב החיסכון בסוללה מפעילה גם את העיצוב הכהה. יכול להיות שבמכשירים אחרים אין תמיכה בהתנהגות הזו.

במאמר הכהיית תוכן מהאינטרנט ב-WebView מוסבר איך להחיל עיצוב כהה על תוכן מבוסס-אינטרנט באמצעות רכיב WebView.

תמיכה בעיצוב כהה באפליקציה

כדי לתמוך בעיצוב כהה, מגדירים את העיצוב של האפליקציה (בדרך כלל נמצא ב-res/values/styles.xml) כך שיירש מעיצוב DayNight:

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

אפשר גם להשתמש בעיצוב הכהה של Material Components:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

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

עיצובים וסגנונות

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

שני מאפייני עיצוב חשובים במיוחד לעיצוב כהה:

  • ‫?android:attr/textColorPrimary: צבע טקסט למטרות כלליות. הוא כמעט שחור בעיצוב בהיר וכמעט לבן בעיצוב כהה. הוא מכיל מצב מושבת.
  • ‫?attr/colorControlNormal: צבע סמל לשימוש כללי. הוא מכיל מצב מושבת.

מומלץ להשתמש ברכיבי Material Design, כי מערכת ערכות הצבעים שלהם, כמו מאפייני העיצוב ?attr/colorSurface ו-?attr/colorOnSurface, מספקת גישה קלה לצבעים מתאימים. אתם יכולים להתאים אישית את המאפיינים האלה בעיצוב שלכם.

שינוי העיצובים באפליקציה

אתם יכולים לאפשר למשתמשים לשנות את העיצוב של האפליקציה בזמן שהיא פועלת. האפשרויות הבאות מומלצות:

  • בהיר
  • כהה
  • ברירת המחדל של המערכת (האפשרות המומלצת)

האפשרויות האלה ממופות ישירות למצבים של AppCompat.DayNight:

כדי להחליף את העיצוב:

הפעלה ידנית של מצב כהה

ב-Android 10 יש תכונה שנקראת הפעלה ידנית של מצב כהה, שמאפשרת למפתחים להטמיע במהירות עיצוב כהה בלי להגדיר במפורש עיצוב DayNight.

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

אפליקציות צריכות להביע הסכמה ל'הפעלה ידנית של מצב כהה' על ידי הגדרת android:forceDarkAllowed="true" בעיצוב של ה-Activity. המאפיין הזה מוגדר בכל העיצובים הבהירים שסופקו על ידי המערכת ו-AndroidX, כמו Theme.Material.Light. כשמשתמשים בהפעלה ידנית של מצב כהה, צריך לבדוק את האפליקציה ביסודיות ולהחריג תצוגות לפי הצורך.

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

השבתת ההפעלה הידנית של מצב כהה בתצוגה

אפשר לשלוט בהפעלה ידנית של מצב כהה בתצוגות ספציפיות באמצעות מאפיין הפריסה android:forceDarkAllowed או באמצעות setForceDarkAllowed().

תוכן מהאינטרנט

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

שיטות מומלצות

בקטעים הבאים מפורטות שיטות מומלצות להטמעת עיצובים כהים.

התראות ווידג'טים

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

התראות

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

ווידג'טים ותצוגות של התראות בהתאמה אישית

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

בעיות נפוצות שכדאי לשים לב אליהן:

  • בהנחה שצבע הרקע תמיד בהיר.
  • צבעי טקסט בקידוד קשיח.
  • הגדרת צבע רקע בתוך הקוד תוך שימוש בצבע הטקסט שמוגדר כברירת מחדל.
  • שימוש בסמל שניתן לשרטוט בצבע סטטי.

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

מסכי פתיחה

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

מסירים צבעים שמוגדרים בקוד, כמו צבעי רקע שמוגדרים באופן פרוגרמטי ללבן. במקום זאת, צריך להשתמש במאפיין העיצוב ?android:attr/colorBackground.

שינויים בהגדרות

כשהעיצוב של האפליקציה משתנה, דרך הגדרת המערכת או AppCompat, זה מפעיל שינוי בהגדרות של uiMode. זה אומר שהפעילויות נוצרות מחדש באופן אוטומטי.

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

כדי להטמיע את העיצוב הכהה באפליקציה, צריך להצהיר שכל Activity יכולה לטפל בשינוי ההגדרה uiMode:

<activity
    android:name=".MyActivity"
    android:configChanges="uiMode" />

כש-Activity מצהיר שהוא מטפל בשינויים בהגדרות, השיטה onConfigurationChanged() שלו מופעלת כשיש שינוי בעיצוב.

כדי לבדוק מהו העיצוב הנוכחי, אפליקציות יכולות להריץ קוד כזה:

Kotlin

val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
when (currentNightMode) {
    Configuration.UI_MODE_NIGHT_NO -> {} // Night mode is not active, we're using the light theme.
    Configuration.UI_MODE_NIGHT_YES -> {} // Night mode is active, we're using dark theme.
}

Java

int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK;
switch (currentNightMode) {
    case Configuration.UI_MODE_NIGHT_NO:
        // Night mode is not active, we're using the light theme
        break;
    case Configuration.UI_MODE_NIGHT_YES:
        // Night mode is active, we're using dark theme
        break;
}