עיצוב והכרות עם פקדים נפוצים - חלק 1

תמלול ההרצאה: עיצוב והכרות עם פקדים נפוצים - חלק 1

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

1. 00:02

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

2. 00:34

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

3. 00:49

   כאן יש לנו טקסט שהוא בר עריכה וכאן יש לנו את ה-Label שהוא פשוט טקסט שהמשתמש רואה ולא עורך אותו. בנוסף אנחנו רואים פה למטה כפתור כמו שניחשתם וכל הרקע הזה שמסביב זה רקע של תמונה.

4. 01:02

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

5. 01:34

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

6. 01:48

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

7. 02:03

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

8. 02:13

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

9. 02:43

   אני אבחר איזושהי תמונה בשביל הדוגמה ובתמונה הזאת אני בהחלט יכול ככה להשתמש, אני אוריד את התמונה הזאת לתיקייה שלי ואני אקרא לתמונה הזאת נניח back, אז איך אנחנו משתמשים בתמונה?

10. 03:11

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

11. 03:26

    עכשיו נחזור לסטורי בורק, אם אתם זוכרים קודם אז דיברנו על סוגי פקדים שונים דיברנו על זה שיש פקד מסוג Label שמציג טקסט פקד מסוג Button שהוא כפתור פקד מסוג TextField שמאפשר לערוך טקסט Editable טקסט ואיפשהו פה בהמשך במורד הרשימה יש גם אימג' ויו דרך אחרת היא לסנן ולחפש את הפקד מסוג אימג' ויו

12. 03:52

    ואז אני אשאר פה רק איתו אני אגרור לעצמי אימג' ויו מיקמתי אותו איפשהו ואני אבחר פה באטריביוט אינספקטור באטריביוט של האימג' בצורה הבאה בחרתי פשוט ב-B איזה אילוצים נרצה לבחור כאן?

13. 04:10

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

14. 04:41

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

15. 05:06

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

16. 05:17

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

17. 05:35

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

18. 05:59

    Resolve Auto Layout Issues, אני אלחץ עליו ואבטר על האילוצים על ידי Clear Constraints. ביטלתי את כל האילוצים הקודמים ועכשיו אני אוסיף את כל האילוצים שלי שוב פעם, בצורה הבאה אני אשנה פה על ידי הלחיצה על המשולש, אני לא רוצה את האילוץ ביחס לאזור הבטוח אלא ביחס למסך עצמו,