PracticU

Options Menu

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

Options Menu
בשיעור הזה בונים באפליקציית אנדרואיד את סוג התפריט הראשון, Options Menu, שמוצג באקשן בר בצד ימין או שמאל, בהתאם לכיוון האפליקציה. עוברים על הגדרת התפריט, הצגתו, הטיפול בבחירה, אייקונים, צ'קבוקסים, קבוצות ותת-תפריטים.
השלבים העיקריים
1. הגדרת התפריט ב-XML: יוצרים בתיקיית resources תיקייה מסוג menu וקובץ menu_main (אותיות קטנות וקו תחתון בלבד). בו מגדירים item לכל פריט עם title, למשל Search, Favorites ו-Settings.
2. ניפוח התפריט: הקובץ לבדו לא מוצג. דורסים את onCreateOptionsMenu, מקבלים getMenuInflator() וקוראים ל-inflate עם R.menu.menu_main ועם אובייקט ה-Menu שהתקבל.
3. טיפול בבחירה: אפשר להגדיר onClick על הפריט ב-XML, או לדרוס את onOptionsItemSelected ולעשות switch לפי item.getItemId(). כשיש onClick ב-XML, הוא מתבצע במקום הפונקציה הדרוסה, ולכן עדיף להישאר עם שיטה אחת.
4. showAsAction: הערך always מציג את הפריט תמיד באקשן בר, ו-ifRoom מציג אותו רק אם יש מקום. Android Studio מציעה להחליף בתכונה עם namespace של app, ואפשר לקבל זאת ב-Alt+Enter.
5. אייקונים: מגדירים icon מתיקיית drawable. אייקון מוצג רק כשהפריט מוצג באקשן בר.
6. פריטים עם סימון: מגדירים checkable, ובקוד קוראים ל-setChecked(true) על הפריט שנבחר, ו-false על האחרים כדי שיישאר סימון אחד. את הפריטים מאתרים עם findItem בתוך onCreateOptionsMenu, ולא ב-onCreate, כי שם התפריט עדיין לא קיים.
7. קבוצות ותת-תפריטים: תג group עם id מאפשר להסתיר או להציג פריטים יחד, ועם checkableBehavior מסוג all אין צורך לסמן כל פריט בנפרד. תת-תפריט נבנה מ-item שבתוכו אובייקט menu עם פריטים משלו.
הגדרות ופקודות שמוצגות
- android:checked="true" מסמן פריט כבר בהתחלה.
- findItem(R.id.menu_item_red) מחזיר את ה-MenuItem לפי id.
שימו לב
- בלי בדיקה, בחירה בפריט אחר, כמו Send, מבטלת את סימון הצבע. הפתרון: לבצע את ביטול וסימון הצבעים רק אם ה-id הוא אחד משלושת הצבעים.
- חיפוש הפריטים ב-onCreate או שמירה כמשתנה של האקטיביטי לא עובדים לפני יצירת התפריט.
אחרי השיעור אפשר להציג Options Menu עם אייקונים, צ'קבוקסים, קבוצות ותת-תפריט ולטפל בבחירות המשתמש.
השיעור הבא בקורס: Context Menu

פרקי ההרצאה: Options Menu

  1. 00:00

    מהו תפריט Options Menu

  2. 00:38

    יצירת תיקיית menu וקובץ XML

  3. 01:58

    ניפוח התפריט ב-onCreateOptionsMenu

  4. 03:57

    תגובה ללחיצה עם onClick

  5. 05:06

    טיפול בבחירה ב-onOptionsItemSelected

  6. 08:02

    הצגה באקשן בר עם showAsAction

  7. 09:58

    הוספת אייקונים לפריטי התפריט

  8. 11:01

    תפריט צבעים עם סימון Checkbox

תמלול ההרצאה: Options Menu

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

  1. 00:02

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

  2. 00:18

    Options Menu זה תפריט שמוצג בפס הזה באקשן בר כאן בצד ימין או בצד שמאל תלוי אם האפליקציה היא right to left או left to right. אז בואו נראה איך עושים את זה.

  3. 00:32

    הדבר הראשון שאנחנו צריכים לעשות זה להגדיר את התפריט עצמו. התפריט עצמו מוגדר בקובץ XML בתיקייה שנקראת מניו. אנחנו צריכים לגשת לתיקיית ה-resources, לצרף android resource directory, לבחור ברשימה כאן מניו, אוקיי, והנה יש לנו כבר תיקייה

  4. 00:54

    מיוחדת עבור כל הגדרות התפריטים שיכולים להיות לנו. בתיקייה הזאת אנחנו מצרפים קובץ XML menu resource file, בואו נקרא לו menu.

  5. 01:05

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

  6. 01:37

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

  7. 02:13

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

  8. 02:27

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

  9. 02:42

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

  10. 02:54

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

  11. 03:15

    לנו את get מניו אינפלייטר והוא עושה את אותו הדבר עבור xml של ליאאוט. לתוך הלייאאוט אינפלייטר או יותר דיוק לתוך המניו אינפלייטר אנחנו רוצים inflate את הקובץ xml, הקובץ xml נקרא r.menu כי הוא נמצא בתוך המניו וקראנו לו מניו מיין.

  12. 03:40

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

  13. 03:54

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

  14. 04:09

    אז יש שתי אפשרויות לביצוע. אפשרות ראשונה לגשת לתפריט ולבחור את onclick. בואו ניתן לו search onclick alt enter enter נציג פה איזשהו toast long בצורה כזאת נריץ נלחץ על התפריט נבחר search ונראה למטה שהוא מוצג אם אנחנו לופצים על אחד אחר כמובן שלא כתבנו אירוע עבורם אז לא קורה כלום רק

  15. 04:53

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

  16. 05:20

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

  17. 05:39

    לצורך כך אנחנו צריכים לגשת ולתת ID. אם אין לי צורך ב-ID אני לא נותן ID אבל במקרה הזה אנחנו כן רוצים ID. בואו נקרא לזה menu item search. ניגש וניתן לכל אחד ID. זה יהיה menu item favorites ואחרון יהיה ID. menu אייטם סטינגס נחזור בחזרה יש לנו קייס rid menu item search אנחנו רוצים להציג כאן איזשהו טוסט בואו ניקח את הטוסט הזה ונשים אותו פה נצא

  18. 06:21

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

  19. 06:59

    את ה-search או האם שתיהן ביחד יתבצעו אז בואו נקרא ל-search הזה search1 ול-search הזה search2 נריץ נלחץ על התפריט נבחר ב-search ונראה ש-search2 התבצע ולא search1 שימו לב ש-search1 לא התבצע בכלל אחר אחד אחר ונראה שהוא באמת מתבצע כמו שצריך.

  20. 07:28

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

  21. 07:53

    בכל הפעולות ב-onOptionsItemSelected ולכן אנחנו יכולים לחזור לקובץ ה-XML ולהיפטר מה-On-Click הזה. אפשרות נוספת שקיימת לנו זה האופציה Show as Action.

  22. 08:08

    Show as Action מאפשרת לנו לדוגמה להציג את הפריט ב-Action Bar במקום בתפריט שמתנפח כאן. יש לנו לדוגמה את האופציה Always וזה אומר שאנחנו תמיד רוצים לראות אותו כאן ב-Action Bar. הנה אנחנו רואים את זה כאן.

  23. 08:27

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

  24. 08:51

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

  25. 09:18

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

  26. 09:42

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

  27. 10:12

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

  28. 10:38

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

  29. 10:54

    בואו נלחץ עליהם ונראה שהם עובדים כמו שצריך. זאת אומרת ה-search, הנה ה-favorites, הנה ה-settings, הכל עובד כמו שצריך.

  30. 11:06

    אפשרות נוספת שיכולה להיות שימושית עבור תפריט, זו האפשרות שהתפריט יהיה checkable עם checkbox לידו. מתי זה שימושי?

  31. 11:16

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

  32. 11:29

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

  33. 12:13

    רוצים שהבחירה גם תבצע פעולה מסוימת ולכן אנחנו יכולים לגשת ולכתוב שברגע שבוחרים אותם אז הם כמובן עושים איזושהי בחירה של צבע בואו ניגש ונגדיר שאם אנחנו הולכים Red במקום להציג טוסט אנחנו רוצים לגשת ל-Linear Layout Main Set Background Color ובואו נבחר

  34. 12:45

    Color Red זה האופציה הראשונה בואו נגדיר יש לנו בעצם השני היה גרין נשמור על אחידות כאן הנה יש לנו גרין ולבסוף בלו נצבע את זה בבלו אם אנחנו כרגע מריצים אנחנו יכולים לראות שאכן זה עובד אבל אין לנו שום v ליד נלחץ על התפריט נבחר ב-red אנחנו רואים שהוא עובד

  35. 13:30

    green עובד blue עובד אף אחד מהם לא מסומן פה שמעכשיו והלאה זה הצבע תשימו לב שהסטינג חזר לכאן בגלל שיש לנו פה גם את התפריט שגם הוא תופס לנו קצת מקום אז אם אנחנו רוצים באמת לראות את שלושת האייקונים אז במקום if room פשוט נגדיר אותו always והוא תמיד יציג את שלושת האייקונים no matter what אוקיי איך

  36. 14:01

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

  37. 14:34

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

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

ההרצאה הקודמת: Dynamic Controls

ההרצאה הבאה: Context Menu

הרצאות קשורות מקורסים אחרים

  • תפריטים וסרגלים - Menu and Toolbar
  • ריאקט - יצירת תפריט באתר - Menu
  • בניית אתר אינטרנט אמיתי לחנות חיות - Menu

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

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