Kotlin Android Fundamentals 10.1: Styles and themes

ה-codelab הזה הוא חלק מהקורס Android Kotlin Fundamentals. כדי להפיק את המרב מהקורס הזה, מומלץ לעבוד על ה-codelabs לפי הסדר. כל ה-codelab של הקורס מפורטים בדף הנחיתה של ה-codelab בנושא יסודות Kotlin ל-Android.

שיעור ה-Lab הזה הוא חלק מסדרה שמסבירה את העקרונות הבסיסיים של עיצוב אפליקציות ל-Android ומנחה אתכם בתהליך של בניית אפליקציה שמאתרת מפגשים של קבוצות מפתחים של Google‏ (GDG). האפליקציה מציגה מידע על מפגשים קרובים בצורה יפה ונגישה.

מומלץ לבצע את שלושת ה-codelab בסדרה הזו לפי הסדר, כי הם מתקדמים במשימות שלב אחר שלב:

• ‫10.1 סגנונות ועיצובים
• ‫10.2 Material Design,‏ dimens וצבעים
• ‫10.3 עיצוב לכולם

מבוא לעיצוב

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

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

רמה נוספת של עיצוב היא בניית תהליכים עקביים למשתמשים, או תרחישי שימוש, שמאפשרים למשתמשים להשלים משימות. סוג העיצוב הזה נקרא עיצוב חוויית משתמש (UXD), ויש מעצבים שמתמחים בו.

אם אין לכם גישה למעצב, הנה כמה טיפים שיעזרו לכם להתחיל:

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

הנה עוד כמה שאלות שכדאי לשאול את עצמכם כשאתם מתכננים חוויית שימוש מצוינת באפליקציה. בשיעורי ה-Lab הקודמים ללימוד תכנות למדתם טכניקות לפתרון הבעיות האלה:

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

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

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

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

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

מה שכדאי לדעת

חשוב שתכירו את:

• איך ליצור אפליקציות עם פעילויות וקטעים, ואיך לנווט בין קטעים ולהעביר נתונים
• שימוש בתצוגות ובקבוצות תצוגות כדי ליצור פריסה של ממשק משתמש (UI), כולל RecyclerView
• איך משתמשים ברכיבי ארכיטקטורה, כולל ViewModel, עם הארכיטקטורה המומלצת כדי ליצור אפליקציה יעילה ומובנית היטב
• קישור נתונים, קורוטינות ואיך לטפל בקליקים
• איך מתחברים לאינטרנט ומאחסנים נתונים במטמון באופן מקומי באמצעות מסד נתונים Room
• איך מגדירים מאפיינים של תצוגה מפורטת
• איך לחלץ משאבים מקובצי משאבי XML ולהשתמש בהם

מה תלמדו

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

הפעולות שתבצעו:

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

אפליקציית המתחילים GDG-finder מבוססת על כל מה שלמדתם עד עכשיו בקורס הזה.

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

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

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

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

בצילומי המסך שבהמשך מוצג איך האפליקציה תשתנה מתחילת ה-codelab ועד סופו.

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

הצגת מאפיינים

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

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

סגנונות

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

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

סגנון ברירת מחדל

• זהו הסגנון שמוגדר כברירת מחדל על ידי מערכת Android.

עיצובים

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

TextAppearance

• לעיצוב באמצעות מאפייני טקסט בלבד, כמו fontFamily.

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

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

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

1. מורידים ומריצים את אפליקציית ההתחלה של GDG-finder.
2. שימו לב שבמסך הבית יש הרבה טקסט בפורמט אחיד, ולכן קשה להבין על מה הדף ומה חשוב בו.
3. פותחים את קובץ הפריסה home_fragment.xml.
4. שימו לב שפריסת הרכיבים בתוך ScrollView מתבצעת באמצעות ConstraintLayout.
5. שימו לב שמאפייני הפריסה של האילוץ והשוליים מוגדרים בתצוגה לכל תצוגה, כי בדרך כלל המאפיינים האלה מותאמים אישית לכל תצוגה ומסך.
6. בתצוגת הטקסט title, מוסיפים מאפיין textSize כדי לשנות את גודל הטקסט ל-24sp.
   
   תזכורת: sp מייצג פיקסלים שלא תלויים בקנה מידה, שמוגדלים גם לפי צפיפות הפיקסלים וגם לפי העדפת גודל הגופן שהמשתמש מגדיר בהגדרות המכשיר. מערכת Android קובעת את גודל הטקסט שיוצג במסך כשהיא מציירת את הטקסט. תמיד משתמשים ב-sp כדי לציין את גודל הטקסט.

<TextView
       android:id="@+id/title"
...

android:textSize="24sp"

7. מגדירים את textColor של תצוגת הטקסט title לאפור אטום, על ידי הגדרת ערך aRGB של #FF555555.

<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"

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

טיפ: ערך aRGB מבטא את שקיפות האלפא של הצבע, את ערך האדום, את ערך הירוק ואת ערך הכחול. ערך aRGB משתמש במספר הקסדצימלי בטווח 00 עד FF לכל רכיב צבע.

#(alpha)(red)(green)(blue)

#(00-FF)(00-FF)(00-FF)(00-FF)

דוגמאות:

• #FFFF0000 לאדום אטום
• ‫#5500FF00 לירוק שקוף למחצה
• ‫#FF0000FF opaque blue

9. מסגננים את כותרת המשנה כך שיהיה לה אותו צבע כמו לכותרת, עם גופן קטן יותר, 18sp. (ערך האלפא שמוגדר כברירת מחדל הוא FF, אטום. אפשר להשמיט את ערך האלפא אם לא משנים אותו).

<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

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

<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"

11. לפני שממשיכים, חשוב לבטל את המאפיינים textAllCaps, textStyle ו-background בתצוגה subtitle.
12. מריצים את האפליקציה, והיא אמורה להיראות טוב יותר.

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

‫Android מאפשר לאפליקציות להוריד גופנים בזמן הריצה באמצעות Downloadable Fonts API. אם האפליקציה משתמשת באותו גופן כמו אפליקציה אחרת במכשיר, מערכת Android מורידה את הגופן רק פעם אחת, וכך נחסך מקום באחסון של המכשיר.

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

שלב 1: החלת גופן שאפשר להוריד

1. פותחים את home_fragment.xml בכרטיסייה עיצוב.
2. בחלונית Component Tree, בוחרים בתצוגת הטקסט title.
3. בחלונית מאפיינים, מחפשים את המאפיין fontFamily. אפשר למצוא אותו בקטע כל המאפיינים או פשוט לחפש אותו.
4. לוחצים על החץ לתפריט הנפתח.
5. גוללים אל גופנים נוספים ובוחרים אותה. ייפתח חלון משאבים.

6. בחלון משאבים, מחפשים את lobster או רק את lo.
7. בתוצאות, בוחרים באפשרות Lobster Two.
8. משמאל, מתחת לשם הגופן, לוחצים על לחצן האפשרויות יצירת גופן להורדה. לוחצים על אישור.
9. פותחים את קובץ Android Manifest.
10. קרוב לתחתית של קובץ המניפסט, מחפשים את התג החדש <meta-data> עם המאפיינים name ו-resource שמוגדרים לערך "preloaded_fonts". התג הזה מציין ל-Google Play Services שהאפליקציה הזו רוצה להשתמש בגופנים שהורדו. כשהאפליקציה פועלת ומבקשת את הגופן Lobster Two, ספק הגופן מוריד את הגופן מהאינטרנט, אם הגופן עדיין לא זמין במכשיר.

<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>

11. בתיקייה res/values, מחפשים את הקובץ preloaded_fonts.xml, שמוגדר בו המערך שמפרט את כל הגופנים שאפשר להוריד לאפליקציה הזו.
12. באופן דומה, הקובץ res/fonts/lobster_two.xml מכיל מידע על הגופן.
13. פותחים את home_fragment.xml ורואים בקוד ובתצוגה המקדימה שהגופן Lobster Two מוחל על title TextView, ולכן הוא מוחל על הכותרת.

14. פותחים את res/values/styles.xml ובודקים את עיצוב ברירת המחדל AppTheme שנוצר עבור הפרויקט. כך זה נראה כרגע. כדי להחיל את הגופן החדש Lobster Two על כל הטקסט, צריך לעדכן את העיצוב הזה.
    
15. בתג <style>, שימו לב למאפיין parent. כל תג סגנון יכול לציין הורה ולקבל בירושה את כל המאפיינים של ההורה. הקוד מציין את Theme שמוגדר על ידי ספריות Android. העיצוב MaterialComponents שמגדיר הכול, החל מאופן הפעולה של הלחצנים ועד לאופן הציור של סרגלי הכלים. העיצוב כולל הגדרות ברירת מחדל הגיוניות, כך שאתם יכולים להתאים אישית רק את החלקים שאתם רוצים. האפליקציה משתמשת בגרסה Light של העיצוב הזה ללא סרגל הפעולות (NoActionBar), כפי שאפשר לראות בצילום המסך שלמעלה.
    

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>

16. בתוך הסגנון AppTheme, מגדירים את משפחת הגופנים ל-lobster_two. צריך להגדיר גם את android:fontFamily וגם את fontFamily, כי ערכת העיצוב הראשית משתמשת בשניהם. אפשר ללחוץ על home_fragment.xml בכרטיסייה עיצוב כדי לראות תצוגה מקדימה של השינויים.

<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>

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

שלב 2: החלת העיצוב על הכותרת

1. ב-home_fragment.xml, מחפשים את תצוגת הטקסט title, שבה מופיע מאפיין הגופן lobster_two. מוחקים את מאפיין fontFamily ומריצים את האפליקציה. מכיוון שהגופן מוגדר כברירת מחדל בערכת הנושא, לא יחול שינוי.
2. מחזירים מאפיין fontFamily אחר לתצוגת הטקסט title:
   app:fontFamily="serif-monospace"
מוודאים שהוא נמצא במרחב app.

<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"

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

4. מסירים את המאפיין fontFamily מתצוגת הטקסט title.

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

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

שלב 1: יצירת סגנון

1. פתיחת res/values/styles.xml.
2. בתוך התג <resources>, מגדירים סגנון חדש באמצעות התג <style>, כמו שמוצג בהמשך.

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

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

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

3. בתוך הסגנון החדש, מגדירים שני פריטים. בפריט אחד, מגדירים את הערך textSize ל-24sp. בפריט השני, מגדירים את textColor לאותו אפור כהה שבו השתמשתם קודם.

 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>

4. מגדירים סגנון אחר לכתוביות. נותנים לו את השם TextAppearance.Subtitle.
5. מכיוון שההבדל היחיד מ-TextAppearance.Title יהיה בגודל הטקסט, צריך להגדיר את הסגנון הזה כצאצא של TextAppearance.Title.
6. בתוך הסגנון Subtitle, מגדירים את גודל הטקסט ל-18sp. כך נראה הסגנון אחרי ההשלמה:

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

שלב 2: החלת הסגנון שיצרתם

1. ב-home_fragment.xml, מוסיפים את TextAppearance.‫Title style לתצוגת הטקסט title. מוחקים את המאפיינים textSize ו-textColor.
   
   העיצובים מחליפים את כל הסגנונות של TextAppearance שהגדרתם. (בתרשים הפירמידה שבתחילת ה-codelab מוצג הסדר שבו מוחלים הסגנונות). משתמשים במאפיין textAppearance כדי להחיל את הסגנון כ-TextAppearance, כך שהגופן שמוגדר ב-Theme יחליף את מה שהגדרתם כאן.

<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"

2. מוסיפים גם את הסגנון TextAppearance.Subtitle לתצוגת הטקסט subtitle ומוחקים את המאפיינים textSize ו-textColor. צריך להחיל את הסגנון הזה גם כ-textAppearance, כדי שגופן הערך שמוגדר בעיצוב יבטל את מה שהגדרתם כאן.

<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"

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

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

פרויקט Android Studio: ‏ GDGFinderStyles.

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

• מגדירים סגנונות בקובץ המשאבים styles.xml באמצעות התגים <style> ו-<item>.

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

שימוש בגופנים להורדה מאפשר למשתמשים לגשת לגופנים בלי להגדיל את הגודל של קובץ ה-APK. כדי להוסיף גופן להורדה לתצוגה:

1. בוחרים את התצוגה בכרטיסייה עיצוב, ואז בוחרים באפשרות עוד גופנים בתפריט הנפתח של מאפיין fontFamily.
2. בתיבת הדו-שיח משאבים, מוצאים גופן ובוחרים בלחצן האפשרויות יצירת גופן להורדה.
3. מוודאים שקובץ המניפסט של Android כולל תג meta-data לגבי גופנים שנטענו מראש.

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

מסמכי תיעוד למפתחי Android:

• סגנונות ועיצובים
• גופנים שאפשר להוריד
• גופנים ב-XML
• הסבר על sp
• TextView מאפיינים
• משאב סגנון
• MaterialComponents עיצוב

מקורות מידע נוספים:

• איך הטקסט נראה
• הקסדצימלי
• פיתוח אפליקציות ל-Android באמצעות Kotlin (קורס ב-Udacity)
• ‫Kotlin Bootcamp for Programmers (קורס ב-Udacity)
• סדנאות תכנות של Kotlin Bootcamp for Programmers

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

• אם צריך, מקצים שיעורי בית.
• להסביר לתלמידים איך להגיש מטלות.
• בודקים את שיעורי הבית.

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

אם אתם עובדים על ה-codelab הזה לבד, אתם יכולים להשתמש במשימות האלה כדי לבדוק את הידע שלכם.

עונים על השאלות הבאות

שאלה 1

באיזה תג משתמשים כדי להגדיר ערכות נושא?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

שאלה 2

מה מהבאים הוא לא שימוש טוב בסגנונות?

‫▢ מציינים את המגבלות של תצוגה.

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

‫▢ איחוד גודל הגופן בתצוגות השונות.

‫▢ מציינים את צבע הטקסט לקבוצת תצוגות.

שאלה 3

מה ההבדל בין ערכות נושא לבין סגנונות?

‫▢ Themes חלים על כל האפליקציה, אבל אפשר להחיל סגנונות על תצוגות ספציפיות.

▢ אי אפשר להגדיר שנושאים יירשו הגדרות מנושאים אחרים, אבל אפשר להגדיר שסגנונות יירשו הגדרות מסגנונות אחרים.

▢ סגנונות לא יכולים לרשת סגנונות אחרים, אבל ערכות נושא יכולות לרשת ערכות נושא אחרות.

‫▢ העיצובים מסופקים על ידי מערכת Android, והסגנונות מוגדרים על ידי המפתח.

שאלה 4

אם לרכיב TextView באפליקציה יש Theme שמגדיר את גודל הגופן ל-12sp, סגנון מוגדר שמגדיר אותו ל-14sp ומאפיין fontSize עם הערך 16sp, מה יהיה גודל הגופן שיוצג במסך?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

עוברים לשיעור הבא: 10.2: Material Design, dimens, and colors

קישורים ל-codelabs אחרים בקורס הזה מופיעים בדף הנחיתה של ה-codelabs בנושא יסודות Android Kotlin.