הסבר על Custom Dialogs

תמלול ההרצאה: הסבר על Custom Dialogs

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

1. 00:02

   שלום וברוכים הבאים אנחנו רוצים לדבר היום על Custom Dialogs בסוויפט אז בואו נלחץ על Command-Shift-N באקסקוד ונפתח פרויקט חדש הפרויקט שלי יהיה מסוג Single View Application ואנחנו נרצה לקרוא לפרויקט Custom Dialogs אז אנחנו נלחץ פה על אישור ואני אשמור את

2. 00:22

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

3. 00:49

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

4. 01:13

   אשים אותו בצד באמצע ואני אמרכז אותו אופקית אז הלכתי ל-Align Horizontal in Container ולגבי האילוץ השני אז אני אקבע אילוץ למטה נניח 8 פיקסלים. יפה.

5. 01:32

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

6. 01:41

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

7. 02:06

   אני אגרור view אבל איפה אני אשים אותו? אני יכול לשים אותו כאן דרך אגב ואז תראו איך זה נראה אל תעשו את זה נראה ככה אבל אני לא רוצה לגרור אותו לפה אז מה אני רוצה לעשות איתו? אני רוצה לעשות משהו מוזר אני רוצה לגרור אותו פה למעלה בואו תראו איזה יופי אתם רואים גררתי אותו כאן למעלה וה-view

8. 02:22

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

9. 02:45

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

10. 02:56

    אלה התכונות שיש לכל הפקדים ב-iOS בגלל שזה ה-view הפשוט ביותר שכולם יורשים ממנו. אז ה-background מגיע מכאן. אני סתם אעשה פה איזשהו background color כלשהו, לא טוב.

11. 03:09

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

12. 03:55

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

13. 04:18

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

14. 04:33

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

15. 04:42

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

16. 04:56

    עכשיו, אתם מכירים את הקטע של Stack, אז ב-Stack אנחנו צריכים לקבוע את ה-Alignment שיהיה פיל ואת ה-Distribution יהיה פיל איקוולי כדי שהפקדים יחלקו ביניהם את השטח בשווה בשווה למשל כאן יש לנו את הספייסינג של הסטאק וזה נחמד יפה מאוד אז בעצם יש לי את ה-custom view שלי הייתי יכול לעצב אותו שעות

17. 05:18

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

18. 05:34

    דבר ראשון שנעשה, אנחנו נפתח את ה-assistant editor. בשואו דיאלוג בואו נגרור פה אקשן, ובאקשן נכתוב נניח show, show custom dialog, או פשוט show dialog לשם קיצור.

19. 05:54

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

20. 06:05

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

21. 06:21

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

22. 06:46

    אז יפה, יש לי view, רואים את ה-dialog view? כלומר, באופן בסיסי ביותר, באופן בסיסי ביותר, מה שהייתי רוצה לעשות זה להוסיף את ה-dialog view כ-subview ל-view הראשי שלי.

23. 06:58

    אם אתם זוכרים, לכל ה-view קונטרולרים יש להם view, אז יש לי תכונה פה שנקראת self.vue, אוקיי? אפשר פשוט לפנות לזה כל view, נכון? עכשיו, מה קורה אם אני אגיד ל-view שלי להוסיף subview, add subview, ואני אוסיף את ה-dialog view?

24. 07:13

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

25. 07:26

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

26. 07:51

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

27. 08:19

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

28. 08:33

    אז מה שאני אעשה הפעם, אני ארצה למרכז אותו. כדי למרכז אותו, אז הדיאלוג view נגיד