יצירת Seperate Modal Storyboard

תמלול ההרצאה: יצירת Seperate Modal Storyboard

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

1. 00:02

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

2. 00:22

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

3. 00:50

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

4. 01:11

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

5. 01:22

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

6. 01:41

   גוררים View Controlers, בדרך כלל גם יש אחד, אבל ככה זה קורה כשמייצרים אחד חדש לגמרי, ואנחנו פשוט נוסיף פה View Controller ל-Pop-Up שלנו, יפה.

7. 01:54

   בואו נעצב את הדיאלוג שלנו, אז בעצם אנחנו נרצה שיהיה לנו פה איזשהו View, יש לנו פה כבר View, בתוך ה-View הזה יש לנו את ה-Safe Area, בתוך הספר אני רוצה להוסיף עוד view, אז UIView עכשיו בתוך ה-UIView הזה אני רוצה להוסיף לי Stackview לגבי ה-UIView אני רוצה לאלץ אותו, בסדר?

8. 02:24

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

9. 02:42

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

10. 03:14

    = Superview Width, אלא אנחנו רוצים להגיד כפול 0.8 נניח, אוקיי? עכשיו הרוחב של הדבר הזה הוא 80% מהרוחב הכללי, עכשיו לגבי הגובה אנחנו נרצה פשוט להגדיר יחס רוחב גובה בינו לבין עצמו, אז אספקט רשיו והוא קבע לי פה את היחס רוחב גובה כבר להיות כזה דבר, אוקיי?

11. 03:43

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

12. 04:17

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

13. 04:30

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

14. 04:46

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

15. 05:04

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

16. 05:17

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

17. 05:47

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

18. 06:16

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

19. 06:34

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

20. 07:01

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

21. 07:47

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

22. 08:09

    ולגבי הפונט, בואו נלך פה על איזשהו custom font גם כן, אז תמיד נראה הרבה יותר טוב ברגע שמשנים פונטים ולא משאירים את הפונטים הרגילים.

23. 08:20

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

24. 08:38

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

25. 08:52

    בנוסף, בפופ-אפס אנחנו רוצים לייצר קלאסט ל-view-controller של הדבר הזה, אז אנחנו מייצרים New File Coco-Touch Class, ובוא נקרא לזה דיאלוג view controller או איך שאתם רוצים שם ש-up to you מה שנקרא אני אקרא לזה lost cat dialog view controller ואני אלך

26. 09:12

    אחורה עכשיו לסטורי בורד ואני ארצה לשייך את ה-view controller הזה לקלאס שעכשיו יצרתי אז הנה הוא פה דבר שני אני ארצה לתת ל-view controller הזה storyboard ID זה משהו שעוד לא עשינו ככה אז אני בגלל זה אומר לכם אז אני אכתוב פה lost cat vc נניח זה שהוא ה-identify אני שומר אותו עכשיו אני עושה copy

27. 09:36

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

28. 09:46

    אנחנו רוצים לחבר, נגיד, את הכפתור Dismiss, אוקיי? אז בואו נחבר אותו. פתחתי את ה-assistant editor, אחרי ששייכנו את ה-class, ואני יכול לגרור פה את הכפתור אוקיי כאקשן, ובואו נקרא לפעולה הזאת Dismiss dialog, יפה מאוד.

29. 10:12

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

30. 10:35

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

31. 10:46

    אנחנו לא צריכים להחזיר ערך, נקרא לה function שלנו show, show model או משהו? אולי אנחנו נרצה לקבל פה פרמטרים לגבי הטקסטים שאתם רוצים להציג אבל זה כבר up to you.

32. 11:03

    עכשיו לגבי ה-show model בעצם אנחנו צריכים לעשות משהו בסגנון הבא, אנחנו צריכים לייצר מופע של ה-storyboard, אחר כך מה-storyboard אנחנו רוצים לייצר מופע של ה-view controller, ואחר כך בעזרת זה אנחנו רוצים להציג את ה-view controller הזה על ה-window הראשי של האפליקציה,

33. 11:24

    או present נכון? לא show אלא present כי אנחנו רוצים להציג את זה בצורה מודלית. אז בואו ננסה לעשות את זה ונראה לאן זה מוביל אותנו. let Storyboard שווה ל-UiStoryboardNamed עכשיו ה-Name שלנו זה Pop-Ups, אוקיי? מה שכתוב שם זה השם של ה-Storyboard עכשיו לגבי הבנדל זה אופצ'ונל והוא לא צריך אותו אז אני אעביר פה ניל באופן נוח

34. 11:52

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

35. 12:07

    LostCatVC זה השם של ה-ViewController בסטורי בורד. זה ה-ViewControllerIdentifier בסטורי בורד. זה זה, רואים?

36. 12:18

    זה ה-ViewController וזה ה-Identifier שלו. אז בחזרה לענייננו, יצרנו מופע של הסטורי בורד, יצרנו עכשיו מופע של ה-ViewController, אז בואו נשמור אותו ביד.

37. 12:38

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

38. 12:49

    ומה שאני ארצה לעשות, אני ארצה איכשהו להציג את זה נכון? זאת אומרת יש לנו את החלון של האפליקציה, אז בוא נגיד var-window שווה ל-ua-application.shared זה אובייקט משותף של כל האפליקציה ויש לנו פה באופן נוח את ה-Key-Window.

39. 13:08

    עכשיו האמת היא בוא ניקח לא רק את ה-Window אלא בוא ניקח ממנו את כל ה-view-controller, את ה-root-view-controller, זאת אומרת ה-view-controller הראשי.

40. 13:17

    בוא נקרא לזה רות, או v-root. עכשיו, אנחנו רוצים לבקש מרות להציג לנו את הדיאלוג, אוקיי? אז root.present view-controller animated.

41. 13:29

    ה-view-controller זה ה-VC שיש לנו למעלה, וה-animated יהיה פה true. לגבי ה-completion אני לא צריך כרגע, אז אני אשאיר את זה ריק. והנה, תראו, יש לנו פעולה בעצם שהיא מנותקת יפה ומציגה ככה את הכל כמו שצריך.

42. 13:46

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