PracticU

Themes

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA › Themes
מילון מושגים:
תגית - סימון בקוד, למשל ב-HTML, שתוחם רכיב ומגדיר את תפקידו או תכונותיו. גם תווית לסימון וקיטלוג פריטים.
Android - מערכת הפעלה מבוססת Linux לטלפונים ולמכשירים ניידים, שפותחה על ידי גוגל.
XML - שפת סימון לייצוג נתונים מובְנים בעזרת תגיות, המשמשת להחלפת מידע בין מערכות ולקובצי הגדרות.
הערה - טקסט בקוד שמסביר אותו לבני אדם ואינו מבוצע על ידי המחשב.
באג - תקלה או שגיאה בקוד שגורמת לתוכנה להתנהג בניגוד למצופה.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.

Themes
Theme (ערכת נושא) הוא המכלול הכללי של הצבעים, הגופנים והרקעים שנותן לאפליקציה את חזותה. ההרצאה מבהירה למה בחירת theme בדיזיינר לא משנה את האפליקציה בהרצה, איפה ה-theme באמת מוגדר, ואיך לדרוס בו צבעים, ערכים וסגנונות לכל האפליקציה.
איך זה עובד
1. הדיזיינר מול ההרצה: בחירת theme ברשימה בדיזיינר (למשל AppCompat) משנה רק את התצוגה בדיזיינר. בהרצה האפליקציה ממשיכה להשתמש ב-theme הכחול הקודם.
2. איפה זה מוגדר: בקובץ המניפסט, בתגית application, יש android:theme שמפנה ל-style בקובץ styles.xml. ברירת המחדל נקראת AppTheme והיא יורשת מ-Dark ActionBar.
3. שלושה צבעים שדורסים: בקובץ הסגנונות מוגדרים שלושה צבעים מ-colors.xml שדורסים את ברירות המחדל של ה-theme. colorPrimary שולט ב-action bar (בדוגמה סגול), colorPrimaryDark שולט ב-status bar (בדוגמה צהוב), ו-colorAccent שולט בפקדים כמו CheckBox ו-RadioButton (בדוגמה כחול). כאשר סימנו אותם כהערה, ההרצה זהתה למה שבדיזיינר.
4. דריסת תכונות נוספות: מוסיפים item עם name של תכונה קיימת, למשל colorBackground, textColorHint או textSize.
5. הערה חשובה: כדי שהדריסה תעבוד בזמן ריצה, צריך לשים את הערכים בקבצים שלהם, צבעים ב-colors.xml וגדלים ב-dimens.xml, ולהפנות אליהם מה-style. אחרת יש בעיה בהרצה בגלל באג של אנדרואיד. בדוגמה הוגדרו theme_color_background, theme_text_color_hint ו-theme_text_size (30sp). הם חלים על כל האפליקציה, גם בלי סגנון ברכיב.
6. סגנון לרכיב ברמת ה-theme: מגדירים style ללחצנים, Regular Button Style, עם background, textColor, textSize ו-gravity. במקום להציב אותו בכל לחצן, מוסיפים ב-theme item בשם buttonStyle שמפנה אליו. כך כל הלחצנים מקבלים אותו. מי שדורס כך צריך להגדיר בסגנון גם את שאר התכונות.
7. בלי action bar: אם לא צריכים את ה-action bar (כותרת ותפריט options menu) ורוצים יותר מקום במסך, אפשר להשתמש ב-theme NoActionBar.
אחרי ההרצאה אפשר לשנות את צבעי האפליקציה ואת התכונות שלה ברמת ה-theme, ולהחיל סגנון על כל הרכיבים מאותו סוג.

פרקי ההרצאה: Themes

  1. 00:00

    מהו Theme באפליקציה

  2. 01:12

    בחירת Theme בדיזיינר

  3. 02:15

    Theme במניפסט וה-AppTheme

  4. 03:28

    למה ה-Theme לא משתנה בריצה

  5. 05:08

    שלושת הצבעים הראשיים של ה-Theme

  6. 07:36

    דריסת תכונות בתוך ה-Theme

  7. 09:31

    העברת ערכי ה-Theme לקבצי Resources

תמלול ההרצאה: Themes

הטקסט המלא של הדקות הראשונות בהרצאה «Themes» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

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

  2. 00:21

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

  3. 00:33

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

  4. 00:55

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

  5. 01:19

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

  6. 01:46

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

  7. 02:09

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

  8. 02:26

    אז איפה בעצם ההשפעה של הטים על האפליקציה? אז דבר ראשון זה מגיע מקובץ המניפסט. אם אנחנו נכנסים לקובץ המניפסט אנחנו יכולים לראות כאן שבתגית של האפליקיישן יש הגדרה של איזה טים לקחת עבור כל האפליקציה ב-run time.

  9. 02:42

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

  10. 03:13

    הזה בל דיפולט נקרא באפ-תים ואנחנו רואים שהוא יורש איזשהו תים שנקרא Dark Action Bar. התים שמקודם הגדרנו בדיזיינר נקרא AppCompat.

  11. 03:28

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

  12. 03:42

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

  13. 04:01

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

  14. 04:21

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

  15. 04:55

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

  16. 05:07

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

  17. 05:41

    הצבע הראשון נקרא color primary. color primary אחראי על האקשן בר. בואו נשים אותו באיזה סוג של סגול, נחזור בחזרה ונראה שהאקשן בר בעצם הפך להיות סגול.

  18. 05:57

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

  19. 06:17

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

  20. 06:29

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

  21. 07:07

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

  22. 07:39

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

  23. 08:05

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

  24. 08:30

    בואו ניקח את ה-HintColor וניתן לו תוג של כזה ונדרוס את ה-TextSize לדוגמה וניתן לו 30 SP ועכשיו הערה חשובה בנוגע לזה בכדי שזה באמת יעבוד כמו שצריך בזמן הריצה אנחנו חייבים את ההגדרות האלה לשים בקבצים המתאימים להם לדוגמה Color לשים את זה ב-Colors ו-TextSize לשים את זה ב-Dimensions אחרת תהיה בעיה להציג את זה בזמן הריצה עקב

  25. 09:14

    איזשהו באג מסוים של אנדרואיד אז אין בעיה בואו ניגש לקובץ הצבעים נגדיר כאן color ניתן לו איזשהו שם theme color background ופשוט נגזור נשים פה את ההגדרה ונגיד כאן שההגדרה נמצאת ב-color theme color background הלאה בואו ניקח את הצבע הזה צבע הבא בתור היה TeamTextColorHint ונגדיר שב-Color יש לנו TeamTextColorHint.

  26. 10:15

    ההגדרה הזאת הולכת להיות בקובץ ה-Dimensions. בואו ניקח את הקובץ ה-Defaultי של ה-Dimensions, שני אלה אפשר להיפטר מהם, דיימן, אנחנו רוצים TeamTextSize וזה היה 30 SP. בואו נחזור לכאן, רימנטים טקסט סייז בואו נראה איך זה בעצם

  27. 10:46

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

לקורס המלא: קורס פיתוח אפליקציות לאנדרואיד

ההרצאה הקודמת: Styling

ההרצאה הבאה: הוספת עברית לאפליקציה

קורסים נוספים במסלול

  • קורס יסודות התכנות - שפת JAVA - קורס ג'אווה למתחילים
  • קורס פיתוח אפליקציות - לאייפון iPhone iOS - ב-Swift-Xcode
  • קורס פלאטר - Flutter - שפת DART של גוגל למובייל - פיתוח אפליקציות לאנדרואיד ואייפון
  • קורס PhoneGap - פיתוח אפליקציות לאנדרואיד ואייפון