תוכן עניינים:

כיצד להכין מחשבון ב- Xcode באמצעות סוויפט: 9 שלבים
כיצד להכין מחשבון ב- Xcode באמצעות סוויפט: 9 שלבים

וִידֵאוֹ: כיצד להכין מחשבון ב- Xcode באמצעות סוויפט: 9 שלבים

וִידֵאוֹ: כיצד להכין מחשבון ב- Xcode באמצעות סוויפט: 9 שלבים
וִידֵאוֹ: פיתוח אפליקציות iOS - הכרות עם Xcode 2024, יוני
Anonim
Image
Image

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

שלב 1: יצירת הפרויקט

פריסת לוח הסטורי
פריסת לוח הסטורי

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

שלב 2: פריסת לוח הסטורי

שלב 2 של יצירת המחשבון שלנו מחייב אותך לעצב פריסה בסיסית בלוח הסטורי. לפני שתתחיל בכך, אני ממליץ לשנות את מכשיר הסימולטור שלך לאייפון 7 פלוס. התחל על ידי גרירת כפתור ללוח הסיפור ושינוי מידותיו ל 89 על 89. שנה את צבע הרקע שלו לכספית על מפקח התכונות וצבע הגופן שלו לטונגסטן. לאחר מכן התאם את הגופן ל- Helvetica Light 30. המשך להעתיק ולהדביק את הלחצן עד שיהיה לך סך של 20. התאם את הפריסה של לחצנים אלה כך שיהיו לך חמש שורות וארבע עמודות.

שלב 3: עיצוב ואסתטיקה של סטוריבורדים

עיצוב ואסתטיקה של סטוריבורד
עיצוב ואסתטיקה של סטוריבורד

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

שלב 4: חיבור ושילוב אלמנטים

חיבור ושילוב אלמנטים
חיבור ושילוב אלמנטים
חיבור ושילוב אלמנטים
חיבור ושילוב אלמנטים

פתח את מפקח התכונות ושנה את התג עבור כל לחצן מספר אחד. התג צריך להיות אחד יותר מהערך המספרי האמיתי. לדוגמה, כפתור #0 צריך להיות בעל ערך תג של 1, לחצן מספר 1 צריך להיות ערך תג של 2, לחצן מספר 2 צריך להיות ערך תג של 3 וכן הלאה. לאחר מכן לחץ על שליטה, לחץ על כפתור #0 וגרור אותו אל בקר התצוגה. חלונות קופצים אמורים להופיע על המסך. שנה את החיבור ל'פעולה ', את הסוג ל'כפתור UIB', את האירוע ל'מגע פנימה ', את הארגומנטים ל'שולח' ושמו ל'מספרים '. אתה יכול לשנות את השם למה שאתה רוצה אבל זה אומר שתצטרך לשנות את השם שוב כשאתה קורא לפונקציה בהמשך התוכנית. לאחר מכן, שלוט, לחץ וגרור כל לחצן מספר אל הפונקציה שיצרנו זה עתה. כעת, שלוט, לחץ וגרור את התווית לתוכנית, אך לא אל הפונקציה. המשמעות היא שאתה פשוט מכניס את התווית לפונקציה כמשתנה נפרד. זכור, אם אי פעם התבלבלת לגבי הקוד, השארתי את כל הקוד שלי לשימושך בשלב האחרון של מדריך זה.

שלב 5: הקמת משתנים

הקמת משתנים
הקמת משתנים

על מנת להפוך את לחצני המספרים לתפקודיים, יהיה עלינו לחבר את ערכם לתווית בפונקציית 'המספרים' שלנו. אתה יכול לעשות זאת על ידי יצירת תחילה משתנה 'numberOnScreen' והפיכתו מהסוג כפול ושווה ל 0: var numberOnScreen: Double = 0; ואל תשכח, אם הקוד כאן קצת לא ברור, השארתי לך את הקוד המלא בשלב האחרון שתוכל להשתמש בו כרצונך. לאחר מכן, הקים משתנה נוסף 'PerformMath' מסוג bool והפוך אותו לשקר: var PerformMath = false; כמו כן, צור משתנה נוסף בשם 'previousNumber' מהסוג הכפול והגדר אותו שווה ל 0: var previousNumber: Double = 0; המשתנה האחרון שעליך ליצור הוא משתנה 'הפעולה'. הגדר אותו שווה ל 0: var פעולה = 0;

שלב 6: פונקציית לחצני מספרים

לחצני מספר פונקציה
לחצני מספר פונקציה

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

אם PerformMath == true {

label.text = מחרוזת (sender.tag-1)

numberOnScreen = כפול (label.text!)!

PerformMath = false

}

אחר {

label.text = label.text! + מחרוזת (sender.tag-1)

numberOnScreen = כפול (label.text!)!

}

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

שלב 7: שילוב לחצני הפעלה

שילוב כפתורי הפעלה
שילוב כפתורי הפעלה
שילוב כפתורי הפעלה
שילוב כפתורי הפעלה

פתח את מפקח התכונות ושנה את התג עבור כל הכפתורים השונים. כפתור הניקוי צריך להיות בעל תג של 11, כפתור החלוקה צריך להיות בעל תג של 12, כפתור הכפל צריך להיות בעל תג של 13, כפתור החיסור צריך להיות בעל תג של 14, כפתור החיבור צריך להיות בעל תג של 15, ולחצן השווה צריך להיות בעל תג 16. לאחר מכן, לחץ על שליטה, לחץ על הלחצן נקה וגרור אותו אל בקר התצוגה. חלונות קופצים אמורים להופיע על המסך. שנה את החיבור ל'פעולה ', את הסוג ל'כפתור UIB', את האירוע ל'מגע פנימה ', את הארגומנטים ל'שולח' ושמו ל'כפתורים '. אתה יכול לשנות את השם למה שאתה רוצה אבל זה אומר שתצטרך לשנות את השם שוב כשאתה קורא לפונקציה בהמשך התוכנית. לאחר מכן, שלוט, לחץ וגרור כל כפתור שונות לפונקציה שיצרנו זה עתה.

שלב 8: פונקציית לחצנים שונים

לחצנים שונים פונקציה
לחצנים שונים פונקציה

לאחר שחיברת את כל הכפתורים השונים המתויגים לפונקציה המתאימה להם, תוכל להתחיל להכניס את הקוד לפונקציית 'הכפתורים':

previousNumber = כפול (label.text!)!

if sender.tag == 12 {// חלק

label.text = "/";

}

if sender.tag == 13 {// כפל

label.text = "x";

}

if sender.tag == 14 {// הפחת

label.text = "-";

}

if sender.tag == 15 {// הוסף

label.text = "+";

}

operation = sender.tag

PerformMath = true;

}

אחר אם sender.tag == 16 {

אם פעולה == 12 {// חלק

label.text = מחרוזת (previousNumber / numberOnScreen)

}

אחרת אם הפעולה == 13 {// הכפל

label.text = מחרוזת (previousNumber * numberOnScreen)

}

else if operation == 14 {// הפחת

label.text = מחרוזת (previousNumber - numberOnScreen)

}

אחרת אם מבצע == 15 {// הוסף

label.text = מחרוזת (previousNumber + numberOnScreen)

}

}

אחר אם sender.tag == 11 {

label.text = ""

previousNumber = 0;

numberOnScreen = 0;

פעולה = 0;

}

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

שלב 9: קוד מלא

קוד מלא
קוד מלא

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

ייבא UIKit

class ViewController: UIViewController {

var numberOnScreen: כפול = 0;

var previousNumber: כפול = 0;

var performingMath = false;

פעולה var = 0;

מספרי func @IBAction (_ שולח: UIButton) {

אם PerformMath == true {

label.text = מחרוזת (sender.tag-1)

numberOnScreen = כפול (label.text!)!

PerformMath = false

}

אחר {

label.text = label.text! + מחרוזת (sender.tag-1)

numberOnScreen = כפול (label.text!)!

}

}

@IBOutlet תווית var var חלשה: UILabel!

לחצני func @IBAction (_ שולח: UIButton) {

if label.text! = "" && sender.tag! = 11 && sender.tag! = 16 {

previousNumber = כפול (label.text!)!

if sender.tag == 12 {// חלק

label.text = "/";

}

if sender.tag == 13 {// כפל

label.text = "x";

}

if sender.tag == 14 {// הפחת

label.text = "-";

}

if sender.tag == 15 {// הוסף

label.text = "+";

}

operation = sender.tag

PerformMath = true;

}

אחר אם sender.tag == 16 {

אם פעולה == 12 {// חלק

label.text = מחרוזת (previousNumber / numberOnScreen)

}

אחרת אם הפעולה == 13 {// הכפל

label.text = מחרוזת (previousNumber * numberOnScreen)

}

else if operation == 14 {// הפחת

label.text = מחרוזת (previousNumber - numberOnScreen)

}

אחרת אם מבצע == 15 {// הוסף

label.text = מחרוזת (previousNumber + numberOnScreen)

}

}

אחר אם sender.tag == 11 {

label.text = ""

previousNumber = 0;

numberOnScreen = 0;

פעולה = 0;

}

}

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

super.viewDidLoad ()

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

}

לדרוס את func didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// השלך מכל משאבים שניתן ליצור מחדש.

}

}

מוּמלָץ: