PracticU

עבודה עם UIPickerView

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאייפון iPhone iOS - ב-Swift-Xcode › עבודה עם UIPickerView
מילון מושגים:
אירוע - התרחשות שהמערכת מזהה ויכולה להגיב לה, כמו לחיצת עכבר, הקשה או סיום פעולה.
קונטרולר - רכיב שמתווך בין הממשק לבין הלוגיקה והנתונים, מקבל בקשות ומחליט כיצד לטפל בהן (למשל בדפוס MVC).
מתודה - פונקציה המוגדרת בתוך מחלקה ומתארת פעולה שאובייקטים מאותה מחלקה יכולים לבצע.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).

עבודה עם UIPickerView
בשיעור לומדים לעבוד עם UIPickerView, פקד שמציג גלגלים שהמשתמש מסובב כדי לבחור ערכים. כדי להציג את הנתונים, צריך לממש שני פרוטוקולים: UIPickerViewDataSource ו-UIPickerViewDelegate.
חיבור הפרוטוקולים
- בניגוד לפקדים רבים, ל-Picker אין Action רגיל שמייצג את הבחירה, כי יש לו הרבה אירועים.
- הפתרון הוא להגדיר את ה-View Controller כ-Data Source וכ-Delegate של הפיקר. בשיעור מגררים חיבורים מהפיקר אל ה-View Controller ב-Storyboard, ולא כותבים את השורות בקוד.
- ה-Outlet של הפיקר נשמר כדי שאפשר יהיה לגשת אליו מהקוד.
הדאטה סורס
1. מספר הגלגלים: המתודה numberOfComponents מחזירה כמה גלגלים יש.
2. מספר השורות בגלגל: המתודה numberOfRowsInComponent מחזירה כמה ערכים יש בכל גלגל. בשיעור השורות נלקחות ממערך הנתונים, ולכן המספר שווה לגודל המערך.
הדלגייט
- המתודה titleForRow מחזירה את הטקסט שיוצג בשורה מסוימת.
- המתודה didSelectRow נקראת כשהמשתמש בוחר שורה. היא מקבלת את מספר השורה ואת מספר הגלגל.
- כדי להציג כמה גלגלים עם נתונים שונים, מומלץ מערך של מערכים: כל איבר הוא מערך לגלגל אחד. המתודות מחזירות את הערכים לפי מספר הגלגל ומספר השורה.
המרצה מציין שכמות גלגלים גדולה מדי פוגעת בחוויית המשתמש, ולכן מספר קטן של גלגלים מתאים יותר.
הסיכום: UIPickerView דורש Data Source ו-Delegate, מספר הגלגלים והשורות נקבעים במתודות של הדאטה סורס, והערכים עצמם מוחזרים על ידי הדלגייט.
השיעור הבא בקורס: יצירת CustomViews ותרגול Slot-Machine

פרקי ההרצאה: עבודה עם UIPickerView

  1. 00:00

    מבוא: UIPickerView ושני הפרוטוקולים

  2. 00:45

    הוספת Picker View לממשק

  3. 01:45

    למה אין Action ל-Picker View

  4. 03:02

    חיבור Delegate ו-DataSource בסטוריבורד

  5. 05:46

    מערך ימים כמקור המידע

  6. 06:46

    מספר השורות לפי גודל המערך

  7. 08:00

    כותרת לכל שורה: titleForRow

  8. 09:25

    שני גלגלים כמו ברכבת ישראל

תמלול ההרצאה: עבודה עם UIPickerView

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

  1. 00:02

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

  2. 00:28

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

  3. 00:54

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

  4. 01:08

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

  5. 01:23

    ל-peeker view כמו כל הפקדים למען האמת אנחנו רוצים לגרור outlet, אז בואו נוסיף outlet, אני אקרא ל-outlet שלי "peeker", בסדר? סתם שיהיה לנו ככה רפרנס ל-peeker.

  6. 01:38

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

  7. 01:47

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

  8. 02:03

    איך נעשה את זה? יש לנו שתי אפשרויות כרגיל, אפשרות אחת זה להגיד פה בקוד picker.delegate = self ואז אנחנו נצטרך לממש את הפרוטוקול uipickerview.delegate.

  9. 02:17

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

  10. 02:43

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

  11. 03:02

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

  12. 03:13

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

  13. 03:25

    יפה? אז עכשיו אני גם הדאטה סורס וגם הדלגייט מבלי להוסיף שורות קוד. אנחנו כן נרצה אבל extension כדי להיות הדלגייט וכן נרצה extension כדי להיות הדאטה סורס אז בואו אנחנו רוצים לממש שתי פרוטוקולים uip review delegate uip review data source

  14. 03:47

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

  15. 04:08

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

  16. 04:19

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

  17. 04:42

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

  18. 05:13

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

  19. 05:52

    יודע מה אנחנו רוצים להציג פה. בואו נבחר מידע שאנחנו מעוניינים להציג. נניח שאנחנו רוצים להציג ימים בשבוע, אז אני אגדיר פה איזשהו מערך של days, let days שווה ra, ונעשה פה יום ראשון, שנים ושלישים.

  20. 06:18

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

  21. 06:31

    אגב, עכשיו, ברגע שיש לי data source אמיתי, זאת אומרת יש לי פה איזשהו מידע מסוים, אז אני גם יכול להגיד שאני לא רוצה להחזיר פה 5, בסדר? 5 זה לא יפה.

  22. 06:40

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

  23. 06:56

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

  24. 07:09

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

  25. 07:19

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

  26. 07:39

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

  27. 08:02

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

  28. 08:27

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

  29. 08:48

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

  30. 09:15

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

  31. 09:37

    Number of Components, אז זה ככה נשמע הגיוני. ודרך אגב, אם אני פשוט אגיד Number of Components שווה 2, אז מה אני אקבל?

  32. 09:47

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

  33. 10:02

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

  34. 10:25

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

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

ההרצאה הקודמת: עבודה עם תאריכים - UIDatePicker

ההרצאה הבאה: יצירת CustomViews ותרגול Slot-Machine

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

  • עבודה עם VI - חלק 1
  • איך נראת עבודה אמיתית
  • מבוא לקורס ראיונות עבודה ב-QA - חלק 1
  • ראיון עבודה לתפקיד QA

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

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