עבודה עם UICollectionViewContoller

תמלול ההרצאה: עבודה עם UICollectionViewContoller

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

1. 00:02

   שלום וברוכים הבאים בשיעורים הקודמים למדנו איך לעבוד עם טבלאות אבל לא תמיד אנחנו רוצים לעבוד עם טבלאות לעיתים אנחנו רוצים לעבוד עם גרידים ועל כן היום אנחנו נרצה ללמוד לעבוד עם ui collection view כדי להתחיל אנחנו נייצר פרויקט חדש לשיעור בxcode אז בואו נייצר new single view application

2. 00:24

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

3. 00:57

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

4. 01:21

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

5. 01:54

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

6. 02:20

   סל כרגע זה סתם סל ומה שאני אעשה בנוסף אני פשוט אצבע פה את ה-Background אני אשים פה איזשהו צבע ככה כזה או אחר מצוין אז הנה התא שלי יפה מאוד כמה תאים יש לנו מהקונטרולר הרי הנה אוקיי זה ייצור אבל איפה הקוד נכון show me the code אתם כמובן אומרים אז אני אמחק מפה את ה-view controller שיש לי כאן move to trash ובמקומו

7. 02:54

   אנחנו צריכים לייצר שתי קלאסים. למה שתיים? כי אחד אנחנו צריכים בשביל ה-Cell ואחד אנחנו צריכים בשביל ה-Collection View Controller.

8. 03:03

   בואו ניגש לעבודה. אני אעמוד פה על הגרופ, אני אעשה קליק ימני, קובץ חדש, ואנחנו רוצים CocoTouch קלאס.

9. 03:13

   נתחיל ב-UICollectionViewController וזה יהיה ה-Icons Collection View Controller. אוקיי, אז תשימו לב שאתם עושים פה סאב קלאס של UICollectionViewController כי זה הפקד שהוא הנושא של השיעור שלנו היום, יפה.

10. 03:35

    עוד מעט נגיע פה לקוד, אבל לפני כן נייצר לעצמנו את מה שצריך. אז אני מייצר עוד קובץ חדש עבור ה-Cell, ושוב פעם, Coco Touch Class. הפעם ה-Coco Touch Class הזה יורש מ-UI Collection View Cell, יופי, נקרא לו Icons Collection View Cell.

11. 03:56

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

12. 04:19

    ל-icons collection view cell שיצרנו זה נהדר עכשיו אני יכול לעשות ביינדינג ל-cell הזה ואני אוכל לעבוד עם ה-collection view שלי כמו שצריך האם נתנו ID ל-cell?

13. 04:33

    כן נתנו תמיד כדאי לזכור ואם כן בואו נעתיק את ה-reuse ID יופי מבחינת עיצוב ראשוני בואו נשאיר את זה ככה וננסה פשוט להתקדם as we go בסדר זה העיצוב של התא תא ורוד אם אנחנו עכשיו נריץ את האפליקציה האם אני אראה תאים ורודים אני לא חושב אתם חושבים שכן אני חושב שלא בוא נבדוק מריצים

14. 04:59

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

15. 05:14

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

16. 05:37

    אנחנו לא צריכים לעשות את מה שכתוב כאן, אז אני מורחק את השורות האלה. אם אתם תשאירו את השורות האלה עם ה-Reuse ID, נקבוץ לכם האפליקציה אז מוזמנים לעשות מוזמנים לא אני רוצה לוותר גם על השורות האלה הן לא רלוונטיות עבורי לגבי navigation אז יש לנו פה את הפונקציה prepare for segue לא רוצה שהיא תעיב על הרקע אנחנו מכירים את הפונקציה

17. 06:01

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

18. 06:26

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

19. 06:38

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

20. 06:49

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

21. 07:29

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

22. 07:58

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

23. 08:21

    collection view flow layout ותכף אני אראה לכם למה זה דווקא ככה בדיוק אוקיי כתבתי פה שורה אני חייב לכם הסבר אני טוען שהלייאוט שבחרתי הוא Collection View Flow Layout ולא סתם לייאוט אחר.

24. 08:39

    אנחנו צריכים לבדוק למה הכוונה. אני אסתכל רגע בסטורי בורד ואני מסתכל על ה-Collection View שלי, ואם אנחנו נסתכל על הלייאוט שלו, יש לו Flow Layout, לא Custom Layout.

25. 08:53

    אנחנו לא יצרנו לייאוט מיוחד משל עצמנו או הורדנו ספרייה מהאינטרנט שמייצרת לייאוט בשבילנו, אלא אנחנו משתמשים באמת ב-Collection View Flow Layout.

26. 09:03

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

27. 09:29

    מאוד מאוד ורסטילי אבל אצלנו במקרה שלנו יש לנו קולקשן ויו פלואו לאאוט ועל כן הרשיתי לעצמי לעשות באמת את הקאסטינג המתאים בוא נסתכל על הקלאסט גם יש לנו את ה-ua-collection-view לקולקשן ויו יש את ה-flow-layout שלו והנה הטייפ אתם רואים ua-collection-view-flow-layout דרך אגב אם אתם מורידים

28. 09:52

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

29. 10:15

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

30. 10:37

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

31. 10:57

    מבינים? רוחב של כל איבר הוא חצי מסך פחות קצת פאדינג. מצוין. עכשיו אנחנו נרצה לייצר ללייארד שלנו להגיד לו מה יהיה הפאדינג, בוא נאמר ל-layout.minimum-item-spacing inter-item-spacing שווה ל-padding ובנוסף אנחנו נרצה לומר ל-layout שלנו שה-item-size שלו יהיה CG-Size חדש אני אתן

32. 11:34

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

33. 12:07

    בסדר בואו נבדוק אם החישובים שלנו מספיק