PracticU

הצגת popover באייפון

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

הצגת popover באייפון
בשיעור הקודם מוצג פופ-אובר באייפד, ומסך נפרד באייפון. כאן מציגים פופ-אובר קטן גם באייפון, מתחת לכפתור, ומבינים מה צריך להגדיר כדי שהמערכת לא תשנה את הסגנון שלו.
השלבים העיקריים
1. ViewController עם תמונה: מוסיפים ViewController עם Image View שממלא את המסך, ומשמש כתוכן הפופ-אובר. כפתור Send מחובר בסגוויי מסוג Popover.
2. מזהה ו-Outlet: לסגוויי נותנים מזהה (Popover E-mail), ולכפתור Outlet בשם btn save.
3. כפייה לפופ-אובר באייפון: ב-prepare(for:) בודקים את מזהה הסגוויי, ואז מגדירים את dest.popoverPresentation.delegate כ-self. המתודה adaptivePresentationStyle מחזירה none, כך שהמערכת לא תשנה את הסגנון למסך מלא.
4. גודל וכיוון: preferredContentSize קטן (50 על 50), ו-permittedArrowDirections מוגדר לחץ למטה. ה-sourceRect מוזז לפי רוחב הכפתור כדי להזיז את הפופ-אובר ימינה.
5. הצגה מקוד: בלי סגוויי, מזהים את ה-ViewController לפי Storyboard Identifier, מגדירים modalPresentationStyle כ-popover, ומציגים אותו עם present.
שימו לב
ההחלטה אם להציג פופ-אובר באייפון או מסך מלא תלויה במתודה adaptivePresentationStyle, ולכן ה-delegate חייב להיות מוגדר לפני ההצגה.
אפשר להציג פופ-אובר באייפון בשתי דרכים: מסגוויי או מקוד.
השיעור הבא בקורס: הסבר על Custom Dialogs

פרקי ההרצאה: הצגת popover באייפון

  1. 00:00

    הצגת popover באייפון במקום מסך מלא

  2. 00:38

    הוספת מסך Popover וכפתור Send

  3. 01:54

    Segue מזהה וחיבור Outlet לכפתור

  4. 02:51

    prepare for segue ונקודת ההחלטה

  5. 04:20

    ביטול ההתאמה למסך מלא

  6. 05:14

    גודל התוכן של ה-popover

  7. 05:55

    כיוון החץ ומלבן המקור

תמלול ההרצאה: הצגת popover באייפון

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

  1. 00:02

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

  2. 00:19

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

  3. 00:36

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

  4. 01:07

    נאלץ את הכפתור לימין ולמטה, אז 16 16 פה בדדים, יפה, ולגבי ה-Segway, בוא נגרור לכאן Segway, וה-Segway הוא כמובן Popover Segway.

  5. 01:23

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

  6. 01:38

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

  7. 01:55

    עכשיו זה יוצא כ-popover זה יהיה הרבה יותר קטן אז אני יכול ככה להקטין פה את הגודל אבל אנחנו נעשה את זה כבר מהקוד שתי דברים אחרונים אנחנו רוצים לתפוס פה את הכפתור הוא כבר מבצע את ה-segway אבל אנחנו נרצה להוציא לו outlet ולגבי ה-Segway אנחנו רוצים לתת לו ID. אז אני אתפוס קודם את ה-Segway נסיים איתו עומד על ה-Segway לוחץ קליק כאן אני אתן לו

  8. 02:15

    Identifier נגיד Popover E-Mail ולגבי הכפתור אני רוצה להוציא לו Outlet כמו שאמרתי אז אני מסמן את הכפתור פותח בצד ימין את ה-סיסטנט אדיטור אנחנו רוצים לגרור מהכפתור ככה לכאן Outlet ולשים לב שזה יוצא Outlet ולא Action ובוא נקרא לזה נניח btn save כתבנו שם save נכון למטה אוקיי מגניב send לא נורא אבל העיקר שזה outlet נכון

  9. 02:46

    עכשיו בוא נחזור לטפל בקוד אני אסגור את ה-assistant editor ואני אסתכל רק על ה-view controller אז אנחנו עכשיו רק ב-view controller וכבר נלך ל-prepare for segue כאן אנחנו רוצים להתכונן לסגווי המדובר ולעזור לו להבין שאנחנו רוצים בכל זאת פופ אובר גם באייפון אז בוא נרשום לעצמנו כותרת pop over on אייפון אנחנו רוצים בעצם להכריח את זה

  10. 03:13

    אז נגיד forse כי אנחנו יודעים שההתנהגות הדפלטית כמו שראינו בסרטונים הקודמים היא בעצם להציג את זה בצורה אדפטיבית אז כדי לעשות את זה קודם כל נבדוק אם זה ה-segway המדובר אז if segway.identifier שווה שווה ל-popover-email הזה שהגדרנו קודם ב-identifier

  11. 03:32

    של ה-segway אזי אנחנו לא רוצים להמשיך לקוד שלמטה אז בוא נעשה פה return ובמקרה כזה אנחנו רוצים להיות ה-delegate של ה-presentation controller של ה-view controller שבדסטיניישן.

  12. 03:50

    אז בוא נעשה ככה let dest שווה segue.destination שיהיה לנו יותר קל ואז dest.popoverPresentation.delegate שווה ל-self כמו שעשינו בסרטון הקודם.

  13. 04:16

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

  14. 04:45

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

  15. 05:11

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

  16. 05:37

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

  17. 06:01

    ה-permitted-aerodirections אנחנו נרצה לקבוע שזה יהיה חץ למטה אנחנו נרצה אותו דבר, dest.popover.source-view שווה לבטון שלנו שלמעלה אז btn-save יפה מאוד ו-dest.popover-view-controller.frame ה-source-react למעשה אז כאן זה יהיה איזשהו cg frame, cg-rex סליחה,

  18. 06:34

    ובוא נגיד שמבחינת x אנחנו רוצים את הרוחב של הכפתור לקחת אז btn-save.frame.width וכל השאר לא מעניין

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

ההרצאה הקודמת: עבודה עם custom popover ב-Xcode

ההרצאה הבאה: הסבר על Custom Dialogs

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

  • הצגת תמונות באפליקציה
  • הצגת תמונה ב-React
  • הצגת טבלה שלמה
  • הצגת אתר אינטרנט באפליקציה

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

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