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

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

'Jetpack פיתוח נייטיב' היא ערכת הכלים המומלצת לממשק המשתמש ל-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 Materials (רכיבי עיצוב) כהים עיצוב:

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

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

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

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

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

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

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

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

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

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

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

• אור: MODE_NIGHT_NO.

• כהה: MODE_NIGHT_YES

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

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

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

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

הערה: החל מגרסה 1.1.0 של AppCompat, setDefaultNightMode() יוצר מחדש באופן אוטומטי את כל הפעילויות שהתחילו.

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

ב-Android 10 תמצאו את התכונה אילוץ כהה, תכונה שמאפשרת למפתחים להטמיע במהירות עיצוב כהה בלי להגדיר במפורש עיצוב 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.

הערה: רכיבי drawables בנושא כהה מסוג android:windowBackground פועלים רק ב-Android 10.

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

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

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

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

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

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

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

KotlinJava

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

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