UISlider And UIColor

תמלול ההרצאה: UISlider And UIColor

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

1. 00:02

   שלום וברוכים הבאים אם אתם זוכרים באחד השיעורים נתתי לכם כתרגיל לעצב את האפליקציה הנוכחית והיום אנחנו נרצה לממש את האפליקציה הזאת עכשיו מה האפליקציה הזו אמורה לעשות האפליקציה הזו צריכה לשקף לנו את סולם rgb בצבעים כשסולם rgb זה סולם כזה שבו הערכים של הצבעים rgb red green וblue

2. 00:26

   נעים בין 0 ל-255 ומייצרים צבע בואו נסתכל קודם כל על הסקאלה הזאת לפני שאנחנו נכנסים לתכנות אז אני פשוט אחפש rgb scale בגוגל כדי ככה לראות את הסקאלה ולהתרשם ממנה ביחד אני אסתכל כאן נניח ב-wtriscals שזה אתר one ואנחנו יכולים לראות שיש פה איזשהו סליידר בין 0 ל-255 שאם מזיזים אותו אז משתנה הצבע

3. 00:56

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

4. 01:34

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

5. 01:58

   אחרי שבניתם את זה בעצמכם בואו נפתור את זה ביחד אז אני מייצר לעצמי פרויקט חדש ואנחנו נקרא לפרויקט שלנו מסינגל view מסוג של סינגל viewR ואנחנו כמובן נקרא לפרויקט שלנו Color Sliders, אנחנו בוחרים בכל ה-Defaults הרגילים, ובואו נלך לצבע. יפה, אז ב-Storyboard אני עומד פשוט על הפקד הראשי

6. 02:30

   שלי, על ה-View הראשי, ומה שאנחנו נרצה לעשות כאן, אנחנו פשוט נרצה לשנות לו את ה-Color של ה-Background, אני אבחר פה איזשהו צבע, בואו נאמר, אני אלך על הצבע הזה.

7. 02:42

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

8. 02:51

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

9. 03:16

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

10. 03:47

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

11. 04:13

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

12. 04:35

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

13. 05:03

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

14. 05:20

    מתוך 255, נכון? וככה בעצם אנחנו יכולים לייצר לעצמנו את ה-Stack View הראשון. עכשיו אנחנו נרצה לעשות את זה פעמיים נוספות עבור הצבעים הנוספים.

15. 05:34

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

16. 06:15

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

17. 06:35

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

18. 07:07

    לצדדים 32 סליחה 32 רק מהצדדים ולגבי המיקום בציר y אנחנו פשוט נמרכז אותו על ידי ה-alignment constraint אני ממרכז אותו ב-vertical in container כשאני לוחץ על ה-add alignment constraint ועכשיו הפקד שלי יודע מה אני רוצה ממנו.

19. 07:28

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

20. 07:56

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

21. 08:26

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

22. 09:03

    תשנו שמות גם אם תהייתם בשם לא לשנות שם בלי ריפקטורי ניים אוקיי הבלו טקסט פיד עכשיו בוא נראה אם לא שכחנו אף אחד 1,2,3,4,5,6 יפה אז אני מרוצה יופי יש לנו אני אסדר אותם לפי טייפים פשוט ולא לפי קונטנט אז אני אעשה ככה יש לי rgb בסליידרים ויש לי rgb גם מסודר יהיה לנו בטקסט פילדס ועכשיו אנחנו מרוצים

23. 09:45

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

24. 10:23

    פה any אז הנה האקשן הראשון בואו נוסיף אקשן גם ליתר אז Red Changed בואו נקרא לזה Green Changed ו-Blue Changed אוקיי Blue Changed עכשיו אני מקליט פה Enter ומה שאני אעשה אני אשנה את הדבר הזה ל-Ui Slider עכשיו את הטייפ מותר לי לשנות מ-Any ל-Ui Slider אוקיי זה לא אומר שאם אתם תשנו פה עד עכשיו

25. 10:50

    את אחת הפונקציות תקראו לה Red Changed אחת זה יעבוד לכם להפך התוכנה תקרוס אם אתם רוצים לשנות שמות של פונקציות אז כמובן כמו שאמרנו command ולחיצה ו-rename אוקיי זאת הדרך היחידה לשנות שמות של פונקציות הטייפ של הפרמטר לעומת זאת אם היה לכם פואני ואתם רוצים לשנות ל-UI סליידר זה מותר לנו לעשות ואת זה פשוט ככה עשיתי אז יפה יש לי שלוש פעולות red chain green

26. 11:17

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

27. 11:42

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

28. 12:03

    כל מה שאני צריך לעשות עכשיו זה לשנות את ה-Red Text Field נקודה טקסט שישקף את זה בצורה מאוד מאוד פשוטה ונחמדה אנחנו נשתמש בסטרינג אינטרפוליישן וניקח את הסנדר נקודה Current Value שלו ואני מציג אותו כסטרינג אז הכל טוב בסדר עכשיו שימו לב שהסנדר זה UI סליידר אחרת הייתי יכול לקחת את הרד סליידר גם כן ופשוט לעשות ככה רד סליידר נקודה אוקיי בואו נבדוק איך זה עובד ואני בינתיים אשלים כי

29. 12:36

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

30. 13:16

    slider וכאן יש לנו את ה-blue text field שיקבל את הטקסט שלו בהתאם לבלו סליידר מצוין בואו נריץ ונבדוק האם הצלחנו להגיע עד הלום טוב יפה מאוד אז אנחנו יכולים עכשיו לראות שהערכים נראים סביר ונחמד, אוקיי?

31. 13:47

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

32. 14:07

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

33. 14:30

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

34. 14:39

    אז בואו נתחיל. הפתרון שלנו מתבסס על זה שלמחלקה UI-Color יש בנאי שמקבל צבעים RGB שזה נהדר זה בערך מה שבנינו. העניין הוא שהבנאי הזה מקבל צבעים בין 0 ל-1 ולא 0 עד 255.

35. 14:55

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