עבודה בסיסית עם UITableView - עיצוב מובנה

תמלול ההרצאה: עבודה בסיסית עם UITableView - עיצוב מובנה

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

1. 00:02

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

2. 00:24

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

3. 00:38

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

4. 00:54

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

5. 01:11

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

6. 01:36

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

7. 01:47

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

8. 02:02

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

9. 02:22

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

10. 02:58

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

11. 03:31

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

12. 04:00

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

13. 04:14

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

14. 04:59

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

15. 05:27

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

16. 05:38

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

17. 05:49

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

18. 06:07

    מצוין. מה שאנחנו נרצה לעשות עכשיו, אנחנו נלך ל-Storyboard ואנחנו נוסיף ל-View Controller שלנו לתכניכה שתהיה UI TableView.

19. 06:18

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

20. 06:30

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

21. 06:49

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

22. 07:11

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

23. 07:40

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

24. 07:57

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

25. 08:24

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

26. 08:35

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

27. 08:59

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

28. 09:23

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

29. 09:56

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