יצירת CustomViews ותרגול Slot-Machine

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

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

1. 00:02

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

2. 00:32

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

3. 01:09

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

4. 01:26

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

5. 02:00

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

6. 02:12

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

7. 02:53

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

8. 03:31

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

9. 03:52

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

10. 04:15

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

11. 04:43

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

12. 05:06

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

13. 05:43

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

14. 06:21

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

15. 06:51

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

16. 07:12

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

17. 07:35

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

18. 07:56

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

19. 08:10

    מזיז ובדיוק סלקט, הופ, נקבל עוד הקומפוננטה האפס שורה מספר 9 עכשיו זאת תהיה הקומפוננטה עם האינדקס 2 שורה מספר 1 מצויין איך אנחנו מממשים פה את הכפתור ספין אה זה נראה מעניין זה נראה משהו חדש ונחמד לכל הפחות אנחנו יכולים לממש את זה בצורה הבאה אנחנו יכולים לתפוס את הפיקר שלנו סליחה קראנו לו slot machine ואנחנו יכולים להגיד לו select row in

20. 08:47

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

21. 09:18

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

22. 09:47

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

23. 10:01

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

24. 10:18

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

25. 10:36

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

26. 10:59

    בוא נעשה מערך var images שהוא יהיה מערך ריק של UI image יצרתי מערך רייף אני יצרתי אותו כווריאבל בוא נעשה שווה סליחה יצרתי אותו כווריאבל ואז אנחנו יכולים להתחיל אותו נניח ב-viewed-appים או ב-viewed-load יש לי פה טיפונת חוסר סדר מסוים אז אני צריך לסדר קצת האוטלטים תמיד נמצאים למעלה

27. 11:32

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

28. 11:50

    ב-view did load בואו נתחיל את המערך. אני רוצה לרוץ מ-i שווה ל-0 עד 4 כולל, כי אלה התמונות שיש לי שם, בסדר? ואנחנו רוצים לייצר אימג' חדש ולדחוף אותו לתוך אימג'ס.

29. 12:06

    אז דרך אגב, אימג'ס יכול להיות מערך של אופציונל אימג'ס, אנחנו לא חייבים לעשות כל דבר forceful yanra, ואנחנו רוצים לדחוק פנימה לתוך images את ui-image חדש ואנחנו נשתמש בבנאי של ui-image שנקרא image-named.

30. 12:29

    איך קוראים לתמונה שלי? קוראים לתמונה שלי i ו-0 או 1 או 2 אז i ו-i. בואו נעצור כאן ונראה אם באמת המערך של התמונות שלי מניח את דעתנו.

31. 12:46

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

32. 13:23

    נשחרר פה את הדיבאגייר ועכשיו נלמד גם לאכלס נוריד את נקודת העצירה שלא תטריד אותנו יותר ובואו נלמד לאכלס את הpicker view בעזרת התמונות שיצרנו כי כרגע לא עמדנו פה במשימה הזאת אנחנו זוכרים שב-uipickerview.delegate יש מתודה מעניינת שקוראים לה view4o, view4o.

33. 13:46

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

34. 14:03

    למה? כי המתודה הזאת מחזירה ui view, רואים? אז אני אמור להחזיר פה איזשהו ui view, למשל את ה-image view הזה. עכשיו, איך אני מאכלס אימאג' ווי בתמונה?

35. 14:14

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

36. 14:43

    מה שאנחנו כן יכולים לעשות אבל אנחנו יכולים לנצל את אחת מהתכונות של