UISlider And How to change fonts in a UILabel
פרקי ההרצאה: UISlider And How to change fonts in a UILabel
תמלול ההרצאה: UISlider And How to change fonts in a UILabel
הטקסט המלא של הדקות הראשונות בהרצאה «UISlider And How to change fonts in a UILabel» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום וברוכים הבאים. היום אנחנו רוצים לראות דוגמה סופר פשוטה לגבי פקד בשם UI Slider. UI Slider זה הפקד שאתם רואים לפניכם, שמו כאילו אנחנו עושים לו בעצם סלייד והוא משנה את הערך שלו.
ואנחנו שוב פעם רוצים לדבר על Outlets ועל Actions כתרגול למעשה לחלק הקודם. אז בואו נצפות פנימה לתוך השיעור. אנחנו נפתח את Xcode וב-Xcode אנחנו רוצים לייצר לעצמנו אפליקציה חדשה עבור השיעור.
אז אני מייצר פייל ניו פרוג'קט סינגל ווי אפליקיישן כמובן ובואו נקרא להרצאה שלנו נניח סליידר דמו אוקיי דמו אנחנו כמובן משאירים את כל האופציות כפי שעשינו בשיעורים הקודמים אנחנו מייצרים את זה בתיקייה שלנו וכן הלאה ובואו ננסה קודם כל לשחזר פה את ה-UI אז יש לי פה סליידר
והדבר הזה הוא לייבל וכמו שאתם מבינים יש לי את התגובה למעשה לסליידר משנה פה את הערך של הלייבל אז בוא נראה איך עושים את זה אני אלך לobject library ודבר ראשון שאני אחפש זה סליידר אנחנו מוצאים אותו בקלות שזה נהדר בוא נשים אותו נניח כאן ומתחת לסליידר אני ארצה להוסיף לייבל אז שוב פעם לobject library ובחיפוש בואו נרשום לייבל ואולי אני אמרכז פה את הלייבל כדי שיהיה קצת יותר
מקום ואני אשים את זה נניח כאן זאת לא הדוגמא הכי מסובכת ובכוונה אני בוחר כאן בדוגמאות פשוטות. שלושת התרגילים הראשונים שלנו הם התרגילים הכי פשוטים כדי ללמוד קצת על סליידרים, קצת על הפקדים, על לייבל, על טקסט פילדים וכדומה ועל פונטים וסטרינגים בסוויפט כדי שנוכל אחר כך לצעוד קדימה.
אז אנחנו נוסיף פה קצת אילוצים ונתקדם לכל. לגבי אילוצים חברים, אנחנו פשוט רוצים למתוח את הפקד שלנו לכל הכיוונים, בוא נאמר עם שוליים של 32 מלמעלה וגם מהצדדים והסליידר שלי אמור להימתח ולעשות את מה שרצינו אם אני אוסיף את שלושת האילוצים.
עכשיו לגבי הלייבל הייתי מעוניין במרכוז אופקי אז אני הולך למרכוז alignment constraint ואנחנו נוסיף גם אופקי וגם אנכי כדי שהוא יהיה בדיוק בדיוק באמצע.
יפה? עכשיו הסליידר בוא נלמד עליו טיפה כדי ללמוד על פקדים כדאי מאוד ללכת לאטריביוט אינספקטור חברנו שכבר ולהסתכל כאן על התכונות. אז אנחנו רואים את הערך הנוכחי של חצי, הערך המינימלי של 0 והערך המקסימלי של 1. כמובן
שאת הדבר הזה אנחנו יכולים בהחלט לשנות ואם אני אסתכל על ערכים הגיוניים לפונטים אז הייתי רוצה שזה ינוע מ-0 עד בוא נאמר 50 או 60, בוא נאמר עד 60 אפילו ואנחנו רוצים שהוואליו הנוכחי יהיה איפשהו באמצע, בוא נגיד שהוואליו הנוכחי יהיה 30 והמינימום יהיה 0 אוקיי עכשיו כעיקרון אפשר גם להגדיר כאן תמונות עבור הצבע במקום ככה להשתמש בטראקים הרגילים אבל אנחנו נעזוב את
זה בינתיים לטעתה ונתרכז באאוטלטים ובאקשנס אז הנה יש לי פה את הסליידר ופה למטה וקבענו עבור הסליידר רק את התכונות של וואליו מינימום ומקסימום עכשיו פה למטה יש לנו את הלייבל אנחנו נרצה לשים פה איזשהו פונט עם גודל של 30 כדי שהוא ישקף את מה שיש ב-UI כרגע אז קודם כל נשנה את הגודל ודבר שני אני יכול אולי להחליף
את הפונט כדי שיראה קצת יותר נחמד בכל זאת בעין אז בוא נראה בוא ניקח נניח בוא ניקח את הפונט הזה שהוא נראה מעניין ושוב פעם כמו שאמרתי אנחנו רוצים שהוא ישקף אז הסייז הוא יהיה 30 ואני אכתוב בפונט סליחה אני אכתוב בלייבל את השם של הפונט איזה פינו הזה, אני אעתיק את זה שיהיה לי עם גודל של 30.0
האמת היא שאין לנו מקום לכתוב שזה פינו אז אני פשוט אכתוב 30.0 שזה ככה גודל של 30, בואו נראה איך זה ייראה בגודל של 60 זה יכול להיות שיהיה קצת גדול מדי, בואו נראה, לא, בסדר, נכון, עדיין נראה נחמד אז אנחנו נחזיר את זה חזרה, יפה, מצוין, אז הנה העיצוב שלנו ובזה סגרנו עכשיו, אתם זוכרים מהשיעור הקודם איך אנחנו
מקשרים בין הדברים האלה לבין הקוד, נכון? בין מה שיש לי ב-view controller שבסטורי בורד, שזה הסטורי בורד, זה הקובץ הזה, לבין הקבצים שיש לי בקוד, זה הקובץ התכנות שלי למעשה, ה-view controller, איך אני מקשר אליו?
אנחנו פותחים את החישוקיים ואנחנו נפנה קצת מקום בצדדים, כרגיל. עכשיו יש לי מסך מול מסך ואני יכול לגרור את הפקדים שלי בשמחה.
למשל את הסליידר אני יכול לגרור לרמת המחלקה מה אנחנו רוצים מהסליידר האם אנחנו רוצים ארטלט או אקשן האמת שאנחנו רוצים את שניהם אני תכף אראה למה אז אני ארצה גם פרופרטי של הסליידר אני אקרא לו סליידר או קונט סייז נגיד אני אקרא לו סליידר אבל גם אני רוצה לדעת מתי יזיזו את הסליידר עכשיו אם אנחנו רוצים לדעת מתי יזיזו את הסליידר אז אנחנו נרצה לגרור ולשנות לאקשן נכון זאת
תהיה פעולה פעולה פונקציה ובתא של מה שאני מקבל אני לא רוצה לקבל כל אובייקט אלא אני רוצה לקבל את הסליידר שם הפעולה יהיה נניח סליידר צ'יינג'ד אוקיי זה בעצם האירוע פה נקרא value change נקרא לפעולה שלי סליידר צ'יינג'ד דבר אחרון איזה עוד תכונה אני רוצה אני רוצה בעצם שכשמשנים את הסליידר שהסליידר ככה זז משתנה
ישתנה גם הערך של הלייבל בסדר ישתנה פה הטקסט שכתוב בלייבל וגם מהגודל של הפולט אז מה אנחנו נעשה נגרור אאוטלט גם ללייבל ובוא נקרא לו לייבל לסיכום כשיש לי view controller בסטורי בורד אנחנו גוררים אאוטלטים ואנחנו גוררים אקשנים בהתאם לאיזה אירועים איזה איבנטים אנחנו רוצים לשמוע מהם למעשה
האיבנטים שלי יכולים להיות value change עבור סליידר value change עבור טקסט פילד יכול להיות אירוע של תאפט נכון אירוע של לחיצה אז קוראים לזה תאצ'אפ אינסייד וכן הלאה וכן הלאה יש עוד הרבה דברים שזזים והיוזר לוחץ עליהם ואנחנו נרצה לדעת יפה אז כל מה שיש לי בווי קונטרולר אני רוצה לגרור אליו בדרך כלל אאוטלטים כדי שתהיה לי שליטה
עליו גם מהקוד האם זה נסתר האם זה גלוי וכן הלאה ובסופו של דבר גם פעולות כמו שעשינו בשיעור הקודם אז כאן אנחנו נכתוב לעצמנו אקשנס כאן אנחנו נכתוב איזשהו קוד תמיד מגיב לאבנט נכון אז in response to the event יופי כרגיל אלה הפרופרטיס כלומר משתנים או תכונות והפרופרטיס של כל view controller טוב יהיה
הפקדים שמוצגים בו מצוין בסופו של דבר אנחנו רוצים לחזור ל-view controller שלנו ולסגור את האסיסטנט אדיטור שמראה לי סייד ביי סייד שתי מסכים אז אני חוזר מהאסיסטנט אדיטור בלחיצה פה על הכפתור הזה של הרגולרי אדיטור או הסטנדרט אדיטור וכל מה שנשאר לי לעשות זה טיפת תכנות.
label.txt אני יודע, יש תכונה כזאת, דיברנו עליה. עכשיו, מה הוא יהיה שווה? לסליידר נקודה, אתם מוזמנים לעצור כמובן ולחפש, ראינו את זה איפשהו ב-UI, אז אתם בטח ככה ניחשתם, התשובה היא value.
בסדר? עכשיו, הבעיה שהvalue הוא כ-float, ואז יש פה איזושהי בעיה שאי אפשר לשים float כסטרינג, נכון? אי אפשר לעשות השמה כזאת. אז מה עושים?
נכון. פשוט נשתמש פה בסטרינג אינטרפוליישן למשל כדי להפוך את זה להיות סטרינג בחזרה ככה יש לנו על זה שליטה טובה ויפה בוא נראה