צור תצוגת גלילה עם סוויפט: 9 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:15

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

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

לפני שנעשה זאת, בואו נדבר על מה זה סוויפט ו- Xcode:

1. סוויפט היא שפת תכנות עוצמתית ואינטואיטיבית עבור macOS, iOS, watchOS ו- tvOS. כתיבת קוד סוויפט היא אינטראקטיבית ומהנה, התחביר הוא תמציתי אך אקספרסיבי, וסוויפט כוללת תכונות מודרניות שמפתחים אוהבים. קוד סוויפט בטוח בעיצובו, אך מייצר תוכנות הפועלות במהירות הבזק. הוא נועד לעבוד עם מסגרות הקקאו והקקאו טאץ 'של אפל והגוף הגדול של קוד Objective-C הקיים עבור מוצרי אפל. הוא בנוי עם מסגרת מהדר LLVM של קוד פתוח והוא נכלל ב- Xcode מאז גירסה 6, שפורסמה בשנת 2014. בפלטפורמות של אפל, הוא משתמש בספריית זמן הריצה של Objective-C המאפשרת לרוץ קוד C, Objective-C, C ++ ו- Swift. בתוך תוכנית אחת.

2. Xcode היא סביבת פיתוח משולבת (IDE) ל- macOS המכילה חבילה של כלי פיתוח תוכנה שפותחה על ידי אפל לפיתוח תוכנות עבור macOS, iOS, watchOS ו- tvOS.

שלב 1: הורד את Xcode

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

Xcode 10 כולל את Swift 4.2, אשר אוסף את התוכנה שלך מהר יותר, מסייע לך לספק אפליקציות מהירות יותר ומייצר קבצים בינאריים קטנים עוד יותר. בהשוואה ל- Swift 4.0, מהדר Swift העדכני ביותר יכול לבנות אפליקציות גדולות במהירות גבוהה פי שניים.* בשילוב עם מערכת ה- build החדשה של Xcode, זרימת העבודה העריכה, הבנייה והבדיקה היומיומית שלך היא מהירה בהרבה. אופטימיזציה לחומרת Mac מרובת הליבות העדכנית ביותר, Xcode ו- Swift יוצרות פלטפורמת פיתוח מהירה במיוחד.

שלב 2: בואו נתחיל

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

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

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

הפרויקט החדש מורכב משלושה קבצים, AppDelegate.swift, ViewController.swift, והכוכב של הדרכה זו: Main.storyboard. Under Distribution Info> Orientation Device בהגדרות הפרויקט הכללי, הגדר מכשירים ל- iPhone. מכיוון שמדובר באפליקציה לדיוקן בלבד, בטל את הסימון של האפשרויות לרוחב שמאל וימין נוף. פתח את Main.storyboard בנווט הפרויקטים כדי להציג אותו בממשק הבונה:

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

שלב 3: עבודה בממשק המשתמש

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

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

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

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

אתה יכול ליצור את ממשק המשתמש שאתה רוצה. במקרה שלי, השתמשתי בזה שאתה רואה בתמונה.

שלב 4: פיתוח בקר תצוגה שנייה ותיזום קטעים (מעברים)

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

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

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

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

1. לחץ לחיצה שמאלית על הכפתור שלך (במקרה שלי, רשום חשבון חדש)
2. החזק את הפקודה ולחץ על העכבר השמאלי כדי לגרור אותה לסצנת בקרת הרישום.
3. שחרר אותו שם ובחר "הצג באופן מודאלי"

שלב 5: צור חוג תכנות לתהליך רישום

לכן, כעת אנו רוצים ליצור כיתת קידוד ייעודית לסצנה החדשה.

לשם כך עליך לבצע את השלבים הבאים:

• קליק ימני על תיקיית הפרויקט שלך
• לחץ על הקובץ החדש בשם cocoa touch class
• בכיתה כתוב: RegisterVC
• חשוב מאוד! ודא שתת -המחלקה חייבת להיות מסוג UIViewController
• השפה חייבת להיות מהירה.
• לחץ על הבא ושמור את שיעור הקקאו שלך בתוך השורש הראשי של הפרויקט שלך.
• לחץ על לוח הסיפור הראשי ועבור לבקר התצוגה החדש
• לחץ על הכפתור הצהוב המוצב מעליו
• בצד ימין פנה למפקח הכיתות והפנה לרשומה VC (Costum class, class = RegisterVC

שלב 6: בנה את החלקה האופקית של הדף

ב- iOS, תצוגות גלילה משמשות לצפייה בתכנים שלא יתאימו לגמרי למסך. לתצוגות הגלילה יש שתי מטרות עיקריות:

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

במה משתמשים בדפי משנה בהחלקה אופקית?

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

אז במעבר ליצירת בקר תצוגה זה, במקרה שלי, היו לי 5 עמודים שרציתי ליצור:

1. אימייל
2. שם מלא
3. סיסמה
4. תאריך לידה
5. מִין

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

בחר את בקר התצוגה שלך ועבור לפינה הימנית העליונה ולחץ על סמל הסרגל וערוך את הגודל המדומה. תבחר Freeform על מנת להתאים את הרוחב והגובה. רוחב ברירת המחדל של המסך המתאים לאייפון 8 הוא 375, כך שאם אני מכפיל 375*5 = 1875. והנה, יש לך בקר תצוגה מורחב.

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

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

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

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

שלב 7: פיתוח ממשק המשתמש לדפי המשנה של החלקה האופקית

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

שלב 8: יישום העיצוב ב- Xcode

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

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

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

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

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

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

1. פתח את לוח הסיפורים שלך, Main.storyboard.
2. לחץ על לחצן Assistant בסרגל הכלים של Xcode ליד הפינה השמאלית העליונה של Xcode כדי לפתוח את עורך העוזר. אם אתה רוצה יותר מקום לעבודה, כווץ את ניווט הפרויקט ואת אזור השירות על ידי לחיצה על לחצני הניווט ותוכניות השירות בסרגל הכלים של Xcode.
3. תוכל גם לכווץ את תצוגת המתאר.

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

לחץ על דף המשנה וגרור למחלקה המתאימה בקוד.

שלב 9: שילוב מחוות מותאמות אישית

SWIPE GESTURE

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

יישום מחוות החלקה

שלב 1: הוסף תנועות החלקה בשיטת viewDidLoad ()

לעקוף את func viewDidLoad () {super.viewDidLoad ()

let swipeLeft = UISwipeGestureRecognizer (יעד: self, action: #selector (handleGesture)) swipeLeft.direction =. left self.view.addGestureRecognizer (swipeLeft)

let swipeRight = UISwipeGestureRecognizer (יעד: self, action: #selector (handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer (swipeRight)

let swipeUp = UISwipeGestureRecognizer (יעד: self, action: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

let swipeDown = UISwipeGestureRecognizer (יעד: self, action: #selector (handleGesture)) swipeDown.direction =.down self.view.addGestureRecognizer (swipeDown)}

שלב 2: בדוק את זיהוי המחוות בשיטת handleGesture () func handleGesture (מחווה: UISwipeGestureRecognizer) -> בטל {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")} אחרת אם gesture.direction == UISwipeGestureRecognizer. שמאל {הדפסה ("החלק שמאלה")} אחר אם gesture.direction == UISwipeGestureRecognizerDirection.up {print ("החלק למעלה")} אחר אם gesture.direction == UISwipeGestureRecognizerDirection.down {הדפסה ("החלק למטה")}}

באפליקציה שלי, רציתי להשתמש ב- swipeRight, אך השתחררתי להשתמש באחת המתאימה יותר ליישום שלך.

עכשיו, בואו ליישם את זה בקוד שלנו.

אנו ניגשים אל registerVC.swift שיצרנו בעבר וכותבים את הקוד כפי שניתן לראות בתמונות.

הסבר על הקוד

תן ל- current_x לקבל את המיקום הנוכחי של ה- ScrollView (מיקום אופקי) לתת למסך_רוחב לקבל את רוחב המסך, בניכוי גודל זה אפשר new_x מהמיקום הנוכחי של scrollview, אני חוזר לפי רוחב המסך אם current_x> 0 עד אם הוא לא יותר מ- 0 - 0 הוא העמוד הראשון.

וסיימנו!

עבודה טובה, בחורים!