כיצד להשתמש בתצוגות מקדימות של Xcode כדי לראות כיצד האפליקציה שלך מופיעה בעת יצירתה

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

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

במאמר זה, נבחן כיצד להשתמש ב-Previews ב-Xcode עבור iOS אוiPadOSאפליקציות.

מתחילים

כדי להפעיל אפליקציית Xcode iOS, פתח את Xcode ולאחר מכן מ-Xcode'sקוֹבֶץתפריט, בחרפרויקט חדש.

זה פותח את בוחר הפרויקטים החדשים:

בוחר הפרויקטים של Xcode.

בבוחר הפרויקטים, בחרiOSבחלק העליון,אפליקציהתחת יישומים, ולאחר מכן לחץ עלהַבָּאלַחְצָן.

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

הגדר אפשרויות פרויקט.

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

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

תצוגה מקדימה של נכסי תוכן וקנבס

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

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

אתה יכול להוסיף ולהסיר נכסים לקטלוג זה על ידי בחירת הפרויקט שלך (הסמל הכחול) בחלק העליון של עורך Xcode בצד שמאל, ולאחר מכן בחירת היעד שלו מימין לזה, וגלילה מטה אל "נכסי פיתוח" ב- התחתון שלכְּלָלִיחלונית הפרויקט:

התיקיה תצוגה מקדימה של תוכן.

כאשר אתה יוצר את פרויקט iOS שלך, XCode יוצר כברירת מחדל קובץ SwiftUI של תצוגת תוכן אחת בשם "ContentView.swift" בעורך הפרויקט בצד שמאל. אם תבחר את הקובץ הזה ולאחר מכן תבחר באחת מתצוגות המשנה בקוד במחלקה ContentView, תראה את התצוגה המקדימה שלו מופיעה בצד ימין של עורך Xcode:

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

הצג את הקנבס מתפריט העורך.

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

בקרות

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

בקרות Xcode Preview.

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

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

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

ספקי תצוגה מקדימה

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

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

struct CircleImage_Previews: PreviewProvider {

static var previews: some View {

CircleImage()

}

}

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

#תצוגה מקדימה מאקרו

אם אתה מכוון ל-iOS 13 ואילך, אתה יכול להשתמש במאקרו #Preview בקוד כדי להגדיר תצוגות מקדימות של Xcode במקום להשתמש בספק תצוגה מקדימה.

לשם כך, תחילה תגדיר סוויפטViewתת-מעמד בתור אstruct:

struct ContentView: View {

var body: some View {

// ...

}

}

ואז מתחת לזה, הגדר את התצוגה הזו ב-#Previewמאקרו:

#Preview {

ContentView()

}

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

במקרה של ה#Previewמאקרו, המהדר מרחיב אותו ל-"Preview(_:body:)" שמקבל שם אופציונלי ו-aViewBuilderבפרמטר הגוף.

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

func contextMenu(

@ViewBuilder menuItems: () -> MenuItems

) -> some View

אם ברצונך להגדיר תצוגות מקדימות מרובות באותו קובץ קוד מקור באמצעות ה#Previewמאקרו, אתה יכול לתת שם לכל אחד על ידי העברת מחרוזת:

#Preview("Input true") {

ContentView(someInput: true)

}

Apple מספקת גם פקודות מאקרו מקדימות נוספות למטרות שונות. ראה אתתצוגה מקדימה של תיעודמאפל למידע נוסף.

אפל ערכה ישיבה במהלךWWDCכנס מפתחים '23 בנושא Xcode Previews זכאיבנה ממשק משתמש פרוגרמטי עם תצוגות מקדימות של Xcode.

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

ברגע שתבין את התצוגה המקדימה ב-Xcode, תמצא את עצמך משתמש בהן מדי יום.