UINaviagationControllers - Practice
פרקי ההרצאה: UINaviagationControllers - Practice
תמלול ההרצאה: UINaviagationControllers - Practice
הטקסט המלא של הדקות הראשונות בהרצאה «UINaviagationControllers - Practice» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
טוב אז אחרי שהסברנו את כל הרקע התיאורטי הנדרש אני רוצה להראות לכם עוד טיפ אחד נחמד לפתרון של התרגיל יש תוכנה כזאת שנקראת אייקון סייט עכשיו מה שהתוכנה הזאת עושה זה לתת לנו מלא מלא אייקונים מגניבים לאפליקציה אני קופץ רגל על הדפדפן מחפש אייקונס 8 אוקיי ואני אבחר להוריד את התוכנה עכשיו רק שתדעו
שהתוכנה הזאת היא חינמית לזמן פיתוח אבל אחר כך אתם צריכים לשלם על האייקונים וכאלה אז לא להשתמש בה שלא לפי התנאי שימוש אלא פשוט סתם בשביל ככה לראות אייקונים מול העיניים בזמן שאנחנו מעבירים את ההרצאה.
אז אתם פשוט לוחצים על דאונלוד מורידים את התוכנה ובזה זה מסתיים. כאן הם כותבים לכם את התנאי שימוש וכולי וכולי אז בבקשה לשים לב וככה לתת להם קרדיט איפה שצריך וזה מה שאני אעשה גם אני כרגע אומר לכם מאיפה לקחתי.
אנחנו רוצים ללכת לפרויקט שזה הפרויקט שלנו שמאפשר מעבר בין מסכים זוכרים ואנחנו רוצים להעביר פיצות בין המסכים שלנו אוקיי אני רוצה לבצע פה את כל העניין אחרי כל התוכניות שתכננו.
כדי לעשות את זה בואו קודם כל נוסיף קצת תמונות ובשביל להוסיף תמונות אני פותח את האפליקציה הזאת שנקראת Icons 8. ב-Icons 8 הגודל אצלי הוא 100 כמו שאתם שומעים את עצמכם אני מחפש כל מיני דברים.
על המסך הראשון אנחנו רוצים לאפשר בחירה של כל מיני סוגי פיצה. אז כתבתי פה פיצה בחיפוש ואני פשוט גורר תמונות לאסטים שלי. פיצה 1, פיצה 2, פיצה 3.
לא השמות הכי מוצנחים, אנחנו נשדרג את זה עוד מעט. לגבי תוספות, אז בוא נאמר אניונס, בוא נראה אם יש להם פה משהו.
סליחה, אבל אוקיי, שאניונס. בוא נראה. בוא נלך על אוליבס, זיתים. איזה עוד תוספות אנחנו רוצים?
טומטוס וצ'יז אוקיי בוא ניקח את הגבינה הזאת יפה תראו הלכתי פה על פשטות בדיזיין הייתי יכול ללכת פה על דיזיין פאטרנס יותר מוצלחים לגבי האפשרות להבריג פנימה תוספות אבל בואו נעצור כאן נכון אנחנו רוצים שזה יהיה דוגמאות טובות וכיפיות ובאמת כל פעם ללמוד משהו בהדרגה אז הנה יש לי פה כל מיני תמונות עכשיו בואו נשים פה את התמונות של
הפיצה בבחירת סוג הפיצה אז אנחנו נלך ל-object explorer, נגרור בטונים פנימה. חיפשתי פשוט בחיפוש, אתם יודעים, נכון?
דיברנו על זה הרבה פעמים, כאן בחיפוש מסונן לי, אז אני פשוט דואג שיהיה כתוב בטון, מהפעם הקודמת עם ה-bar-bottom. אוקיי, הנה בטון אחד, בואו נסדר לו פה את התמונה, הולכים ל-attributes inspector ובוחרים את אחת התמונות שכרגע שמנו, יש לי את פיצה, פיצה 1 ופיצה 2. יפה, 1. בואו
נשכפל את זה פשוט, קופי פייסט ופעם נוספת פייסט יפה עכשיו זה את הפיצה הראשונה הנה השנייה אני רק מחליף פה את התמונה ברשותכם אנחנו ניקח עכשיו פיצה אחד והן קצת שונות בגודל שלהן אז זה גם נראה נחמד בממשק משתמש ובוא נראה את פיצה 2 קול אז הנה יש לי פה שלוש פיצות מה שאנחנו צריכים אבל לעשות זה לתת פה טיפה אילוצים מה שאני אעשה אתם רואים שיש פה איזשהו
בעיה עם הרוחב של התמונות אז אני פשוט אגדיר שהרוחב של התמונות הוא 100 בנוסף אני אמרכז את התמונות באמצע ונגיד שיש ביניהם מרחק אנכי של 16 פיקסלים כל אחת. בוא נתחיל למשל ברוחב אנחנו נגדיר אותו להיות 100 ולגבי מרחק אנכי אז בוא נאמר 16 כל אחד לוקח מלמעלה 16 זה מלמעלה 16 זה.
סימנתי את שלושת התמונות ואני נותן פה עכשיו את כל האילוצים ביחד. דבר אחרון אנחנו רוצים לעשות אליי נופקי בקונטיינר, יפה, אחת התמונות פה עלתה על השנייה אז בואו אני אעשה את האילוצים עוד פעם נגיע למצב כמו קודם כן כדי לעשות את האילוצים שרציתי שניונת עד כאן הכל היה טוב כדי לעשות את האילוצים שרציתי אני צריך באמת שיהיה ביניהם קצת מרווח קצת מקום
ואז האילוצים שרציתי יעבדו בסדר אנחנו באמת כמו שאמרתי רוצה 16 מלמעלה כל פקד רוצה 16 מלמעלה בדיוק בדיוק האילוצים שעשינו קודם אבל לפני כן אני קצת מסדר אותם פחות או יותר איך שאני רוצה שהם ייראו באמת.
אז עוד פעם נוסיף את האילוצים, אומר 16 מלמעלה, אנחנו בוחרים רוחב של 100. עכשיו התמונות לא עולות אחת על השנייה בגלל ש-Xcode מבינה יותר טוב את האילוצים שרציתי להוסיף מלכתחילה, וב-Alignment Constraint אנחנו פשוט רוצים איזון אופקי הוריזונטלי עם קונטיינר, סנטר עם קונטיינר. יפה, אוקיי, פיקס, הנה כל התמונות של הפיצה טייפס.
עכשיו בואו נעשה בדיוק בדיוק את אותו טריק לגבי הטופינגס, אז אני מזמין אתכם לעצור בסרטון ולעשות בעצמכם. אנחנו תכף ניפגש, אני כבר מוסיף אותם פה אצלי.
יאללה, אחד, אני אשנה לו את התמונה כמו קודם, נגיד שזה יהיה צ'יז, תוספת לוינה, נגרור קצת ונדביק, עכשיו נעשה ביניהם מרחק כבר כמו קודם, יפה, ארבע סוגי תוספות, קול.
ואחד אחרון, בוא נראה, יפה. עכשיו אני אשמח את כולם, יש ביניהם מספיק מרחק, אז xcode תקלוט מה רציתי. אני אגיד שאנחנו רוצים מרחק אנכי של 16 בין כל אחד לאחד.
בנוסף, אני רוצה שלכל אחת מהתוספות יהיה רוחב סטנדרטי של 100. דרך אגב, התמונות שלקחתי ברוחב של 100, ולכן המספר פה של האילוץ בסדר?
אוקיי. וחוץ מזה שהם צריכים 100 רוחב ו-16 מלמעלה, חסר לנו איפה הם רוצים להיות בציר x, אז בציר X אנחנו רוצים כמובן למרכז אותם כמו בפעם הקודמת.
יפה, הנה כל הדברים האלה מסודרים, יפה. והאחרון שאנחנו כמובן רוצים זה שיהיה לנו ארבע תוספות, אז הנה אוליב אחד, בוא נעשה פה את הלבניות למעלה ואנחנו פה רוצים את התוספת האחרונה הלוא היא הבצל.
יפה, הנה התוספות, קול. מה עוד? מה עוד אנחנו רוצים? כאן אנחנו רוצים להציג איזשהו סיכומונצ'יק, אז אנחנו יכולים אולי לעשות בצורה מעניינת את התוספות.
למשל, אנחנו יכולים לעשות פה איזשהו Label ו-Stack של תמונות. אוקיי, זה יהיה מעניין, כי אנחנו למדנו לעשות פקדים בצורה דינמית, אז אנחנו נשתדל להסתכל על זה.
אז רגע, דבר ראשון אמרנו Label, שיסביר מה אנחנו רואים, אחר כך יהיה לי Stack ריק, אז בואו נוסיף Stack ריק, Stack אופקי, יהיה לנו מספיק מקום, עוד Label ועוד Stack, בסדר?
אחד בשביל הסוג פיצה הנבחר ואחד בשביל התוספות הנבחרות. דרך אגב בראשון באמת זה רק פיצה אחת אז אין פה צורך בסטאק אפשר ללכת פה פשוט על אימאנג' שיכיל את הפיצה כבר ואז העיצוב שלנו יצא פיקס.
אני אעשה את זה, נשים פה אימאנג'. סתם נבחר בשביל לראות בעין הכי טוב לראות בזמן דיזיין משהו שכבר ככה אתם יודעים איך ייראה וככה אתם מביאים את העיצוב שלכם לרמה גבוהה יותר של דברים שרואים משם לא רואים מכאן.
נניח אנחנו פשוט נעשה פה כאילו מוק של התוצאה ואחר כך נסדר שזה גם יעבוד ב-runtime יפה אז קודם כל בפיצה נניח שבחרו פה פיצה מספר 1 אז ביג אתם צריכים לתת שמות לפיצות פה בעצמכם והנבחר פה נניח באחת התמונות יפה בוא נעשה כאן יש לי לייבל אז פה אנחנו נגיד כאילו אלה הטופינס שלכם אז נכתוב טופינס
ומתחת לזה יש לי פה את הסטאק בוא נדחף פנימה איזה שתי תוספות או שלוש או ארבע אפילו רק בשביל ככה לראות איך זה ייראה ברגע שבאמת היוזר שלנו יבחר תוספות אז נגיד שהוא בחר צ'יז אוקיי איזה מגניב אנחנו רוצים לבדוק מה יקרה אם יהיה לנו הרבה תוספות אז מה שאני אעשה אני עומד פה על התמונה בתוך הסטאק view ואני מעתיק ומדביק מעתיק ומדביק קופי ופייסט יפה כדי לראות מה קורה אם יש לי ארבע ואפילו
ניקח את הדמיון שלנו לעוד צעד אחד קדימה אני פשוט משנה פה את התמונה בכל אחד מהם סתם מוק של לבדוק איך זה נראה וככה אנחנו נוכל לשתף עם החברים שלנו זה מה שזה אמור לעשות האפליקציה עוד לא סיימתי אבל הנה מה שיש לי עד כה אוקיי מגניב אז אלה הטופינקס שהיוזר בחר כן Selected Topics, קול מה שכן אין פה יותר מדי אילוצים אבל צריך
לעשות אותם כי אחרת אתם יודעים, זה לא ייראה טוב, זה לא אפליקציה, אז אני פשוט עומד על הלייבל הראשון, ואני רוצה לשים אותו 16 מלמעלה, 16 משמאל, אוקיי?
מה לגבי התמונה? אני רוצה שהיא פשוט תהיה, האמת, במרכז, אופקי, ואני רוצה שהיא תהיה מתחת לשכן שלה.
אז מתחת לשכן שלה זה הלייבל, הוא לא מאפשר לי את זה פה באילוצים פשוטים, אז מה שאני עושה, אני גורר חצי לזה, ואומר ורטיקל ספייסינג.
יפה, רואים? יש פה אילוץ קטנצ'יק שאומר אני מתחתם, רואים? וזה יוצא 16 וחצי, אנחנו רוצים להיות מדויקים, אז אני רוצה פה 16, יפה. מה לגבי, זה מאולץ, נכון? יש לו אילוץ אופקי, מרכוז אופקי, ומתחת לדבר הזה ב-16.
עכשיו, מה לגבי הלייבל הזה? הוא עדיין לא מאולץ, אז אפשר לעשות את אותם טריקים, אני רוצה שהוא יהיה מתחת לשכן שלו, בוא נראה מתחת למי הוא, הוא יהיה מתחת לפיצה, מגניב, יפה, אני רוצה שהוא יהיה מתחת לפיצה ב32 ומשמאל אני רוצה שהוא יהיה 16
אוקיי קצת מרחק מהפיצה ו16 משמאל כמו שצריך אחרון חביב זה הסטאק ויו הזה ובסטאק ויו בואו נעשה ככה חוכמה בדיסטריביושן אנחנו רוצים פיל איקואלי שהחבר'ה האלה יחלקו ביניהם את המקום באופן שווה ומה שאני רוצה מהסטאק ויו זה שיהיה 16 משמאל 32 מלמעלה שיקח קצת שטח מרחק
ומהצד אני גם כן רוצה 16. בוא נראה מה יוצא, מעולה, יפה מאוד. אז הנה לנו כל האילוצים, תראו איזה יופי, האפליקציה הזאת כבר ככה קרמה פה עור וגידים. כאן אני ארצה ללחוץ על פיצה ולבחור, ללחוץ על פיצה ולבחור, נכון?
עכשיו לגבי הסוגיית השפון, בגלל שאתם רוצים פה לאפשר מולטי צ'וייס, אנחנו נצטרך איזשהו כפתור נוסף שיגיד go, וזה יהיה ה-checkout, כאן אני לא רוצה שילכו מפה בסדר אנחנו רוצים למחוק מפה את הכפתור טופינקס ככה לא יהיה אותו ואיך נעבור אם כן בואו נעשה ככה שלוחצים על פיצה זה אוטומטית עובר בסדר אני יכול פשוט
לעשות שלוש סגווי ולהגיד מפה show segway מפה גם show segway שלוש segway וגם מפה עוד פעם show segway לכל segway אפשר לתת identifier ואז יהיה לי if else על ה-segway.identifier זאת אופציה אחת, וזה בסדר, אפשר לבצע את זה.
ב-pay for segway אני בודק מה ה-segway.id ואז אני יודע מה להעביר, אוקיי? אופציה אחרת היא לבצע את ה-segway מהקוד, ואתם יודעים מה? את האופציה השנייה אני אעשה פה בדוגמה הזאת כדי להראות לכם כמה וריאציות.
זה לא שאני ממליץ פה, אם הייתי בוחר, אני חושב שגם הייתי עושה segway אחד ומבצע אותו מהקוד, אבל אני מראה לכם כמה טריקים בתכנון לא זמנית, אז ככה, בסוף אתם תבחרו לעצמכם.
את הארכיטקטורה כאן עשיתי פשוט שלוש סגוויים אם ככה אני פשוט אתן להם איי די אני אקרא לזה p1 לסגווי השני נקרא לו p2 ולסגווי השלישי נקרא p3 אוקיי אני באמת לא מעדיף את הגישה הזאת אני מעדיף את הגישה כמו שאני מראה פה בצד הזה בצד הזה אנחנו רוצים ככה לבצע את הסגווי בוא נעשה ביצוע סגווי בצורה ידנית בסדר אני אוריד מפה את הכפתור check out
אני אגיד שהוא יבחר פה את התוספות ואז יעשה check out אני אוסיף פה כפתור כדי להראות לכם פשוט עוד דברים, את הכפתור אתם כבר מכירים, יודעים לעבור, נהדר, אותו prepare for segue by the way, אוקיי, אז רגע, אז בואו נעשה כאן כפתור, כאן סיימנו לבחור בתוספות, done with toppings, או proceed to check out, בואו נכתוב,
proceed to check out, זה הכפתור שלנו, יפה, מה לגבי אילוצים, אני אצמיד אותו לפינה התחתונה פה לחלק התחתון, אין לו פה איזה 32 ו-16 מהצדדים בסדר אז משתי הצדדים אז ככה הוא יהיה ממורכז בצורה הזאת