جدول المحتويات:

كيفية عمل آلة حاسبة في Xcode باستخدام Swift: 9 خطوات
كيفية عمل آلة حاسبة في Xcode باستخدام Swift: 9 خطوات

فيديو: كيفية عمل آلة حاسبة في Xcode باستخدام Swift: 9 خطوات

فيديو: كيفية عمل آلة حاسبة في Xcode باستخدام Swift: 9 خطوات
فيديو: How to Build an iOS Calculator Clone with Swift and SwiftUI: Step-by-Step Tutorial |#iosdevelopment 2024, يونيو
Anonim
Image
Image

في هذا البرنامج التعليمي السريع ، سأوضح لك كيفية إنشاء آلة حاسبة بسيطة باستخدام Swift in Xcode. تم تصميم هذا التطبيق ليبدو متطابقًا تقريبًا مع تطبيق الآلة الحاسبة الأصلي لنظام iOS. يمكنك إما اتباع الإرشادات خطوة بخطوة وإنشاء الآلة الحاسبة معي ، أو يمكنك ببساطة الانتقال إلى الخطوة الأخيرة ونسخ الرمز ولصقه في وحدة التحكم في العرض. ومع ذلك ، إذا قمت بذلك ، فتأكد من توصيل جميع العناصر الموجودة على لوحة العمل بوحدة التحكم في العرض.

الخطوة الأولى: إنشاء المشروع

تخطيط القصة المصورة
تخطيط القصة المصورة

الخطوة الأولى في صنع الآلة الحاسبة الخاصة بنا هي إنشاء المشروع في Xcode. يمكنك القيام بذلك عن طريق النقر فوق "إنشاء مشروع Xcode جديد" وتسميته كما تريد. قمت بتسمية "الآلة الحاسبة" الخاصة بي. الخطوة التالية هي تحديد "Single View Application" لنوع التطبيق. احتفظ بجميع المعلومات الأخرى كقيمة افتراضية.

الخطوة 2: تخطيط القصة المصورة

تتطلب الخطوة 2 من إنشاء الآلة الحاسبة الخاصة بنا تصميم تخطيط أساسي في لوحة العمل. قبل أن تبدأ هذا ، أوصي بتغيير جهاز المحاكاة الخاص بك إلى iPhone 7 Plus. ابدأ بسحب زر إلى لوحة العمل وتغيير أبعادها إلى 89 × 89. قم بتغيير لون الخلفية إلى الزئبق في مفتش السمات ولون الخط إلى التنجستن. بعد ذلك ، اضبط الخط على Helvetica Light 30. استمر في نسخ الزر ولصقه حتى يصبح لديك 20. اضبط تنسيق هذه الأزرار بحيث يكون لديك خمسة صفوف وأربعة أعمدة.

الخطوة 3: تصميم وجماليات القصة المصورة

تصميم وجماليات القصة المصورة
تصميم وجماليات القصة المصورة

احذف الزر الثاني في الصف السفلي وقم بتوسيع الزر الأول لتولي هذه المساحة. قم بتغيير قيمة العنصر النائب لهذا الزر إلى صفر. استمر في تغيير القيم الرقمية والرموز لكل زر حتى تتطابق عمليًا مع الصورة الموضحة أعلاه. في مفتش السمات ، يكون اللون الرمادي الداكن فضيًا ، واللون البرتقالي اليوسفي ، ويتغير لون الخط إلى لون ثلجي على الأزرار البرتقالية. بعد ذلك ، انقر فوق وحدة التحكم في العرض وقم بتغيير لون الخلفية إلى اللون الأسود. أضف تسمية فوق الأزرار واضبط حجمها بالشكل الذي تشعر فيه بالراحة. قم بمحاذاة النص إلى اليمين وقم بتغيير خط التسمية إلى Helvetica light 70. إذا كنت ترغب في ذلك ، يمكنك إضافة قيود إلى جميع العناصر لجعل التطبيق يبدو كما هو بالنسبة لجميع الأجهزة.

الخطوة 4: توصيل العناصر ودمجها

ربط ودمج العناصر
ربط ودمج العناصر
ربط ودمج العناصر
ربط ودمج العناصر

افتح مفتش السمات وقم بتغيير العلامة لكل زر رقم فردي. يجب أن تكون العلامة 1 أكثر من القيمة العددية الفعلية. على سبيل المثال ، يجب أن يحتوي الزر # 0 على قيمة علامة 1 ، ويجب أن يكون للزر رقم 1 قيمة علامة 2 ، ويجب أن يكون للزر رقم 2 قيمة علامة 3 ، وهكذا. بعد ذلك ، اضغط على زر التحكم ، وانقر على الزر # 0 ، واسحبه إلى وحدة التحكم في العرض. يجب أن تظهر نافذة منبثقة على الشاشة. غيّر الاتصال إلى "إجراء" ، والنوع إلى "زر UIB" ، والحدث إلى "Touch Up Inside" ، وسيطات "المرسل" ، واسمه إلى "أرقام". يمكنك تغيير الاسم إلى ما تريد ولكن هذا يعني أنه سيتعين عليك تغيير الاسم مرة أخرى عند استدعاء الوظيفة لاحقًا في البرنامج. بعد ذلك ، تحكم ، وانقر ، واسحبه كل زر رقم إلى الوظيفة التي أنشأناها للتو. الآن ، تحكم ، وانقر ، واسحب التسمية إلى البرنامج ، ولكن ليس في الوظيفة. هذا يعني أنك تقوم ببساطة بإحضار التسمية إلى الوظيفة كمتغير منفصل. تذكر ، إذا كنت مرتبكًا بشأن الكود ، فقد تركت كل الكود الخاص بي لتستخدمه في الخطوة الأخيرة من هذا Instructable.

الخطوة 5: إنشاء المتغيرات

إنشاء المتغيرات
إنشاء المتغيرات

من أجل جعل أزرار الأرقام وظيفية ، سيتعين علينا ربط قيمتها بالتسمية في وظيفة "الأرقام" الخاصة بنا. يمكنك القيام بذلك عن طريق إنشاء متغير 'numberOnScreen' أولاً وجعله من النوع مزدوجًا ويساوي 0: var numberOnScreen: Double = 0؛ ولا تنس ، إذا كان الرمز الموجود هنا غير واضح بعض الشيء ، فقد تركت لك الكود الكامل في الخطوة الأخيرة لتستخدمه حسب رغباتك. بعد ذلك ، حدد متغيرًا آخر من النوع bool 'PerformMath' واجعله خطأ: var PerformMath = false؛ أيضًا ، قم بإنشاء متغير آخر يسمى 'previousNumber' من النوع double وقم بتعيينه يساوي 0: var previousNumber: Double = 0؛ المتغير الأخير الذي يجب عليك إنشاؤه هو متغير "العملية". اضبطها على 0: عملية var = 0 ؛

الخطوة 6: وظيفة أزرار الأرقام

وظيفة أزرار الأرقام
وظيفة أزرار الأرقام

بعد إنشاء المتغيرات المناسبة ، يمكنك بعد ذلك المتابعة لنسخ هذا الرمز ولصقه في وظيفة "الأرقام" الخاصة بك:

إذا PerformMath == صحيح {

label.text = سلسلة (sender.tag-1)

numberOnScreen = مزدوج (label.text!)!

PerformMath = خطأ

}

آخر {

label.text = label.text! + سلسلة (sender.tag-1)

numberOnScreen = مزدوج (label.text!)!

}

بشكل أساسي ، يعرض هذا الجزء من الكود أرقامًا معينة على الملصق عند الضغط على الزر المناسب. ومع ذلك ، ما زلنا بحاجة إلى أن نكون قادرين على استخدام جميع الأزرار الأخرى وجعل الآلة الحاسبة تعمل. سنفعل ذلك في الخطوتين التاليتين.

الخطوة 7: دمج أزرار التشغيل

دمج أزرار التشغيل
دمج أزرار التشغيل
دمج أزرار التشغيل
دمج أزرار التشغيل

افتح مفتش السمات وقم بتغيير العلامة لجميع الأزرار المتنوعة. يجب أن يحتوي الزر الواضح على علامة 11 ، ويجب أن يحتوي زر القسمة على علامة 12 ، ويجب أن يحتوي زر الضرب على علامة 13 ، ويجب أن يحتوي زر الطرح على علامة 14 ، ويجب أن يحتوي زر الإضافة على علامة 15 ، ويجب أن يحتوي زر المساواة على علامة 16. بعد ذلك ، اضغط على مفتاح التحكم ، وانقر فوق زر المسح ، واسحبه إلى وحدة التحكم في العرض. يجب أن تظهر نافذة منبثقة على الشاشة. غيّر الاتصال إلى "إجراء" ، والنوع إلى "زر UIB" ، والحدث إلى "Touch Up Inside" ، وسيطات "المرسل" ، واسمه إلى "الأزرار". يمكنك تغيير الاسم إلى ما تريد ولكن هذا يعني أنه سيتعين عليك تغيير الاسم مرة أخرى عند استدعاء الوظيفة لاحقًا في البرنامج. بعد ذلك ، تحكم ، وانقر ، واسحب كل زر متنوع إلى الوظيفة التي أنشأناها للتو.

الخطوة 8: وظيفة الأزرار المتنوعة

وظيفة الأزرار المتنوعة
وظيفة الأزرار المتنوعة

بعد توصيل جميع الأزرار المتنوعة التي تم وضع علامة عليها بوظيفتها المناسبة ، يمكنك البدء في إدخال الرمز في وظيفة "الأزرار":

previousNumber = مزدوج (label.text!)!

إذا كان sender.tag == 12 {// Divide

label.text = "/" ؛

}

إذا كان sender.tag == 13 {// ضرب

label.text = "س" ؛

}

إذا كان المرسل == 14 {// طرح

label.text = "-" ؛

}

إذا كان sender.tag == 15 {// Add

label.text = "+" ؛

}

العملية = المرسل

PerformMath = صحيح ؛

}

وإلا إذا sender.tag == 16 {

إذا كانت العملية == 12 {// Divide

label.text = سلسلة (رقم / رقم سابق على الشاشة)

}

وإلا إذا كانت العملية == 13 {// اضرب

label.text = سلسلة (previousNumber * numberOnScreen)

}

وإلا إذا كانت العملية == 14 {// اطرح

label.text = سلسلة (previousNumber - numberOnScreen)

}

وإلا إذا كانت العملية == 15 {// إضافة

label.text = سلسلة (رقم سابق + رقم على الشاشة)

}

}

وإلا إذا sender.tag == 11 {

label.text = ""

الرقم السابق = 0 ؛

numberOnScreen = 0 ؛

العملية = 0 ؛

}

بشكل أساسي ، تعرض قطعة الكود هذه أحد الأزرار المتنوعة عند الضغط عليها وتستمر في حساب الإجابة النهائية وعرضها على الملصق.

الخطوة 9: الكود الكامل

كود كامل
كود كامل

إذا كنت لا ترغب في المتابعة وإنشاء الآلة الحاسبة خطوة بخطوة معي ، فيمكنك ببساطة إضافة العناصر إلى لوحة العمل ونسخ الكود الكامل ولصقه في وحدة التحكم في العرض. ها هو الكود:

استيراد UIKit

فئة ViewController: UIViewController {

var numberOnScreen: مزدوج = 0 ؛

var previousNumber: مزدوج = 0 ؛

var PerformMath = false ؛

عملية var = 0 ؛

أرقام funcIBAction (_ المرسل: UIButton) {

إذا PerformMath == صحيح {

label.text = سلسلة (sender.tag-1)

numberOnScreen = مزدوج (label.text!)!

PerformMath = خطأ

}

آخر {

label.text = label.text! + سلسلة (sender.tag-1)

numberOnScreen = مزدوج (label.text!)!

}

}

IBOutlet تسمية var ضعيفة: UILabel!

أزرار funcIBAction (_ المرسل: UIButton) {

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

previousNumber = مزدوج (label.text!)!

إذا كان sender.tag == 12 {// Divide

label.text = "/" ؛

}

إذا كان sender.tag == 13 {// ضرب

label.text = "س" ؛

}

إذا كان المرسل == 14 {// طرح

label.text = "-" ؛

}

إذا كان sender.tag == 15 {// Add

label.text = "+" ؛

}

العملية = المرسل

PerformMath = صحيح ؛

}

وإلا إذا sender.tag == 16 {

إذا كانت العملية == 12 {// Divide

label.text = سلسلة (رقم / رقم سابق على الشاشة)

}

وإلا إذا كانت العملية == 13 {// اضرب

label.text = سلسلة (previousNumber * numberOnScreen)

}

وإلا إذا كانت العملية == 14 {// اطرح

label.text = سلسلة (previousNumber - numberOnScreen)

}

وإلا إذا كانت العملية == 15 {// إضافة

label.text = سلسلة (رقم سابق + رقم على الشاشة)

}

}

وإلا إذا sender.tag == 11 {

label.text = ""

الرقم السابق = 0 ؛

numberOnScreen = 0 ؛

العملية = 0 ؛

}

}

تجاوز func viewDidLoad () {

super.viewDidLoad ()

// قم بأي إعداد إضافي بعد تحميل العرض ، عادةً من المنقار.

}

تجاوز func didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// تخلص من أي موارد يمكن إعادة إنشائها.

}

}

موصى به: