PracticU

מבוא ל-StackViews

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאייפון iPhone iOS - ב-Swift-Xcode › מבוא ל-StackViews
מילון מושגים:
לייאאוט - ארגון וסידור הרכיבים החזותיים על המסך או בדף, כמו מיקום כפתורים, טקסט ותמונות.
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.
מאפיין - תכונה שמצמידים לרכיב ומתארת אותו או את התנהגותו, למשל מאפיין של תגית HTML או שדה באובייקט.

מבוא ל-StackViews
ה-StackView הוא פקד שמכיל פקדים אחרים ומסדר אותם אחד ליד השני או אחד מעל השני, כך שאין צורך לתת לכל פקד אילוצים בנפרד. השיעור מציג מסך רג'יסטריישן שנבנה בעזרתו.
הצעדים העיקריים
1. הבעיה: מסך רג'יסטריישן עם ארבעה שדות טקסט דורש הרבה אילוצים. העתקה והדבקה של אותם אילוצים חוזרת על עצמה, וזה לא נוח לתחזוקה.
2. בחירה מרובה: מסמנים את הפקדים עם מקש Shift, ובעזרת Resolve Auto Layout Issues מבטלים רק את האילוצים שלהם.
3. Embed in Stack: הכפתור מכניס את הפקדים הנבחרים לתוך StackView, שמסדר אותם אחד מעל השני.
4. מיקום יחיד: במקום ארבעה אילוצים לכל שדה, נותנים אילוצים רק ל-StackView עצמו, למשל 16 מלמעלה ו-32 משני הצדדים.
5. ריווח: המאפיין Spacing בסטאק קובע את המרווח בין הפקדים, למשל 16 פיקסלים.
בסיום תדעו לארגן כמה פקדים בתוך StackView, ולמקם את הסטאק במקום אחד במסך.
השיעור הבא בקורס: הסבר על StackView Distribution

פרקי ההרצאה: מבוא ל-StackViews

  1. 00:00

    תרגול: מסך התחברות ומסך הרשמה

  2. 00:39

    מסך הרשמה עם שדות רבים

  3. 01:20

    מרכוז לייבל ההרשמה והגופן שלו

  4. 02:18

    אילוצים לשדות הטקסט במסך ההרשמה

  5. 03:09

    העתקה והדבקה של אילוצים: בעיית החזרה

  6. 04:39

    מבוא ל-StackView: פקדים אחד מעל השני

  7. 05:17

    בחירת כמה פקדים יחד וביטול אילוצים

תמלול ההרצאה: מבוא ל-StackViews

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

  1. 00:02

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

  2. 00:12

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

  3. 00:39

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

  4. 00:56

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

  5. 01:20

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

  6. 01:40

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

  7. 02:18

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

  8. 02:40

    מתכוון מה-registration-bottom. פנטסטי. עכשיו, מה שיש לי פה להוסיף זה את ה-placeholder, נכון? את זה אנחנו גם כן אמורים לזכור.

  9. 02:53

    אז במסך הזה אנחנו רוצים First Name, Last Name, E-Mail ו-Password, אוקיי, אז זה מתחיל להיראות נחמד, זה מתחיל להיראות ככה כמו שרצינו, אפשר היה להוסיף את ה-Background כמו שראינו בשיעור שעבר, אבל אני לא רוצה לחזור על עצמי.

  10. 03:12

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

  11. 03:28

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

  12. 03:54

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

  13. 04:23

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

  14. 04:50

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

  15. 05:17

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

  16. 05:31

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

  17. 05:55

    רק עבורם

לקורס המלא: קורס פיתוח אפליקציות לאייפון

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

ההרצאה הבאה: הסבר על StackView Distribution

קורסים נוספים במסלול

  • קורס יסודות התכנות - שפת JAVA - קורס ג'אווה למתחילים
  • קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA
  • קורס פלאטר - Flutter - שפת DART של גוגל למובייל - פיתוח אפליקציות לאנדרואיד ואייפון
  • קורס PhoneGap - פיתוח אפליקציות לאנדרואיד ואייפון