עבודה עם SplitViewController Master Details
cornerRadius שהוא חצי מהגובה וגם masksToBounds.Landmarks.load, עם section אחד ושורה לכל מקום.didSelectRow מבצעים performSegue עם ה-landmark כ-sender. ב-prepare צריך לזכור שהיעד הוא ה-Navigation Controller, ולכן לוקחים ממנו את viewControllers.first. בלי זה המידע לא מגיע.preferredDisplayMode ל-all visible כדי שבמצב אופקי יוצגו שני הצדדים. עם delegate שמחזיר true מ-collapseSecondary מתחילים במצב אנכי ב-Master ולא ב-Detail. לכפתור החזרה ולכפתור ההרחבה מציבים displayModeButtonItem ב-left bar button, עם leftItemsSupplementBackButton כדי לשמור גם את כפתור back.addingPercentEncoding עם urlQueryAllowed כדי שתהיה תקינה. נבחר השדה product url.UIApplication.shared.open. כדי לקבל הנחיות צריך שלסימולטור יהיה מיקום מדומה.prepare נבדק עם cast לטיפוס Landmark.פרקי ההרצאה: עבודה עם SplitViewController Master Details
תמלול ההרצאה: עבודה עם SplitViewController Master Details
הטקסט המלא של הדקות הראשונות בהרצאה «עבודה עם SplitViewController Master Details» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום וברוכים הבאים בשיעור הקודם למדנו להציג מפה לבחור את סוג המפה עד להציג נקודות עניין על המפה וכן הלאה היום אנחנו רוצים ללמוד להציג טבלאי מקומות קרובים אלינו למען אותם בעצם את האתרים לפי מיקום לנווט להם מקום נבחר ולעבוד עם split view controller מעל הכל
שזו צורה מאוד מאוד מגניבה לעשות master detail ב-iOS אז בואו נראה רגע את הפרויקט שלנו כמות שהוא אז זה בעצם הפרויקט שעד כה עשינו ואנחנו רוצים להמשיך היום את הפרויקט אז תישארו על אותו פרויקט לפי הפרויקט הזה אנחנו רוצים בעצם להוסיף עוד מסכים יש לנו פה רק את
המסך הראשון שבו הצגנו את מיקום המשתמש והצגנו בעצם נקודות על המרפאה עם לחיצה שעדיין עושה רק תא ומפה אנחנו רוצים להוסיף עוד תאבים לדבר הזה לתא בקונטרולר במיוחד את הספלידג'יו קונטרולר שזה הנושא של הסרטון אני אראה לכם שנייה את האפליקציה שאנחנו רוצים לבנות ללוקיישן פרויקט הזה וכאן אתם
יכולים לראות שיש לנו את המקומות שמסודרים לפי קרבה אל המשתמש עכשיו, לא רק שהם מסודרים, זה מאסטר דיטייל, זאת אומרת זה טייבל וויו קונטרולר כל הדבר הזה, ואם אני לוחץ כאן, אז אני רואה את הפרטים על המקום.
עכשיו, אם אני אסובב את המכשיר, אעשה קומנד וסלאש ושמאלה סליחה כדי לסובב את המכשיר, אתם תראו בעצם שאתם רואים פה את המאסטר וכאן את הדיטייל בצד ימין, ולזה אנחנו קוראים ספליט ויו קונטרולר.
ברגע שיש מספיק מקום בטלפון שהטלפון מספיק גדול, אז בצד שמאל אנחנו מציגים את המאסטר ובצד ימין אנחנו מציגים את הדיטיילס שזה ממש מגניב ואתם יכולים לראות שזה ככה מאפשר לפתוח ולסגור אז זה בעצם מה שאנחנו רוצים להוסיף עכשיו, קוראים לזה Split View Controller, אוקיי?
אתם שמים לב עוד פעם, אני כולל פה בעצם טייבל ויו קונטרולר ודיטייל סקרין וזה אדפטיבי, זה מתאים את עצמו לגודל של הטלפון בצורה אוטומטית.
כדי להוסיף את זה אנחנו נצטרך הרבה מקום בסטורי בורד זה לוקח מלא מקום תכף אתם תראו בואו נעשה פה רגע פלוס נראה כמה מקום זה תופס אז אנחנו עושים פלוס וספליט ויו קונטרולר ואותו אנחנו נרצה לשים פה למטה הנה אתם רואים כמה מקום הוא לוקח הדבר הזה אז נרצה לשים אותו ממש פה למטה ואחר כך לפנות לו עוד טיפה מקום כן די מסיבי אני אוריד
את הטאבר קונטרולר שיהיה ככה ליד הדבר הזה ככה ואת שתי אלה טיפונת נעלה למעלה נכון עוד טיפה לסדר, שיהיה יפה, סימטרי, יש.
עכשיו, כאן כתוב first, לי זה קצת מפריע בעין, בואו נשנה את זה, פשוט להציג את ה-map, אז בוא נרשום פה פשוט map, ועכשיו יש לנו את ה-master, את ה-split view controller שכתוב פה master, תכף נדבר על זה,
בואו נגרור לו בו segway, קונטרול וגרירה, ואנחנו רוצים שזה יהיה view controller, נכון? עכשיו, יפה.
עכשיו אנחנו נעמוד פה על האייטם, על הריבוע הכחול, ובצד ימין בתכונות באטריביוט אקספקטור אנחנו נרצה לשנות פה את השם של הדבר הזה בעצם לקמפ סייטס שיהיה כתוב כאילו כמו חניוני לילה קמפ סייטס זה הטקסט וגם את התמונה אנחנו רוצים לשנות נכון עכשיו התמונה נקראת פליין אז בוא נרשום פליין יש
את התמונה הזאת מובנית באיוס נהדר קצת אז הנה יש לנו גם אייקון לספליט ויו קוטרולר עכשיו בוא נראה מה הספליט ויו קוטרולר כולל בעצם ומה עוד אנחנו צריכים להוסיף יש לנו פה את הספליט ויו קונטרולר עצמו שהוא נותן לנו פה נביגיישן קונטרולר וכבר טייבל ויו קונטרולר מוכן שזה נחמד ופה יש לנו את הדיטל סקרין רצוי שגם הדיטל סקרין
יעטוף בתוך נביגיישן קונטרולר משל עצמו כדי שככה הוא יוכל לשלוט יותר טוב בטייטל וכן הלאה אז הטמפלייט הזה לא מושלם ואת זה אנחנו צריכים להכניס לתוך נביגיישן קונטרולר אני אעמוד פה על הויו קונטרולר של הדיטיילס ואנחנו נרצה לעטוף אותו ב-navigation controller אז אני אלך למעלה editor embed in navigation
controller יפה אז יש לנו את הספליט הספליט מציג מצד אחד table view ומצד שני יש לנו את הדיטיילס איך אנחנו נדע להציג את הדיטיילס מתוך הטייבל ויו קונטרולר אנחנו צריכים לגרור סגוויי לכאן והסגוויי הוא סגוויי מיוחד זה סגוויי שעד היום לא נגענו בו אנחנו נגענו בשואו פרזנט מודלי וכן הלאה וגם אפילו עוד סגוויי
אבל סגווי הנוכחי זה show details אוקיי ואנחנו נרצה לתפוס את הסגווי שהוספנו ולתת לו גם אידנטיפייר כדי שנוכל לזהות אותו אז אנחנו נקרא לו details יופי לסיכום בספליט ויו קונטרולר יש לנו שתי חלקים יש לנו את המאסטר ויו קונטרולר שבמקרה הזה זה טייבל ויו קונטרולר ויש לנו את הדיטלס ויו קונטרולר ולשניהם יש נביקיישן זה קצת
עמוס בעין כאילו נראה כמו תמונה די גדולה אבל היי באנו לעשות פרויקט גדול ואנחנו רוצים שהוא יצא יפה נהדר עכשיו איזה view-controller אנחנו צריכים?
אחד זה table-view-controller, שתיים זה ה-details-view-controller. אז ל-view-controllers אנחנו הולכים להוסיף שני view-controllרים, בואו נעשה New File, Coco-Touch-Class ויש לנו בעצם את ה-Camp-Sites-Table-View-Controller, נירש מ-Ui-Table-View-Controller ונקרא לזה Camp-Sites-Table-View-Controller, זה אחד, שתיים אנחנו נרצה ליצור את
ה-Place-Details-View-Controller אז בואו נעשה New File, Coco-Touch-Class, נקרא לזה, זה יהיה Ui-View-Controller רגיל כבר, אז נשנה את הסאב קלאס ל-Ui-View-Controller ובוא נקרא לזה Place Details כדי שיהיה יותר ברור View-Controller פנטסטי אז
אלה שתי ה-View-Controllers שאנחנו נרצה ליצור היום מבחינת עיצוב אז אל תשכחו שיש לכם Table-View-Controller ו-Table-View-Controller צריך סל אז אנחנו רוצים לייצר עוד גרופ אחרון בפרויקט New Group של Views ובתוך הגרופ של ה-Views אנחנו רוצים לייצר
לנו סל אז New File שיורש מקוקוטאץ' קלאס כמובן שיורש מ-UiTableViewCell הפעם וזה יהיה בעצם ה-PlaceCell אוקיי PlaceTableViewCell נהדר אז בנינו פה מלא קלאסים בואו נתחיל רגע לראות איך אנחנו מממשים אותם ואיך זה נראה אנחנו נלך רגע לסטורי וורד ונקשר את כל הקלאסים
שיצרנו עם המפלצת הזאת של עיצוב אז רגע אנחנו הולכים ל-TableViewController ראשון ואנחנו הולכים ל-Identity קינספקטור פה למעלה הכחול ואנחנו רוצים לתת לו את campsite stable view controlling זה אחד עכשיו לסל לטייבל ניו סל נעבוד פה ונבחר בסל לסל אנחנו רוצים לתת את הקלאס שיצרנו בשבילו נכון פליי סטייבל סל מעולה בוא נגדיר קצת את הסל כדי שנוכל לראות אותו יותר טוב ואחר כך נעצב אותו אם אנחנו כבר על הסל אז
בואו לא נשכח ניתן לו כבר אידנטיפייר אני אלך פה לאטריביוטס של הסל רק נעבוד פה על הסל ואנחנו לוקחים פה לאטריביוטס וניתן לו ID של סלד ואנטר.
אז קישרנו את הקלאס של הטייבל ויו קונטרולר, קישרנו את הקלאס של הסלד, בואו נלך גם לביו קונטרולר של ה-Detail ונלך ל-Identity Inspector, וכאן אנחנו רוצים לתת לו את הקלאס שיצרנו בשבילו שזה ה-Place Titles ויו קונטרולר.
אז יצרנו פה מלא קלאסים, עכשיו בואו נתחיל לחשוב איך אנחנו רוצים לעצב את הטייבל ויו שלנו. בטייפל ויו אנחנו נרצה שיהיה לנו לייבל עבור השם של המקום עבור העיגול הזה של המקום נכון יש לנו בצד את העיגול בצבע אז זה לייבל למעשה עכשיו הלייבל הזה יהיה לו גובה ורוחב של 100 אז בוא ניתן לו וויט והייט של 100 ואנחנו נרצה בעצם להצמיד אותו לצד שמאל של
הסל ואנחנו נרצה לתת לו 16 מלמעלה ו-16 מלמטה או 8 יותר נכון זה מספיק בוא נעשה 8 מכל הכיוונים האלה כדי לתת לו איזשהו ריבוח מסביב זה הלייבל אנחנו נרצה שהטקסט שלו יהיה באמצע ככל האפשר אז נמרכז את הטקסט עוד מעט אני אראה לכם איך לצבוע את זה ולעגל את זה אז אנחנו נעשה את זה גם כן עכשיו מעבר ללייבל
עצמו אנחנו רוצים בעצם להוסיף את השם של המקום ואיזשהו details על המקום אז בואו נעשה עוד פלוס יש לנו לייבל נוסף ואנחנו נשים אותו פה למעלה ומבחינת אילוצים אנחנו הולכים להוסיף אילוצים בוא נגיד 8 מכל הכיוונים וזה הלייבל שלנו אנחנו רוצים להציג פה אולי טקסט בעברית ולכן אפשר פשוט ליישר לימין אוקיי אז אישרתי לימין
את הלייבל את הטקסט של הלייבל מספר השורות הוא 0 בואו נוסיף עוד לייבל אחד נשים אותו פה ואנחנו רוצים את אותו דבר מבחינת אילוצים אנחנו רוצים בעצם ל-8-8 למטה ולימין 8 וליישר לימין עוד דבר אחרון הגודל של הסל בואו נלך פה לסל בצד שמאל הגודל של הסל צריך להיות אוטומטי לפי אילוצים, זאת אומרת לקחנו פה גובה של 100 ואיזה שם שוליים
אז אנחנו עומדים פה על הסל בצד שמאל ואנחנו הולכים לסרגל ואנחנו רוצים להגיד שהגובה של השורה הוא אוטומטי בסדר בהתאם לאילוצים יפה מאוד אז אלה בעצם האילוצים שלנו עכשיו אנחנו רוצים להוציא אאוטלטים וכן הלאה כדי לראות את הדברים אז בוא נפתח את האסיסטנט אדיטור וכאן אנחנו רוצים פתוח את האסיסטנט אנחנו רוצים ללכת פה למעלה איפה שכתוב אוטומטי ולשנות את זה לסייל שלנו
ואנחנו רוצים כמובן לגרור את הלייבל אז אני מושך מהלייבל קוטרול גרירה לפה בוא נקרא לזה פלייס אימג' לייבל או משהו עכשיו כאן זה יהיה ה-Name Label ואחרון זה בעצם איזשהו סאב טייטל לייבל אז בוא נוריד לפה ונקרא לזה סאב טייטל לייבל יפה אז הוצאנו בעצם אוטלטים לדברים שיש בסל בוא נוריד מפה את
הדברים האלה ובמקומם נעשה פונקציה של פופולייט וויב לנדמארק אז יש לנו פאנק פופולייט וויב ואנחנו רוצים לקבל לנדמארק כלשהו שזה המודל שלנו באפליקציה ב-place image label אנחנו בעצם זה היופי פה בעיצוב כאן נכון זאת אומרת זה עיגול כזה אז אנחנו נרצה לעבוד עליו מעט דבר ראשון שאנחנו נעשה אנחנו ניקח את הטקסט
שלו וזה יהיה שווה ללנדמארק עם l קטנה, נקודה type נקודה raw value אוקיי יש לו raw value של סטרינג אז אמור להיות בסדר עכשיו מעבר לטקסט אנחנו רוצים לצבוע את זה באיזשהו צבע אז placemark label נקודה background color שווה לlandmark type נקודה color אנחנו נרצה שהטקסט יהיה באיזשהו צבע לבן אז בוא ניתן לו טקסט לבן
אוקיי בוא נראה אם שכחנו פה משהו מבחינת אכלוס של המידע שמנו את המידע אבל איך אנחנו הופכים את זה להכל אז אנחנו תופסים את הלייבל בדרך אגב זה נכון גם לגבי עודפה קדימה ואנחנו רוצים לעבוד עם הלר שלו עם ה-C לר שמאחורי ה-VU ועל הלר אנחנו יכולים לקבוע דברים כמו רדיוס אוקיי קורנר רדיוס
אז הקורנר רדיוס צריך להיות בעצם ההייט חלקי שתיים אז בוא נגיד לו שיקח פשוט את הגובה של הלייבל נקודה פריים נקודה הייט ונחלק את זה בשתיים ככה שזה יצא לגמרי לגמרי עגול אבל זה לא מספיק כדי שבאמת הוא יהיה עגול עד הסוף שאנחנו צריכים להגיד ללייבל layer masks to bounce true אוקיי כדי שהוא יתייחס באמת לפורנראפיס שלנו אז עכשיו הלייבל שלנו יהיה עגול יותר הוא
יהיה מוגל עד הסוף יהיה עיגול יפה נתנו לו גם צבע רקע בהתאם למה שיש לנו במודלים ואמרנו לו לעשות את זה עגול אוקיי עכשיו ה name label זה נורא קל אז name label נקודה text שווה לlandmark נקודה לטקסט נקודה name סליחה ו-subtitle label לטקסט שווה בוא ניקח את ה-vendor name landmark.landmark.vendor name יפה מאוד אז בעצם אכלוס של ui
tableviewsend נכון לא משהו חדש אז בוא נמשיך כאן יש לנו את ה-campsites tableviews controller וכאן אנחנו נרצה את המקומות שלנו כדי להציג על המפה נכון אז יש לנו את הפונקציה load ה-landmarks אנחנו פשוט נייצר מערך לד פלייסס שווה וזה יהיה בעצם landmarks.load אנחנו בעצם טוענים את כל המקומות יפה ברגע
שיש לנו מערך של דברים אז לא קשה לקבוע את הדברים האחרים מספר הסקשנים זה אחד יש לנו רק סקשן אחד בתי בלוויו ומספר שורות בכל סקשן זה פלייסס אקאונט עכשיו יש לנו פה את המתודה הזאת של sell for all את אינדקס פארק אז אנחנו זוכרים שהreuseid שלנו הוא sell כי ככה קבענו
ואנחנו צריכים לקנפג את התא. כדי לקנפג את התא בואו נוציא את ה-place שלנו, אז let landmark שווה ל-places במקום האינדקס פאף נקודה row, טייבל ויו, וברגע שיש לי landmark אנחנו נעשה if let cell שווה ל-cell as,