PracticU

עבודה עם UIAlertController הצגת alert ב-Xcode - חלק 3

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

עבודה עם UIAlertController הצגת alert ב-Xcode - חלק 3
בשיעור משדרגים את שדה האימייל בדיאלוג: מוסיפים לו אייקון מימין, ומוסיפים ולידציה שמפעילה את כפתור הלוגין רק כשהקלט תקין.
השלבים העיקריים
1. אייקון בשדה: לשדה הטקסט מוגדר rightView עם UIImageView שמציג תמונה מתוך נכסי הפרויקט בשם E-Mail.
2. מצב התצוגה: rightViewMode קובע מתי האייקון מוצג. בוחרים always כדי שיוצג תמיד, ולא רק בזמן עריכה.
3. גודל: גובה האייקון נקבע לפי גובה הטקסט בשדה, שמתקבל מהפונט של השדה (lineHeight). הרוחב נגזר מיחס הרוחב-גובה של התמונה.
4. ולידציה: בתחילה כפתור הלוגין מסומן כלא פעיל, כלומר actions[1].isEnabled מוגדר כ-false.
5. מאזין לשינוי: addTarget עם אירוע editingChanged קורא לפונקציה של ה-ViewController בכל שינוי בשדה הסיסמה. הפונקציה מוצאת את הדיאלוג שמוצג (presentedViewController) ומפעילה את הכפתור לפי ספירת התווים בשדה.
6. תנאי: הכפתור נפעל כשיש יותר משלושה תווים. אפשר לשנות את התנאי לפי הצורך.
7. Objective-C: הפונקציה מסומנת @objc כדי שאפשר יהיה לחבר אותה כמאזין.
שימו לב
ניתן להרחיב את הוולידציה ולבדוק שהאימייל מכיל את הסימן @. זו משימה לבית שהוצעה בשיעור.
הטופס מציג אייקון ומכבה את כפתור הלוגין עד שיש קלט תקין.
השיעור הבא בקורס: הצגת Progress alert ב-Xcode

פרקי ההרצאה: עבודה עם UIAlertController הצגת alert ב-Xcode - חלק 3

  1. 00:00

    אייקון בצד ימין של שדה הטקסט

  2. 01:33

    הצגת האייקון תמיד ב-rightViewMode

  3. 02:33

    גודל האייקון לפי גובה הפונט

  4. 04:47

    יחס רוחב וגובה לתמונה

  5. 05:36

    כפתור לוגין מושבת עד מילוי השדות

  6. 06:41

    מעקב אחרי שינוי הטקסט בשדה

  7. 07:39

    פונקציה שמופעלת בכל שינוי טקסט

תמלול ההרצאה: עבודה עם UIAlertController הצגת alert ב-Xcode - חלק 3

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

  1. 00:02

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

  2. 00:28

    זה שיש פה תכונה שנקראת right view והright view זה איזה פקד אני רוצה להציג בצד ימין האמת היא שאנחנו נרצה להציג פה image view אז בואו נגדיר ui-image-view שווה ui-image-view חדש ואנחנו נרצה להתחיל אותו אולי עם image אז יש פה image כדי שנוכל להציג תמונה

  3. 00:53

    בואו ניקח תמונה לפרויקט נוסיף אותה פה לassets אוקיי? כלומר בוא נמצא תמונה נגיד בתוכנה הזאת שהראינו בשיעורים הקודמים באיקון סייט נחפש פה e-mail ונגרור את זה פנימה עכשיו בשביל הקיצור אני רוצה לתת את הקרדיט ל-IconSate, אבל בשביל הקיצור אני אקרא לתמונה הזאת E-Mail,

  4. 01:13

    כך יהיה לנו יותר נוח. שיניתי שם פשוט את השם, ואז בתמונה שלנו אנחנו רוצים לקחת UI-Image-Named, נכון?

  5. 01:23

    וב-Name קראנו לה E-Mail, אז נוח לי יותר להקליד את זה כך. יפה. אז הוספנו פה אימג' ווי לתמונה, בואו נראה אם זה לטקסט פילד, בואו נראה איך זה נראה, אם בכלל.

  6. 01:37

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

  7. 02:00

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

  8. 02:18

    בכוונה הראתי לכם את זה כי אנחנו רוצים להבין את הסיבה לדברים שאנחנו עושים. אז הקוד הבא הולך בדיוק לסדר את העניין הזה. כאן יש לנו את ה-right view, ואנחנו רוצים לקבוע על ה-right view קצת תכונות.

  9. 02:33

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

  10. 02:52

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

  11. 03:04

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

  12. 03:26

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

  13. 03:55

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

  14. 04:18

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

  15. 04:39

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

  16. 04:55

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

  17. 05:10

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

  18. 05:22

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

  19. 05:39

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

  20. 05:54

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

  21. 06:22

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

  22. 06:50

    כדי לעשות את זה אני ממש צריך להזין לטקסט, אני צריך לדעת כל הזמן מה המצב של הטקסט, מה מצב העריכה של הטקסט. אז אנחנו נתפוס פה את הטקסט פילד השני של הפאסוורד, ובוא נגיד עליו פאס טקסט פילד, בוא נוסיף לך בעצם מאזין, add target עבור event target for control event ה target זה בעצם להוסיף מאזין מהקוד ה target יהיה האובייקט הנוכחי self ה view

  23. 07:19

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

  24. 07:50

    אז בוא נגיד לא אכפת לי איך לקרוא לו אבל טקסט פילד it will be והטייפ שלו הוא ui.text.field יפה?

  25. 08:02

    הפונקציה צריכה להיות מאותרת ב-at objective c כדי שהפונקציה תהיה נגישה ל-run time של objective c אחרת הפעולה הזאת לא תעבוד. המחלקה הזאת view

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

ההרצאה הקודמת: עבודה עם UIAlertController הצגת alert ב-Xcode - חלק 2

ההרצאה הבאה: הצגת Progress alert ב-Xcode

הרצאות קשורות מקורסים אחרים

  • Switch to JS Alert
  • Alert Dialog
  • עבודה עם VI - חלק 1
  • Billing Budget Alert

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

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