UIStoryboardSegues - Passing Data to other View Controllers

תמלול ההרצאה: UIStoryboardSegues - Passing Data to other View Controllers

הטקסט המלא של הדקות הראשונות בהרצאה «UIStoryboardSegues - Passing Data to other View Controllers» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

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

2. 00:36

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

3. 00:54

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

4. 01:08

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

5. 01:34

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

6. 01:45

   דרך יותר יפה היא תהיה לעמוד פה על הגרופ, לעשות קליק ימני ואנחנו רוצים לייצר קובץ חדש, New File. הקובץ החדש שלנו אנחנו רוצים שהוא יהיה קובץ מסוג CocoTouch קלאס, כלומר מחלקה בפריימורק הזה שנקרא CocoTouch כי המחלקה UiView Controller נמצאת ב-UiKit ששייכת כמובן לפריימורק ואיך נקרא לקלאס שלנו

7. 02:12

   זאת כמו שאלה בואו נקרא לקלאס שלנו next view controller כי זה כביכול המסך השני של ידימה בואו נקרא לו second view controller ברשותכם ככה נשמור פה על סדר טוב עכשיו הסאב קלאס הוא של המחלקה ui view controller שזה באמת מה שאני רוצה אני רוצה ליצור מחלקה שיורשת מ ui view controller יפה איפה

8. 02:35

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

9. 02:51

   ממש ממש חשובה שאתם צריכים לקלוט בדמו הזה זה המסך השני שלי אבל המסך השני שלי לא יודע שאני יצרתי בשבילו קלאס כדי שהוא ידע את זה אנחנו עומדים פה על הצהוב על ה-view controller השני שיצרנו ואנחנו בוחרים פה ב-identity inspector וב-identity inspector תחת הסעיף של קלאס אנחנו נבחר את הקלאס שיצא לנו, הקלאס Second View Controller,

10. 03:16

    אוקיי? אני מאשר פה את הבחירה הזאת, ועכשיו באמת יש לנו View Controller שני, שכמו שאתם רואים כתוב למעלה Second View Controller, הוא באמת יודע שהוא שייך ל-Second View Controller.

11. 03:30

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

12. 03:50

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

13. 04:07

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

14. 04:16

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

15. 04:25

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

16. 04:37

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

17. 05:05

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

18. 05:29

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

19. 05:52

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

20. 06:10

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

21. 06:46

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

22. 07:15

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

23. 07:42

    בוא ניתן לסגווי שלנו ID נו נגיד first to next או מה שאתם תרצו אני אקרא לו to second אוקיי אין איזושהי דרך אגב מוסכמת שמות לגבי העניין הזה של הסגוויים אז פשוט קראתי לו לשני והאמת היא שמבחינת UI פה אז אני רוצה גם להציג את זה אז בואו נוסיף פה עוד label לכל הפחות

24. 08:14

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

25. 08:36

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

26. 08:55

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

27. 09:14

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

28. 09:41

    זה הקלאסט באמת שמתאים לטקסט פילד הזה ולכאן אני יכול לקרוא אותו אז זה נהדר אני אקרא לזה how many text field כי זה מה שהוא אמור לעשות כאן וגררתי בעצם קונקשן רגיל Outlet רגיל לגמרי מסוג UI text field אוקיי מגניב זה בצד הזה.

29. 10:08

    בצד השני אנחנו רוצים לגרור את הלייבל למסך המתאים. אני לחצתי על הלייבל ואני שם לב שבאופן אוטומטי הוא עבר מיד ל-Second View Controller.

30. 10:19

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

31. 10:30

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

32. 10:56

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

33. 11:22

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

34. 11:47

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

35. 12:00

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

36. 12:11

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

37. 12:36

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

38. 12:49

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

39. 13:06

    היא מתכוננת ל-UI היסטורי, היא עוזרת לכם כ-View קונטרולר להתכונן להפעלת סגוויי. היא מודיעה ל-View קונטרולר שעומד לקרוא פה איזשהו סגוויי, עומד להיות פרפורט.

40. 13:15

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

41. 13:49

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