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

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

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

ערכת צבעים - עיצוב חומר 3 ←

העיצוב הכהה זמין ב-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() כדי להחליף את העיצוב.

הפעלה ידנית של כהה

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

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

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

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

השבתת ההגדרה 'אילוץ כהה' בתצוגה

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

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

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

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

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

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

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

התראות

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

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

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

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

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

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

מסכי הפעלה

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

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

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

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

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

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

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

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