תרגול עיצוב ופתרון - חלק 2

תמלול ההרצאה: תרגול עיצוב ופתרון - חלק 2

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

1. 00:02

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

2. 00:26

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

3. 00:52

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

4. 01:16

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

5. 01:50

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

6. 02:20

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

7. 02:39

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

8. 02:51

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

9. 03:13

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

10. 03:43

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

11. 04:10

    אנחנו נבחר על שוליים של 32 פיקסלים משני הכיוונים ואלה האילוצים שלי בציר x 32 32 ובציר y 811 הפקד שלנו מרוצה מה לגבי זה אנחנו נרצה שהוא יהיה מתחתיו נכון אז אני אשים אותו נניח כאן יש פה איזשהו מרחק מינימלי מומלץ אבל כמובן אני יכול להגדיל את המרחק הזה כמה שאני רוצה

12. 04:40

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

13. 04:59

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

14. 05:16

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

15. 05:29

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

16. 05:44

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

17. 05:54

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

18. 06:12

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

19. 06:22

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

20. 06:47

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

21. 07:09

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

22. 07:35

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