מבוא לעיצוב ב-Auto Layout ואילוצים בסיסיים - Simple Constraints

תמלול ההרצאה: מבוא לעיצוב ב-Auto Layout ואילוצים בסיסיים - Simple Constraints

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

1. 00:02

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

2. 00:30

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

3. 00:51

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

4. 01:02

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

5. 01:14

   אתם זוכרים את ה-object library שמופיע לי בצד ימין, אם אני נמצא בקובץ ה-storyboard. ב-object library אפשר לבצע חיפוש. איך מבצעים חיפוש? אתם רואים, יש לי פה איזושהי תיבת חיפוש, וכאן אני יכול או לגלול ולחפש את הפקדים, כמו שאתם רואים, או להתחיל להקליד, למשל אם אני מחפש בטון

6. 01:34

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

7. 01:56

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

8. 02:08

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

9. 02:22

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

10. 02:36

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

11. 02:49

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

12. 03:06

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

13. 03:16

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

14. 03:27

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

15. 03:47

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

16. 04:09

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

17. 04:19

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

18. 04:43

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

19. 04:54

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

20. 05:18

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