PracticU

עבודה עם UITableView - מעבר בין מסכים

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

עבודה עם UITableView - מעבר בין מסכים
בשיעור לומדים לעבור ממסך רשימה למסך פרטים, תוך כדי העברת הסרט שנבחר. מדובר בדפוס מאסטר-דיטייל, שבו רשימה מציגה פריטים, ומסך נוסף מציג את הפרטים של פריט אחד.
הכנה של המסכים
1. עוטפים את ה-View Controller הראשי ב-Navigation Controller.
2. מוסיפים View Controller חדש בסטורי בורד, ויוצרים לו קלאס בשם MovieDetailsViewController שיורש מ-UIViewController.
3. במסך הפרטים מוסיפים Image View לתמונה, ושתי תוויות: אחת לכותרת ואחת לבמאי. האילוצים נקבעים כך שהתמונה נמצאת מתחת לכותרת, והבמאי בתחתית המסך.
4. גוררים Outlets מכל רכיב אל הקלאס של מסך הפרטים, ומגדירים משתנה movie מסוג Movie שהוא אופציונלי.
הסגוויי
- ה-Accessory של התא בטייבל הוא Disclosure Indicator, שמסמן למשתמש שאפשר ללחוץ עליו.
- גוררים Show Segue מהתא אל מסך הפרטים, ונותנים לו Identifier.
הקוד
1. ב-View Controller הראשי מממשים את didSelectRowAt, ובה קוראים ל-performSegue עם ה-Identifier ועם הסרט שנבחר לפי indexPath.row.
2. לפני המעבר, בפונקציה prepare(for:sender:), בודקים את ה-Identifier ואת הטייפ של ה-destination, וממירים את הסנדר לסרט.
3. מעבירים את הסרט למשתנה movie של מסך הפרטים.
4. במסך הפרטים, ב-viewDidLoad, מציבים את הכותרת, הבמאי והתמונה מתוך הסרט.
הסיכום: לחיצה על שורה מפעילה Segue, הסרט שנבחר נשלח דרך prepare, ומסך הפרטים מציג את הנתונים שלו.
השיעור הבא בקורס: עבודה עם UITableViewController - הוספה דינמית של פריטים, מחיקה דינמית וסידור המידע ב-swipe

פרקי ההרצאה: עבודה עם UITableView - מעבר בין מסכים

  1. 00:00

    ניווט ממסך הרשימה למסך פרטים

  2. 00:59

    יצירת מסך פרטים מסוג UIViewController

  3. 02:21

    עיצוב מסך הפרטים: כותרת, תמונה ובמאי

  4. 04:12

    חיבור Outlets למסך הפרטים

  5. 05:33

    משתנה סרט אופציונלי למסך הפרטים

  6. 06:26

    Segue מסוג Show בין המסכים

  7. 08:21

    מעבר למסך פרטים בלחיצה על שורה

תמלול ההרצאה: עבודה עם UITableView - מעבר בין מסכים

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

  1. 00:02

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

  2. 00:27

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

  3. 00:54

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

  4. 01:16

    אז בואו נייצר קלאס חדש בפרויקט, new-pile. אנחנו רוצים לייצר co-co-touch-class מסוג UI table-view-controller. סליחה, UI view-controller, נכון? רגיל, אנחנו לא צריכים שם גם table-view.

  5. 01:33

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

  6. 02:01

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

  7. 02:23

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

  8. 02:53

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

  9. 03:21

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

  10. 03:48

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

  11. 04:18

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

  12. 04:42

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

  13. 05:26

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

  14. 05:42

    אנחנו גם יכולים להגיד שהוא יהיה explicitly unroped optional כלומר אין לי מה לחפש בנוסח הזה אם אין סרט ואני יודע שהסרט יותחן בדיוק בדומה ל ULabel הזה של המוביל טייטל לייבל, תמיד מהותחל, בסדר? ולכן יש פה את הסימן קריאה שאומר אני יודע שכרגע הוא ניל אבל ברגע שאני אריץ

  15. 06:00

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

  16. 06:08

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

  17. 06:18

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

  18. 06:49

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

  19. 07:15

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

  20. 07:40

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

  21. 08:14

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

  22. 08:40

    מתוך ה-delegate מעניינת אותי המתודה דיד סלקט אייטם את אינדקס פאפ, דיד סלקט רואו את אינדקס פאפ, אוקיי? ומה שאנחנו רוצים לעשות כאן, אנחנו רוצים להפעיל את ה-segway, אז אנחנו נרצה לומר perform segway with identifier.

  23. 09:01

    איך קראנו ל-segway? קראנו לו master to detail. באובייקט השני, בסנדר, אני רואה שזה אובייקט מטייפ any, כלומר אני יכול להעביר פה כל אובייקט.

  24. 09:11

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

  25. 09:28

    קיבלתי אותו כאן כפרמטר, הפעולה הזאת נקראת "בחרנו בשורה ב-index.puff הנ"ל". יפה.

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

ההרצאה הקודמת: עבודה עם UITableView - יצירת מחלקה עבור התאים ועיצוב אישי של התא - Custom Cells

ההרצאה הבאה: עבודה עם UITableViewController - הוספה דינמית של פריטים, מחיקה דינמית וסידור המידע ב-swipe

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

  • עבודה עם VI - חלק 1
  • מעבר לאתר DR - Veeam Failover
  • מעבר למצב Administrator או UAC
  • מעבר בין המסכים בתוך האפליקציה ב-Flutter

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

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