עבודה עם UITableViewController - הוספה דינמית של פריטים, מחיקה דינמית וסידור המידע ב-swipe

בלי כתוביותעם כתוביות

מילון מושגים:

קונטרולר - רכיב שמתווך בין הממשק לבין הלוגיקה והנתונים, מקבל בקשות ומחליט כיצד לטפל בהן (למשל בדפוס MVC).

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

כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.

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

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

עבודה עם UITableViewController - הוספה דינמית של פריטים, מחיקה דינמית וסידור המידע ב-swipe

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

הטייבל כ-Table View Controller

1. מוחקים את ה-View Controller הישן ומוסיפים Table View Controller חדש בסטורי בורד.

2. מסמנים אותו כ-Initial View Controller, כדי שיהיה נקודת הכניסה של האפליקציה.

3. יוצרים קלאס חדש שיורש מ-UITableViewController, ומשייכים אותו ב-Identity Inspector.

4. התא מעוצב כמו קודם, עם Outlets לתמונה ולכותרת, ומשויך לקלאס משלו.

כפתור עריכה והוספה

- ה-Navigation Item כולל כפתור Edit מובנה, שמופעל מהקוד באמצעות editButtonItem.

- כפתור הוספה נוצר בעזרת UIBarButtonItem עם סוג system ו-target. ה-target הוא ה-View Controller, והפעולה היא פונקציה שמחושפת ל-Objective-C בעזרת @objc.

- בפעולת ההוספה יוצרים סרט חדש, מוסיפים אותו למערך, ומודיעים לטייבל על שורה חדשה באמצעות insertRows.

מחיקה וסידור

1. המתודה canEditRowAt מחזירה true כדי לאפשר עריכה של שורה.

2. המתודה commit editingStyle מטפלת במחיקה: כשהסוג הוא delete, מוחקים את הפריט מהמערך ומודיעים לטייבל על מחיקת השורה.

3. המתודה moveRowAt מטפלת בסידור מחדש: מוציאים את הפריט מהמקום הישן, ומכניסים אותו למקום החדש.

4. המתודה canMoveRowAt קובעת אם אפשר להזיז שורה.

הסיכום: UITableViewController מספק טייבל עם עריכה מובנית, והוספה, מחיקה וסידור מחדש נעשים על ידי עדכון המערך והודעה לטייבל על השינוי.

השיעור הבא בקורס: עבודה עם UICollectionViewContoller

פרקי ההרצאה: עבודה עם UITableViewController - הוספה דינמית של פריטים, מחיקה דינמית וסידור המידע ב-swipe

תמלול ההרצאה: עבודה עם UITableViewController - הוספה דינמית של פריטים, מחיקה דינמית וסידור המידע ב-swipe

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

00:02
שלום וברוכים הבאים, בסרטונים הקודמים ראינו איך אפשר ליצור טייבל ויו ולצרף אותו לפרויקט וגם ראינו איך אפשר לעשות מאסטר דיטל. היום אנחנו רוצים לקחת את הטייבל ויו שלנו עוד צעד אחד קדימה כדי גם לאפשר לעשות סווייפ טו דליט וגם אנחנו רוצים לאפשר לסדר מחדש את האייטמים מה ששתי הדברים האלה כרגע עדיין לא נתמכים בפרויקט אז בואו נתחיל כדי לעשות
00:28
את הכל בצורה מסודרת אנחנו ניצור פרויקט חדש לשיעור כי אנחנו כבר כמה שיעורים עם פרויקט מתגלגל אני אייצר פרויקט ואני אקרא לזה MovieStableViewController זה שם ארוך אז אתם מוזמנים לבחור לעצמכם איזשהו שם שיותר קצר ומשקף אבל זה בדיוק מה שאנחנו רוצים לעשות בשיעור. אני כמובן אצהר את זה בתיקייה של
00:56
הפרויקטים כדי לא לשעמם אתכם עם דברים שכבר עשינו בשיעורים קודמים העתקתי לפרויקט קובץ בשם MovieDataSource.sweep הקובץ הזה מכיל את ה-struct של מובי כמו שהיה לנו בשיעור הקודם ויש פה את הקלאס הזה של המובי דאטה סורס שהפעם זה קלאס ולא סטראקט, ובנוסף יש פה את המערך
01:17
של הסרטים שלא כפונקציה. בסדר? אז בואו תשפרו את הפרויקט החדש שיצרנו כדי לכלול את הדברים האלה שהוספתי, ובנוסף יש פה את החמש תמונות מהשיעור הקודם. מעבר לזה זה פרויקט חדש לגמרי, אז תעצרו בבקשה את הסרטון ותשלימו לכם גם את התמונות וגם את הסרטים ותחזרו אליי.
01:39
יפה. אז בואו נמשיך. בשיעורים הקודמים הוספנו את הטייבל ויו בצורה מסוימת והיום אנחנו רוצים ללמוד להוסיף אותו בצורה שנייה שהיא גם כן שימושית בשיעורים הקודמים עשינו דבר כזה הוספתי טייבל ויו והוספתי אילוצים זה לא מה שאני רוצה לעשות הפעם אני רוצה להראות לכם
01:57
דרך חדשה כדי לראות את הדרך החדשה אני מחליף פה את כל הויו קונטרולר בואו תראו אני מוחק את הויו קונטרולר הזה עומד עליו ולוחץ על delete פה יפה מאוד המסך שלי ריק לגמרי ומה שאני אעשה אני פשוט אוסיף לעצמי טייבל ויו קונטרולר לא טייבל ויו וסלי בנפרד אלא פשוט את כל הטייבל ויו קונטרולר בצורה הבאה מה שכן אנחנו צריכים
02:28
להגיד לסטורי בורד הזה שהוויו קונטרולר הנוכחי הוא נקודת הכניסה הוא בעצם הוויו קונטרולר הראשי ולכן אני הולך פה לאטריביוט אינספקטור ועומד על הצ'קבוקס של ה-easiness של הוויו קונטרולר יפה אז הנה יש לנו טייבל ויו כבר עכשיו בשיעורים הקודמים הוספנו טייבל ויו והוספנו לו אילוצים הפעם ראינו שאפשר לשים טייבל ויו קונטרולר אבל זה לא הסוף בואו נמשיך
02:56
הדבר הזה אנחנו נרצה גם למחוק את הקלאס של הויו קונטרולר אם כבר אז כבר בואו נעיף אותו ונייצר את הקלאס נייצר קלאס אחר יותר מתאים מה זה יותר מתאים מה שאתם רואים כאן זה לא סתם ויו קונטרולר זה טייבל ויו קונטרולר אוקיי וכדי לשקף את זה אני אייצר לעצמי קובץ חדש והקובץ הזה יהיה מסוג coco touch class והוא יראה שפעם לא מסתם ui view
03:24
controller אלא ui table view controller אוקיי ואני אקרא לזה פשוט movies table view controller ואנחנו נשים לב שהוא נכלל בפרויקט אם תשימו לב יש פה מלא מלא קוד אבל אל תדאגו אני כאן כדי להנחות אתכם במה יש בקוד החדש מה שכן לפני שנמשיך אתם בטח יודעים שברגע שמוסיפים view controller חדש מהסטורי בוק
03:59
ומוסיפים קלאס צריך לתאם ביניהם אז איך אנחנו מתאמים אני אעמוד על הטייבל ויו קונטרולר שיש לי כאן ואני אלך לאידנטיטי אינספקטור על מנת לשייך לו את הקלאס רגע נעמוד על הטייבל ויו קונטרולר אלך לאידנטיטי אינספקטור והנה הקלאס שלנו מצוין דבר שני אנחנו נרצה אם כבר בטייבל ויו שלנו גם לעשות צל נכון
04:27
ואנחנו רואים שכבר יש לנו פה צל מובנה שזה נהדר נהדר נהדר מה שכן אנחנו רוצים אבל אולי לעצב מחדש את הסל הזה קצת וגם אותו לשייך לקלאס כדי שנוכל לגרור אאוטלטים. אז בואו נייצר עוד קלאס אחרון New File UI Table View Cell בואו נראה איזה Cocoa Touch קלאס שיורש מ-UI Table View Cell ונקרא לו כמו בפעמים קודמות Movie Table View Cell בסטורי בורד נסתכל
05:03
שוב אני עומד על ה-Table View Cell שלי ועושה קישור אחרון זהו עבודה קשה מאחורינו אני חייב לציין אני רק אעצור פה שנייה כדי לתת לכם זמן להסתדר.
05:19
יש לכם פה את הטייבל ויו קונטרולר, התחלנו את אותו פרויקט, הצלחנו פשוט טייבל ויו קונטרולר חדש מהאובג'קט ליבררי.
05:28
יפה? זה אחד. וכמובן סידרנו שהוא יהיה נקודת הכניסה לתוכנית. 2. יצרנו פה קלאס מסוג טייבל ויו קונטרולר שיורש מטייבל ויו קונטרולר, תשימו לב שזה מה שעשיתם.
05:41
דבר שני, יצרנו קלאס נוסף שיורש מ-UI Table Viewsale בקלאס של ה-Table Viewsale כמו שעשינו בשיעורים הקודמים אנחנו יכולים למחוק פה את שתי הפעולות האלה כי הן מיותרות מבחינתנו בשלב הנוכחי וב-Storyboard אנחנו יכולים לבוא לפה ולעצב את התא שלנו כדי
06:01
שייראה לנו נחמד ומתאים בואו נעצב את התא בזריזות כי זה לא כל כך הנושא של השיעור עשינו את זה בשיעורים קודמים וזה מהווה עבורנו תרגול אז אני אשים פה פשוט תמונה ואני פשוט אוסיף ליד התמונה נשים לו תמונה נניח על החלק הזה ככה עוד משהו שאני אעשה לפני האילוצים לפני הכל אני פשוט
06:26
אבחר פה תמונה כדי שנראה איך זה אמור להיראות יפה נראה איך זה נראה נורמלי ואנחנו מעבר לתמונה נרצה להוסיף פה גם לייבל ונניח שזה הכל מה שאנחנו רוצים רק את הלייבל של הסרט יפה מבחינת אילוצים אז אז אנחנו פשוט נקשור את התמונה הזאת לשלושת הכיוונים, אני אתן נניח 8, 8 ו-8 ואת הלייבל אני יכול למרכז אותו בציר
07:04
Y, אז אני אעשה Align Vertical in Container, כשבצד שמאל אני אצמיד את זה עם שוליים של 16 לתמונה של אייל. מצוין.
07:18
לגבי הכותרת פה כמובן אפשר לבחור בפונטים ואתם מומחים בדבר אחרי השיעור הקודם, אז אני אדלג על העניין ואני פשוט אכתוב פה איזשהו טקסט בשביל עצמי שאני ארגיש יותר נוח נגיד אני סתם אכתוב פה wasp כדי לראות איך זה נראה. יפה.
07:36
דברים שכבר עשינו. עכשיו שימו לב אנחנו רוצים לגרור Outletים אז אנחנו נפתח את ה-assistant editor ונשים לב ב-assistant editor שתחת אוטומטיק אנחנו בוחרים את ה-movie table view cell שלנו הפעם ה-cell הוא ריק ואנחנו יכולים לגרור Outletים Outlet אחד עבור התמונה נקרא לזה פוסטר אימג' או אימג' ויו יותר נכון
08:04
כי זה אימג' ויו אין מה לעשות ולגבי הלייבל אז זה יהיה הטייטל לייבל של הסרט אני אקרא לזה מובי טייטל לייבל הופה שימו לב שיש לי פה איזשהו תקלה מסוימת כתוב לי שאני גורר אוטלט מסוג ns layout constraint זה לא מה שאני רוצה לעשות אני לא רוצה לגרור אוטלט לאילוץ אני רוצה לגרור אוטלט ללייבל עצמו אז אני אפילו יכול לגרור גם משם כדי ממש ממש לוודא את זה שאני גורר Outlet ל-Label ולא למשהו אחר.
08:40
שוב פעם, קראתי לזה Movie Title Label. יפה. אז הנה, יש לי שתי Outletים, Outlet אחד ל-Image, Outlet אחד ל-Label, דברים שאנחנו יודעים לעשות.
08:56
מצוין. אני בשלב הזה יכול כבר לסגור סוף סוף את ה-Store Reboard ולהתפנות לדברים שמעניינים אותנו בשיעור הנוכחי.
09:05
מה שאני רוצה לעשות היום, אנחנו רוצים ללמוד לעשות סווייפים וגם איך לעבוד עם ה-Table View קונטרולר הזה כי זה פקד חדש בשבילנו אנחנו יודעים לעבוד עם טייבל ויו ולהוסיף אותו לויו קונטרולר אבל בוא נראה מה אנחנו יכולים לעבוד איך אנחנו יכולים לעבוד עם הטייבל ויו קונטרולר
09:20
החדש לפני שנסיים עם ה-UI לחלוטין לחלוטין יש לנו עוד צעד אחד קטן הטייבל ויו סל הזה צריך לתת לו reuse identifier אני אקרא לו movie cell אז זהו אלה כל הצעדים לא לשכוח פה לתת ID כי זה מאוד מאוד חשוב עכשיו אחרי כשהצבנו את התא ודאגנו גם שיש לנו מובי ויו
09:48
קונטרולר שהוא מסוג טייבל ויו קונטרולר ביעד ויש לנו קלאס קאסטום קלאס עבור הסייל שגררנו עליו את האוטלטים אנחנו יכולים סוף סוף לצאת לדרך התכנות פה באפליקציה הזו. מה שאנחנו נעשה אנחנו נלך לקלאס שלנו של הויו קונטרולר אנחנו נפנה פה את השטח כדי שיהיה לנו המון מקום לעבוד ואנחנו נתחיל להסתכל על דברים מעניינים.
10:13
קודם כל זה טוב שיש לנו פה הרבה הערות זה בעצם חוסך לנו עבודה. למשל, יש לנו כבר פעולה שנקראת מספר הסקשנים.
10:22
אז כמה סקשנים אני רוצה ב-Table View? אני באמת רוצה רק אחד. סקשן יכול להיות, נניח, כמו בספר טלפונים, לפי האות A כל אנשי הקשר באות A, לפי האות B כל אנשי הקשר באות B. אבל אין לי חלוקה כזאת למקטעים, ועל כן אנחנו נמשיך.
10:43
מה לגבי מספר השורות בסקשן? אנחנו שוב פעם בעניין הזה. כמה סרטים אני רוצה להציג אני רוצה להציג מוביס נקודה קאונט עכשיו איך אני אעשה את זה מה שאני אעשה כאן אני פשוט אשלוף את הסרטים מהמובי דאטה סורס באופן הבא אני אומר כאן var מוביס לא let כי אני רוצה שהם יבואו שינויים בהמשך והם יהיו שווים למובי דאטה סורס חדש וממנו
11:12
אני רוצה לקחת את הסרטים אז יש לי פשוט מערך של מובי ריי בסדר זה הטייב של הדבר הזה מובי ריי נהדר ויראה בצורה כזאת, יפה מאוד אוקיי אז זה מה שיש לי פה בואו נמשיך אנחנו עכשיו יכולים לענות על השאלות שנשאלות כמה סרטים אנחנו רוצים להציג movies.com כבר אחרון אנחנו פשוט רוצים להוריד פה את ההערה מהמתודה table view
11:49
dequeue reusable cell עבור identifier כשהidentifier שלי זה movie cell מה זה ה-id הזה אתם זוכרים? ה-ID של הסל שאותו שמנו בסטורי בורד בסדר זה הסל שלי נתתי לו אידנטיפייר קודם וזה פשוט ה-ID שלו בסדר הנה בואו נסתכל אני עומד על המובי סל זה פשוט ה-ID הריסטוריישן ID ובקוד איך זה בא לידי ביטוי אני אומר לטייבל
12:20
ביו שלי עכשיו שייתן לי סל חדש עם ה-ID הזה אז הוא מייצר לי סמופה של מה שיצרנו שם ב-UI אחד כזה כל פעם אני יודע אבל השארתי אותו לקלאס מובי סל שלי אז אני יכול לעשות פה קאסטינג כמו בשיעורים הקודמים ועכשיו כל מה שנשאר לי לעשות זה קונפיגורציה לסל דרך אגב בוא ננסה רגע להריץ ונראה מה מצבנו עכשיו יפה מאוד אז הנה כבר יש לי חמישה סרטים הדרך פעולה ביחד ברגע שאנחנו עובדים
12:55
עם הטייבל ויו קונטרולר התכנות הרבה הרבה יותר נוח כי בעצם קיבלתי פה את כל הקוד מוכן אז הייתי חייב להראות לכם את הטריק הזה ועוד מעט נראה לכם עוד כמה דברים יפים עם הטייבל ביו קונטרולר הזה.
13:09
לגבי הקונפיגורציה של הסל זה בדיוק אותו דבר כמו שעשינו בשיעורים הקודמים, אני מוציא סרט אחד ממערך הסרטים לפי המקום שלו באינדקס פאף, אינדקס פאף נקודה רואו, אז הנה יש לי סרט וכל מה שנשאר לי לעשות זה לשים את הטייטייל, את הטקסט שלו לקחת כמובן מהסרט, יפה.
13:35
עוד דבר שאנחנו נעשה זה לגבי הפוסטר אימאג', שימנו שם את התמונה שלנו מהמובי ואנחנו נריץ שוב ונוכל לראות כבר את המידע שלנו מתנוסס על ה-UI. נבדוק, מדהים, יפה.
13:55
רק שתדעו שבכל אופן לייצר טייבל ויו זה פעולה יחסית מתקדמת ועל כן זה לוקח מעט זמן אף על פי שאנחנו ככה מראים לכם פה את כל הקיצורים הטובים.
14:06
כדי להמשיך אנחנו נרצה לעטוף את ה-View Controller שלנו ב-Navigation Controller ואת זה אנחנו כמובן נעשה בסטורי בורד. אז אני אלך למיין סטורי בורד, אני אעמוד פה על ה-view controller ואני רוצה לעטוף אותו ב-navigation controller.
14:19
זוכרים? הולכים לאדיטור או אמבד אין, navigation controller. מצוין. אני רק אצמצם פה טיפונת את השטח כדי שנוכל לראות את התמונה הכוללת.
14:30
בעצם אנחנו יכולים עכשיו, הוספנו לעצמנו מיין מקום ל-title והוספנו את ה-navigation item, נכון? אתם מכירים את זה משיעורים קודמים, אתם יודעים שאפשר ככה לכתוב פה movies וכן הלאה.
14:43
מה שאתם עדיין לא יודעים זה שאנחנו יכולים להוסיף לכאן כפתורים שיכולים לעזור לנו לערוך