UIButtons - Memory Game
פרקי ההרצאה: UIButtons - Memory Game
תמלול ההרצאה: UIButtons - Memory Game
הטקסט המלא של הדקות הראשונות בהרצאה «UIButtons - Memory Game» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
האפליקציה הבאה שלנו היא בעצם משחק הזיכרון אנחנו נרצה להציג שש קלפים וכשהופכים את אחד הקלפים לבדוק האם הקלף השני מתאים ואם כן אז הצלחנו אתם מכירים את משחק הזיכרון אני לא צריך להסביר יותר מדי איך הוא עובד לפחות איך משחקים את המשחק אני כן אסביר לכם איך לתכנת את המשחק שזה יהיה החלק המעניין לצורך העניין אנחנו נרצה להוריד תמונות עבור הקלפים ומה שאנחנו יכולים לעשות אנחנו יכולים לחפש
בגוגל קלפי משחק בסדר עכשיו, מה שאני חיפשתי, אני חיפשתי קארד עם הג'ס וחיפשתי, האמת היא בגיטאפ וככה נפלתי על התוצאה הראשונה בגוגל שזה הדבר הזה. יש פה פשוט קלפי משחק, פליינג קארדס, והם אפילו מתאימים ככה לטענות המחברים ל-iOS, באדיבות גוגל קוד, הקלפים האלה הם נחלת הכלל מה שנקרא, וכל מה שאני צריך לעשות זה להוריד פה בכפתור
את הזיק פייל וזה מה שאנחנו נעשה. לחצתי ירד לי הזיפ מעולה עכשיו בואו נלך לייצר לעצמנו פרויקט באקסקוד אז אני אעשה פייל בניו פרוג'קט אנחנו כרגיל נרצה ללכת על סינגל וי אפליקיישן הפרויקט שלי יקרא ממורי גיים אני אשים את הפרויקט בתיקייה הרגילה שלי עכשיו בואו נחשוב ביחד איך להביא את התמונות בעיקרון יש פה את תיקיית האסץ ואז אני יכול ללכת להורדות
שלי מהדפתפן ולהביא את התמונות נניח אחת אחת רואים png יש לי פה את התיקייה הזאת יש פה הרבה תמונות אני יכול להעביר אותן אחת אחת ולגרור אותן לאסטס, אוקיי?
והאמת היא שזה דבר לא רע לעשותו בגלל שאסטס הם אופטימייזד וזה אחלה ספרייה לשים בתמונות יום אחד נדבר על זה אבל כרגע מה שאני ארצה לעשות כדי להקל על עצמי אני פשוט אגרור את כל תיקיית png ואני אשים אותה בפרויקט בסדר copy items if needed אני חייב לסמן פה וכמובן אני רוצה שהוא יצרף לי את זה לבנייה של הפרויקט וכן הלאה אז תשימו לב שכל הסטינגס האלה
קופי אייטם ספנידד מסומן, קריאייט גרופס וגם אד טו טארגטס מסומן. אני אלחץ על פיניש והנה עכשיו יש לי מלא תמונות בפרויקט.
השאלה היחידה היא איך אני מגיע אליהן. אם אנחנו רוצים להגיע אליהן מהסטורי בורד אז זה די פשוט בואו נבדוק. אז פשוט בסטורי בורד אני רוצה לגרור לכאן לא אימג' ביותר אלא בטון שזה הנושא של השיעור ואני אשים לכאן UI בטון ואם אני יוצא אני פשוט הולך לתכונות של הפקד ואנחנו יכולים לראות שבבקגראונד אפשר לשים
תמונה וגם באימג' אפשר לשים תמונה. בואו נלך נניח על אימג' ואני אשים פה את הקלף הזה כמו שאתם רואים. יפה, אז קל להגיע לתמונות, לא בעיה גדולה.
מצוין. אנחנו נראה יותר מאוחר איך אני מגיע לתמונות גם מהקוד. כרגע מה שאני מזמין אתכם לעשות, אני אעצור פה את הסרטון ואני רוצה שתעצבו את המסך כדי שיראה כמו משחק הזיכרון.
תסתכלו על האסטים שלנו אז ככה תוכלו לראות שדאגנו לעצמנו לכל מיני תמונות של קלפים אבל לא רק לתמונות של קלפים אלא גם יש לי פה איזושהי תמונה עבור בייגראונד של קלאפ ובה נשתמש בסדר בשביל הבייגראונד של הקלאפ אז לא יצא לנו אדום יצא לנו כמו כאן אבל אתם גם מוזמנים להוריד בייגראונד אחר בסדר אני עוצר פה את הסרטון אתם צריכים לעשות את זה בעצמכם ניפגש בעוד מספר דקות אחרי שתסיימו
טוב אז בואו נציג פתרון נפלץ רגע לאקסקוד, נחזור על התהליך. הנושא של השיעור שלנו היום הוא בטונים, אז אנחנו משתמשים בבטון כדי להשיג את המטרה, אף על פי שזה נשמע הגיוני גם לעשות את זה עם פקדים אחרים.
הבטון שלי, אני אשים בו את התמונה של הקלף כדי ככה לראות הכל בעיניים כמו שצריך, אני אקטין את זה מעט כדי שזה גם ייכנס לי לנוסח, ואנחנו יכולים ללכת פה או על אילוצים או על להכניס את כל שתיים כאלה ל-Stack view of key. מה שעשיתי זה פשוט copy-paste, קופי ופייסט, עתק אדבק, קומנד c,
קומנד v ועכשיו שיש לי שניים כאלה ביד מה שאנחנו נעשה זה להכניס אותם לסטאק אז אני לוחץ פה על הכפתור ואנחנו נעשה סטאק view נכון? איפה סטאק?
הנה מצוין. אז הנה יש לי שני קלפים והם בתוך סטאק view זה כמובן קצת יותר מדי גדול מכפי שאני רוצה אז אני אוסיף עכשיו אילוצים. רק לפני האילוצים בואו ניקח את זה נשכפל יהיה לנו שתי סטאקים אני אשים אותו קצת יותר למטה אז יש לי סטאק מתחת לסטאק, עכשיו אנחנו, מה שאנחנו באמת רוצים לעשות זה לקחת את שתי הסטאקים האלה,
לסמן אותם יחד ולהכניס אותם לסטאק אנכי, אז הנה יש לי סטאק אנכי ובתוכו יש שתי סטאקים, זה דומה לטבלה, נכון? יש לנו בעצם שורות ובכל שורה יש לנו עמודות, אוקיי?
את הסטאק האנכי הזה, לפני כן, שתי הסטאקים הפנימיים, אנחנו רוצים שיהיה להם Distribution של Feel Equally, שיחלקו ביניהם את המקום באופן שווה, וככה גם על הסטאק הזה בדיסטריבישן שלו נעשה פיל איקואלי שהכל יהיה מוגדר בצורה טובה.
כל מה שנשאר לי עכשיו לעשות זה להוסיף אילוצים לסטאק החיצוני. אני פשוט אגיד שהסטאק החיצוני הוא צמוד לכל ארבעת הפינות של המסך שלנו עם שוליים של שמונה.
יפה, עכשיו יש לי כבר התחלה מצוינת למשחק הזיכרון, רק אני רוצה עוד סטאק אחד אז אני אעתיק את הסטאק הזה, קופי, ואני אדביק אותו כאן בפנים רגע אמרתי כאן בפנים הנה מצוין עכשיו יש לי שלוש וזה מה שאני רוצה מצוין עכשיו יש לי בעצם את העיצוב שרציתי אולי אנחנו יכולים להוסיף מעט ספייסינג בכל מיני מקומות למרות
שכבר יש לי פה ספייסינג דיפולטי שיצא לי די טוב אז אני מרוצה יפה מאוד עכשיו מה שאנחנו נרצה לעשות בשלב הבא אנחנו נרצה להוציא אאוטלטים לפקדים שלנו אז בואו נוציא אאוטלטים אני פשוט אפתח את האסיסטנט אדיטור ואנחנו יכולים להתחיל להוציא אאוטלט אז אני אוציא אאוטלט לכפתור הראשון וכך הלאה רק תשימו לב אני יכול להוציא אאוטלט ואז יהיה
לי כל פעם קלף אחד או כפתור אחד ואני יכול להוציא מה שנקרא אאוטלט קולקשן ולשים את כל הקלפים שלי באותו אאוטלט קולקשן בסדר אז ככה up to you איך שאתם רוצים לנהל את זה אאוטלט קולקשן זה בעצם מערך של אאוטלטים כמו שאתם מערך של נגיד בטונים כמו שתכף תראו אני אקרא לדבר הזה ממורי קארטס או מם קארטס ממורי קארטס בסדר ובוא
נראה מה זה האוטלט קולקשן הזה זה פשוט מערך של בטונים שאותם את כולם אני מחבר עכשיו איך נחבר אנחנו פשוט נגרור את היתר לכאן אם אני אסתכל אני רואה ששניהם מחוברים וככה אני יכול לבוא ולגרור את כל הכפתורים שלי אחד אחרי השני כאוטלטים לאותה תכונה לאוטלט קולקשן אני רק אסכם בדיקה שכולם מחוברים
שזה מה שרציתי והנה יש לי שישה קלפים שכולם מחוברים כמו שצריך לאותו Outlet, ל-Outlet Collection אחד, יפה. אני רוצה להסתכל איתכם על עוד משהו מעניין, בואו נלך רגע ל-Storyboard ואם אתם תסתכלו נניח על הקלף הזה, על הכפתור הזה שאני כבר קורא לו קלף, אתם תוכלו לראות שיש פה תמונה וזה מה שאנחנו מצפים אבל מה שמעניין ב-UI Buttons ובעצם התרגיל
שלנו היום עושה בזה שימוש נרחב זה של eo buttons אפשר לשים כמה תמונות תמונה אחת למצב רגיל ותמונה אחרת נניח למצב לחוץ בואו נראה מה הכוונה וזה דרך אגב יוצר גם אנימציה זה נחמד בואו נראה מה הכוונה אתם יכולים לראות שיש לנו פה state config והstate הדפולטי זה מה שאנחנו רואים בדרך כלל
אבל מה קורה כשהדבר הזה הוא למשל highlighted אוקיי בואו נראה אז עבור highlighted בואו נבחר בתמונה אחרת אני סתם אשים פה רד ג'וקר אוקיי ואני אריץ אז זה המצב הרגיל וזה המצב היילייטד פשוט בלחיצה רואים איזה יופי אז אנחנו כבר ככה קיבלנו פה UI חיוני ומעניין בואו תעשו את זה על כל הקלפים כדי שתבינו טוב טוב על מה אני מדבר בסדר אני אעשה את זה גם כן על כל
הקלפים ככה כדי לראות אז אני פשוט עומד על קלף איך אנחנו עושים את זה זוכרים זה המצב הדפולטי אז זאת התמונה הדפולטית ועבור המצב ההיילייטד בואו נשים תמונה נוספת וככה הוצאתי ובחרתי את הג'וקר אפשר לשים פה את הבייגראונד של הקלף נכון עבור משחק הזיכרון אוקיי אז יש את המצב הדפולטי ויש עוד מצבים מסתבר ל-Ui בטונס יש
להם סטייטס ויש לנו סטייט רגיל וסטייט של איי לייטד שהם שתי מעניינים מאוד אני אלך ואשים פה פשוט נגיד את התמונה של הג'וקר בכל אחד אוקיי אז תעצרו את הסרטון תוודאו שהבנתם את הנקודה ותכף אנחנו ליתר בינתיים אני אעשה אצלי את מה שאתם אמורים לעשות גם כן אז על כל
השש קלפים שלי אני מסדר שבמצב ההיילייטד שלהם יהיה להם את התמונה של הג'וקר יפה בוא נראה לא משנה לאיזה קלף אני לוחץ כשאני לוחץ עליו אז יוצא פה ג'וקר איזה יופי עכשיו השאלה היחידה היא איך אנחנו בעצם יכולים לדעת על מה לחצו וגם מעבר ללדעת על מה לחצו הזה השאלה הנוספת היא בעצם איך אנחנו יכולים להשאיר
את הקלף לחוץ בסדר ואוקיי ומה אנחנו עוד צריכים לעשות בשביל זה בואו נתחיל בזה שנוסיף אקשנים לכל הכפתורים אז כמו שעשיתי outlet משותף קודם אז אני עכשיו יכול גם להוציא אקשן משותף ובואו נראה את זה אז אני פשוט מוציא אקשן הפעם הנה האקשן שלי
ובאקשן הזה אנחנו נקרא אנחנו רוצים שהטייב יהיה כמובן ua בטון ובואו נאמר הפעם card tapped או flipped בסדר? נגיד נלחצו על קלאפ.
את אותו אקשן הפעם אנחנו מחברים לכל הכפתורים בסדר? זה לא משהו שעשינו עד עכשיו אבל לא להיבהל זה דווקא נחמד יותר אז אני פשוט לוקח כפתור גורר אותו לאותו event handler לאותה אקשן אוקיי?
ואני יכול לראות שבאמת הם מחוברים אחר כך אם אני עומד על המטרה יפה בואו נלך לcard tapped אוקיי מצוין עוד אחד הולך לקארט טאפט יפה מאוד אחרון חביב הולך לקארט טאפט גם כן בוא נעשה פה פריל סטייטמנט ונראה שבאמת באמת הצלחנו להגיע לאן שרצינו אני תמיד בודק צעדים פשוטים
וברורים כדי שהכל יהיה ככה טסט דריבן אוקיי לוחץ טאפט לוחץ טאפט לוחץ יפה מאוד על כל אחד מהכפתורים תוודאו את זה כי בשלב הזה לדבק דברים הרבה יותר פשוט מאשר כשהמשחק הולך ומסתבך יפה אז אחרי שהבידינו שיש לנו טאפ על כל אחד מהכפתורים אנחנו רוצים ללמוד איך אפשר להחליף תמונה ל-UI בטון מהקוד מהוויו קונטרולר בסוויפט בואו נגיד
שב-view did load אנחנו רוצים לקרוא לפעולה שתהדחה לנו את המשחק בסדר אז אנחנו נרצה לכתוב פאנקשן שנקרא init game או restart game אני אקרא לזה init game את חול משחק ובפעולה הזאת אנחנו רוצים להחליף את כל התמונות לתמונת רקע כדי לעשות את זה אנחנו נצטרך לעשות לולה שרצה פה על כל הקלפים,
נכון? אז תכתבו לכם פה לולה. אני אכתוב את הלולה הבאה: עבור כל קלף מ-memory cards תעשה, נכון? אז יש לנו פה לולה שרצה על כל הקלפים, כל קלף הוא יהיה קארד, מצוין.
מה אנחנו רוצים לעשות עם הקלף הזה? רוצים להחליף לו את התמונה. אל תשכחו של-UI בטונים אין תמונה אחת, יש להם תמונה עבור כל מצב, ועל כן הפעולה שאנחנו נתבקש להשתמש בה, תהיה סט אימג' עבור מצב, סט אימג' פור סטייט.
בסדר? מצוין. מה תהיה התמונה שאנחנו נבחר? אנחנו רוצים תמונה עבור הרקע. תמונת בקגראונד נמצאת לנו בסטים, ב-png files שלנו.
יש פה תמונה ל-back של ה-car, נכון? ראינו אותה קודם. יפה, הנה היא נמצאת פה. אז איך נייצר Ui אימג'? אנחנו נעלה פה שורה אחת למעלה ונכתוב let image = Ui אימג' חדש מהתמונה בשם back.
אפשר גם back.png אם אתם רוצים אבל אין כוח כאן אנחנו נתפים את התמונה הזאת back שהיא back.png מתוך הסיטים שלנו וכמובן אנחנו רוצים את זה עבור המצב הנורמלי עבור המצב הדפולטי אז הנה לנו בואו נבדוק רק נקרא לפונקציה הזאת ונבדוק אם עכשיו כשאנחנו מתחילים את המשחק אנחנו לא מתחילים אותו במצב הזה עם העשיריות למעלה אלא אנחנו מתחילים כשכל הקלפים הראשוניים הם קלפי הבק
נקודה png אנחנו מריצים ובואו נראה קראנו לפעולה הזאת בview did load כן מצוין