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

כדאי לנסות את התכונה 'כתיבה מהירה'
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 יש את התכונה Force Dark, שמאפשרת למפתחים להטמיע במהירות עיצוב כהה בלי להגדיר באופן מפורש עיצוב DayNight.

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

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

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

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

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

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

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

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

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

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

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

התראות

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

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

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

אלה כמה מהמלכודות הנפוצות שכדאי להיזהר מהן:

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

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

מסכי הפעלה

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

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

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

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

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

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

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

כש-Activity מצהיר שהוא מטפל בשינויים בהגדרות, מתבצעת קריאה ל-method‏ 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;
}