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

רוצה לנסות את שיטת הכתיבה?

Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. איך עובדים עם עיצוב נושאים ב-Compose

ערכת צבעים – Material Design 3 →

העיצוב הכהה זמין ב-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, כי מערכת הצבעים שלו, כמו מאפייני העיצוב ?attr/colorSurface ו-?attr/colorOnSurface, מאפשרת גישה קלה לצבעים מתאימים. אתם יכולים להתאים אישית את המאפיינים האלה בעיצוב.

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

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

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

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

• קלים: MODE_NIGHT_NO.

• כהה: MODE_NIGHT_YES.

• ברירת המחדל של המערכת: MODE_NIGHT_FOLLOW_SYSTEM.

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

• ברמת API 31 ומעלה, משתמשים ב-UiModeManager#setApplicationNightMode כדי להודיע למערכת באיזה עיצוב פועלת האפליקציה. כך המערכת תוכל להתאים את העיצוב במסך הפתיחה.

• ב-API ברמת API 30 ומטה, משתמשים ב-AppCompatDelegate.setDefaultNightMode() כדי להחליף את העיצוב.

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

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

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

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

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.
}

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;
}