Custom Dialog

בלי כתוביותעם כתוביות

מילון מושגים:

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

כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.

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

Activity - ב-Android, רכיב שמייצג מסך יחיד של האפליקציה שאיתו המשתמש מתקשר.

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

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

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

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

Custom Dialog

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

השלבים העיקריים

1. layout לדיאלוג: יוצרים קובץ dialog_gender עם LinearLayout אנכי ברוחב 250dp ובגובה 220dp, עם צבע רקע ו-layout_gravity במרכז. בתוכו ImageView עם אייקון ו-margin top של 20dp, TextView עם הטקסט Enter your gender, RadioGroup עם שני RadioButton (radio_button_male, radio_button_female), ו-LinearLayout עם הכפתורים button_ok ו-button_cancel.

2. יצירת הדיאלוג: משתנה גלובלי Dialog dialogGender = new Dialog(this), ואז setContentView(R.layout.dialog_gender), בדומה ל-setContentView של האקטיביטי. מוסיפים setCancelable(false).

3. איתור הכפתורים: קוראים ל-dialogGender.findViewById(R.id.button_ok) עם cast ל-Button, ובאותו אופן ל-Cancel. את הרכיבים של הדיאלוג מאתרים דרך הדיאלוג, לא דרך האקטיביטי.

4. רישום לאירוע: setOnClickListener(this) על שני הכפתורים, וה-MainActivity מממשת OnClickListener. אפשר גם להגדיר onClick ב-XML, אבל זה מחייב את הפונקציה להיות באקטיביטי, וכך אפשר לטפל באירוע מכל מסך.

5. טיפול בלחיצה: ב-onClick בודקים v.getId(). אם הוא button_ok, בודקים עם isChecked() אם נבחר male, female או כלום, ומציגים Toast.

6. סגירה: dialogGender.dismiss() מחוץ ל-if, כדי שהדיאלוג ייסגר גם באישור וגם בביטול. אחרי כל ההגדרות קוראים ל-show().

שימו לב

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

- לחיצה על OK בלי בחירה מציגה "none", ואפשר לכתוב קוד שמונע זאת.

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

פרקי ההרצאה: Custom Dialog

תמלול ההרצאה: Custom Dialog

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

00:02
עד עכשיו ראינו מספר דיאלוגס מובנים במערכת. ראינו Alert דיאלוג שמאפשרת להציג הודאה, Alert דיאלוג שמאפשרת לקלוט פריט מרשימת פריטים, Date Picker דיאלוג שמאפשרת לקלוט תאריך, Time Picker דיאלוג שמאפשרת לקלוט זמן, ו-Progress דיאלוג שמאפשרת להציג איזושהי הודאת המתנה כזאת תוך כדי תהליך.
00:28
אבל מה קורה אם אנחנו רוצים להציג איזשהי דיאלוג שמאפשרת למשתמש לקלוט משהו אחר לגמרי שבכלל לא קיים בדיאלוגס האלה המוכנים. אז יש לנו אפשרות לבנות מה שנקרא custom dialogue.
00:42
זה בעצם דיאלוג משלנו שמאפשרת לקלוט מה שאנחנו רוצים. אז בואו לדוגמה נאפשר למשתמש לקלוט ג'נדר, מגדר, האם המשתמש הוא זכר או נקבה.
00:56
לא קיימת שום דיאלוג שמאפשרת לקלוט בדיוק את זה ואנחנו הולכים לבנות אותה על ידי custom dialogue. אז בואו ניקח כאן איזשהו לחצן שאומר למשתמש Select Gender.
01:10
בואו ניגש ונבנה On Click Event. Button Select Gender. Underline On Click. ניגש ונגיע לאירוע. ופה אנחנו בעצם רוצים להציג דיאלוג שהיא קאסטום.
01:30
אנחנו צריכים לבנות אותה בעצמנו. אז איך אנחנו עושים את זה? הדבר הראשון שאנחנו צריכים לעשות זה לבנות את הלייאוט. לדיאלוג יש לייאוט שאנחנו יכולים להגדיר.
01:41
אז הנה אנחנו הולכים לתיקיית ה-Layouts, New, Layout Resource File ובואו נמציא איזשהו שם ונקרא לזה Dialog Underline Gender ואנחנו רוצים Linear Layout, ורטיקל זה בסדר לנו, יש לנו פה Match Parent, Match Parent אבל אנחנו רוצים קצת לסדר את הגודל שלה.
02:09
בואו נגדיר שזה לדוגמה Weed 250, dp והיט בואו נגדיר 220 dp ובואו ניתן איזשהו צבע רקע red green blue ואז יש לנו מעין ירוק כזה והריבוע הירוק הזה שאנחנו רואים זה רק ה-ui של הדיאלוג עצמה.
02:37
בואו נגדיר כאן layout gravity center בכדי שכל מה שיש בתוך יתבצע בדיוק במרכז בצורה כזאת. כעת בואו נתחיל לבנות את הדיאלוג בדיוק כמו שאנחנו רוצים שהיא תיראה.
02:54
אז בוא נניח שיש לנו איזושהי תמונה ניקח אימג' ויו ראפ קונטנט נגדיר מרג'ין טופ 20 dp נגדיר src drawable ויש לנו ב-drawable איזשהו אייקון של ג'נדר כזה אפשר לראות אותו כאן הנה כבר אנחנו רואים את זה ונגדיר שהדבר הזה יישב באמצע יש לנו ליארד גרביטי סנטר אוריזונטל והנה יש לנו כבר איזשהו אייקון קטן לדיאלוג
03:32
שלנו שארגנו ממש בחלק העליון לאחר מכן בואו ניקח איזה שהוא טקסט view נגדיר לו wrap content width והיט נגדיר לו טקסט size 20 sp נגדיר לו גם כן gravity שישב באמצע center וניתן לו את הטקסט enter your gender בצורה כזאת והנה יש לנו כאן איזה שהוא טקסט כזה שיושב בדיוק באמצע ואומר למשתמש מה בעצם אנחנו רוצים ממנו הדבר הבא שאנחנו רוצים זה רדיו בטון
04:15
מפני שאנחנו רוצים שהמשתמש יבחר או מייל או פימייל אז בואו ניקח רדיו בטון ולמעשה אנחנו רוצים רדיו גרופ אז בואו ניקח רדיו גרופ ראפ קונטנט וגם לרדיו גרופ נגדיר שהוא יהיה גרוויטי בסנטר ואז הוא יושב בדיוק באמצע ובתוכו אנחנו רוצים שני רדיו בטונס אז הנה
04:44
יש לנו ראפ קונטנט רדיו בטון ראשון, נגדיר לו איזשהו ID כי אנחנו רוצים להתעסק איתו בקוד radio.batten.mail.text.mail.
05:01
נשכפל אותו, נגדיר עוד אחד עבור female בצורה כזאת ואנחנו רוצים לחצן של אוקיי וקנסל כי המשתמש יכול לאשר את זה והוא יכול להתחרט ולסגור את זה.
05:24
אז אנחנו צריכים לבנות הכל, הכל זה עלינו במקרה הזה. ליניאר layout כי אנחנו רוצים אותם קצת אחד ליד השני בואו ניקח ראפ קונטנט נגדיר גם כאן ליארט גראביטי סנטר אוריזונטל שני הלחצנים בדיוק באמצע ובתוך אנחנו בונים בטון ראשון נגדיר אותו גם כן ראפ קונטנט ניתן לו איי.די כי גם אותו אנחנו רוצים לתפוס בקוד בטון אוקיי
05:59
וטקסט אוקיי נשכפל אותו ונבנה את השני כקאנסל בצורה כזאת והנה סיימנו לבנות את הממשק משתמש עצמו ויש לנו דיאלוג שמאפשרת למשתמש להכניס ג'נדר או מייל או פימייל בצורה כזאת כמובן שיכולנו לבחור כל עיצוב אחר שאנחנו רוצים מה שנשאר לנו לעשות זה לגשת לקוד הג'אווה ולהציג את הדיאלוג אז איך אנחנו מציגים את הדיאלוג הספציפית הזאת
06:37
עם הלאוט זה מתבצע על ידי יצירת אובייקט מסוג דיאלוג פשוט דיאלוג ואנחנו רוצים לעשות את האובייקט הזה את הרפרנס שלו באזור הגלובלי דיאלוג נקרא לו דיאלוג ג'נדר בצורה כזאת כי אנחנו רוצים לגשת אליו גם מהלחצן הזה שהיוזר מציג אותו וגם אנחנו רוצים להתעסק איתו מהקוד של הלחצנים האחרים אז בואו נבנה אובייקט ממנו דיאלוג ג'נדר שווה ניו דיאלוג ניתן לו את
07:16
הקונטקסט הנוכחי דיס זה בסדר גמור ואנחנו רוצים להגיע אליו דיאלוג ג'נדר נקודה וסט קונטנט view ואז לבחור את הלייאוט הנה r הנה לייאוט הנה דיאלוג ג'נדר שימו לב שזה בדיוק כמו שיש למיין אקטיביטי באירוע on create את הפונקציה Set Content View וכאן מוגדר בדיוק מהו ה-Layout של המסך של המיין אקטיביטי,
07:52
יש לנו גם Set Content View עבור הדיאלוג ואנחנו מגדירים מהו ה-Layout של הדיאלוג ואז זה ה-Layout שיהיה מוצג. הדבר הבא שאנחנו רוצים: dialog.gender.setCancellable כמו תמיד false אנחנו לא רוצים שהיוזר ילחץ לנו מחוץ לדיאלוג ויעלים אותה, יש לו או אישור או ביטול תתייחס לשאלה שאני שואל אותך ואו שאתה תאשר לי או
08:16
שתבטל, גם מותר לך לבטל, לא קרה כלום. הדבר הבא שאנחנו רוצים לעשות זה להירשם לאירועים של הלחצנים.
08:25
הלחצנים פשוט נמצאים בלייאאוט אבל אנחנו לא מגדירים את האירועים שלהם בלייאאוט. אין שום בעיה לבוא לפה ולהגדיר on click שווה ולהגדיר את האירוע של הקליק במיין אקטיביטי.
08:39
אבל לא תמיד אנחנו רוצים להציג את הדיאלוג הזאת במיין אקטיביטי. לפעמים יש לנו מסך נוסף שאנחנו רוצים בו להציג את הדיאלוג ושם לטפל באירועי ה-on-click.
08:51
אנחנו לא נוכל לעשות את זה בצורה כזאת. לכן בואו נראה את התחביר הכללי שמאפשר להירשם ללחצנים מכל מקום. אז אנחנו רוצים לבוא ולאתר את הלחצנים האלה, הנה Button OK, ואנחנו רוצים להכניס אליו את DialogueGender.FindViewByID RID שימו לב שהFindViewByID זאת פונקציה שאנחנו