วิธีการสร้างเครื่องคิดเลขใน Xcode โดยใช้ Swift: 9 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:07

ในบทช่วยสอนสั้นๆ นี้ ฉันจะแสดงวิธีสร้างเครื่องคิดเลขอย่างง่ายโดยใช้ Swift ใน Xcode แอพนี้สร้างขึ้นเพื่อให้ดูเหมือนกับแอพเครื่องคิดเลขดั้งเดิมสำหรับ iOS คุณสามารถทำตามคำแนะนำทีละขั้นตอนและสร้างเครื่องคิดเลขกับฉัน หรือคุณสามารถไปที่ขั้นตอนสุดท้ายแล้วคัดลอกและวางโค้ดลงในตัวควบคุมมุมมองของคุณ อย่างไรก็ตาม หากคุณทำเช่นนี้ ตรวจสอบให้แน่ใจว่าได้เชื่อมต่อองค์ประกอบทั้งหมดของคุณบนกระดานเรื่องราวกับตัวควบคุมการดูของคุณ

ขั้นตอนที่ 1: การสร้างโครงการ

ขั้นตอนแรกในการสร้างเครื่องคิดเลขของเราคือการสร้างโปรเจ็กต์ใน Xcode คุณสามารถทำได้โดยคลิก "สร้างโปรเจ็กต์ Xcode ใหม่" และตั้งชื่อตามที่คุณต้องการ ฉันตั้งชื่อของฉันว่า "เครื่องคิดเลข" ขั้นตอนต่อไปคือการเลือก "แอปพลิเคชันมุมมองเดียว" สำหรับประเภทแอป เก็บข้อมูลอื่นๆ ทั้งหมดไว้เป็นค่าเริ่มต้น

ขั้นตอนที่ 2: เค้าโครงกระดานเรื่องราว

ขั้นตอนที่ 2 ในการสร้างเครื่องคิดเลขของเรา คุณจะต้องออกแบบเลย์เอาต์พื้นฐานในกระดานเรื่องราว ก่อนที่คุณจะเริ่มสิ่งนี้ ฉันแนะนำให้เปลี่ยนอุปกรณ์จำลองของคุณเป็น iPhone 7 Plus เริ่มต้นด้วยการลากปุ่มบนกระดานเรื่องราวและเปลี่ยนขนาดเป็น 89 x 89 เปลี่ยนสีพื้นหลังเป็นปรอทบนตัวตรวจสอบแอตทริบิวต์และสีแบบอักษรเป็นทังสเตน ถัดไป ปรับแบบอักษรเป็น Helvetica Light 30 คัดลอกและวางปุ่มต่อไปจนกว่าคุณจะมีทั้งหมด 20 ปุ่ม ปรับเลย์เอาต์ของปุ่มเหล่านี้เพื่อให้คุณมีห้าแถวและสี่คอลัมน์

ขั้นตอนที่ 3: การออกแบบสตอรี่บอร์ดและสุนทรียศาสตร์

ลบปุ่มที่สองในแถวด้านล่างและขยายปุ่มแรกเพื่อยึดพื้นที่นี้ เปลี่ยนค่าตัวยึดตำแหน่งของปุ่มนี้เป็นศูนย์ ดำเนินการเปลี่ยนค่าตัวเลขและสัญลักษณ์ของแต่ละปุ่มต่อไปจนกว่าจะเหมือนกับภาพที่แสดงด้านบน ในตัวตรวจสอบแอตทริบิวต์ สีเทาเข้มกว่าคือสีเงิน สีส้มคือส้มเขียวหวาน และสีแบบอักษรจะเปลี่ยนเป็นหิมะบนปุ่มสีส้ม ถัดไป คลิกที่ตัวควบคุมมุมมองและเปลี่ยนสีพื้นหลังเป็นสีดำ เพิ่มป้ายกำกับเหนือปุ่มและปรับขนาดตามที่คุณรู้สึกสบาย จัดข้อความให้ชิดขวาและเปลี่ยนแบบอักษรของป้ายกำกับเป็น Helvetica light 70 หากต้องการ คุณสามารถเพิ่มข้อจำกัดให้กับองค์ประกอบทั้งหมดเพื่อทำให้แอปดูเหมือนกันสำหรับอุปกรณ์ทั้งหมด

ขั้นตอนที่ 4: การเชื่อมต่อและการรวมองค์ประกอบ

เปิดตัวตรวจสอบแอตทริบิวต์และเปลี่ยนแท็กสำหรับปุ่มตัวเลขทุกปุ่ม แท็กควรมากกว่าค่าตัวเลขจริง 1 รายการ ตัวอย่างเช่น ปุ่ม #0 ควรมีค่าแท็กเป็น 1 ปุ่ม #1 ควรมีค่าแท็กเป็น 2 ปุ่ม #2 ควรมีค่าแท็กเป็น 3 เป็นต้น ต่อไป ให้กด control คลิกที่ปุ่ม #0 แล้วลากไปบน view controller ป๊อปอัปควรปรากฏบนหน้าจอ เปลี่ยนการเชื่อมต่อเป็น 'action' ประเภทเป็น 'UIButton' เหตุการณ์เป็น 'Touch Up Inside' อาร์กิวเมนต์ของ 'Sender ' และชื่อเป็น 'numbers' คุณสามารถเปลี่ยนชื่อเป็นสิ่งที่คุณต้องการ แต่นั่นหมายความว่าคุณจะต้องเปลี่ยนชื่ออีกครั้งเมื่อเรียกใช้ฟังก์ชันในภายหลังในโปรแกรม ถัดไป ควบคุม คลิก และลากปุ่มตัวเลขแต่ละปุ่มลงในฟังก์ชันที่เราเพิ่งสร้างขึ้น ตอนนี้ ควบคุม คลิก และลากป้ายชื่อลงในโปรแกรม แต่ไม่ใช่ในฟังก์ชัน ซึ่งหมายความว่าคุณเพียงแค่นำป้ายกำกับมาไว้ในฟังก์ชันโดยแยกเป็นตัวแปร จำไว้ว่า หากคุณเคยสับสนเกี่ยวกับรหัส ฉันได้ทิ้งรหัสทั้งหมดไว้ให้คุณใช้ในขั้นตอนสุดท้ายของคำแนะนำนี้

ขั้นตอนที่ 5: การสร้างตัวแปร

เพื่อให้ปุ่มตัวเลขทำงาน เราจะต้องเชื่อมต่อค่ากับป้ายกำกับในฟังก์ชัน 'ตัวเลข' คุณสามารถทำได้โดยสร้างตัวแปร 'numberOnScreen' ก่อน และทำให้เป็นประเภท double และเท่ากับ 0: var numberOnScreen: Double = 0; และอย่าลืมว่าหากโค้ดบนนี้ไม่ชัดเจนนัก ฉันได้ฝากโค้ดฉบับเต็มไว้ในขั้นตอนสุดท้ายให้คุณใช้ตามที่คุณต้องการ ถัดไป สร้างตัวแปรอื่น 'performingMath' ของประเภท bool และทำให้เป็นเท็จ: var comparisonMath = false; นอกจากนี้ ให้สร้างตัวแปรอื่นที่เรียกว่า 'previousNumber' ประเภท double และตั้งค่าให้เท่ากับ 0: var PreviousNumber: Double = 0; ตัวแปรสุดท้ายที่คุณต้องสร้างคือตัวแปร 'การดำเนินการ' ตั้งค่าให้เท่ากับ 0: var operation = 0;

ขั้นตอนที่ 6: ฟังก์ชันปุ่มตัวเลข

หลังจากที่คุณได้สร้างตัวแปรที่เหมาะสมแล้ว คุณสามารถดำเนินการคัดลอกและวางโค้ดนี้ลงในฟังก์ชัน 'numbers' ของคุณได้:

ถ้าทำคณิตศาสตร์ == จริง {

label.text = สตริง (sender.tag-1)

numberOnScreen = สองเท่า (label.text!)!

performanceMath = เท็จ

}

อื่น {

label.text = label.text! + สตริง (sender.tag-1)

numberOnScreen = สองเท่า (label.text!)!

}

โดยพื้นฐานแล้ว รหัสชิ้นนี้จะแสดงตัวเลขบนฉลากเมื่อกดปุ่มที่เหมาะสม อย่างไรก็ตาม เรายังต้องใช้ปุ่มอื่นๆ ทั้งหมดและทำให้เครื่องคิดเลขทำงานได้ เราจะทำสิ่งนี้ในสองสามขั้นตอนถัดไป

ขั้นตอนที่ 7: การรวมปุ่มการทำงาน

เปิดตัวตรวจสอบแอตทริบิวต์และเปลี่ยนแท็กสำหรับปุ่มเบ็ดเตล็ดทั้งหมด ปุ่มที่ชัดเจนควรมีแท็ก 11 ปุ่มหารควรมีแท็ก 12 ปุ่มคูณควรมีแท็ก 13 ปุ่มลบควรมีแท็ก 14 ปุ่มเพิ่มควรมีแท็ก 15 และปุ่มเท่ากับควรมีแท็ก 16 จากนั้นกด control คลิกที่ปุ่มล้างแล้วลากไปยังตัวควบคุมมุมมอง ป๊อปอัปควรปรากฏบนหน้าจอ เปลี่ยนการเชื่อมต่อเป็น 'action' ประเภทเป็น 'UIButton' เหตุการณ์เป็น 'Touch Up Inside' อาร์กิวเมนต์ของ 'Sender ' และชื่อเป็น 'buttons' คุณสามารถเปลี่ยนชื่อเป็นสิ่งที่คุณต้องการ แต่นั่นหมายความว่าคุณจะต้องเปลี่ยนชื่ออีกครั้งเมื่อเรียกใช้ฟังก์ชันในภายหลังในโปรแกรม ถัดไป ควบคุม คลิก และลากปุ่มเบ็ดเตล็ดแต่ละปุ่มลงในฟังก์ชันที่เราเพิ่งสร้างขึ้น

ขั้นตอนที่ 8: ฟังก์ชันปุ่มเบ็ดเตล็ด

หลังจากที่คุณเชื่อมต่อปุ่มเบ็ดเตล็ดที่ติดแท็กทั้งหมดเข้ากับฟังก์ชันที่เหมาะสมแล้ว คุณสามารถเริ่มแทรกโค้ดลงในฟังก์ชัน 'ปุ่ม' ได้:

PreviousNumber = สองเท่า (label.text!)!

ถ้า sender.tag == 12 { //แบ่ง

label.text = "/";

}

ถ้า sender.tag == 13 { //คูณ

label.text = "x";

}

ถ้า sender.tag == 14 { // ลบ

label.text = "-";

}

ถ้า sender.tag == 15 { //Add

label.text = "+";

}

การดำเนินการ = sender.tag

performanceMath = จริง;

}

อย่างอื่นถ้า sender.tag == 16 {

ถ้าการดำเนินการ == 12{ // หาร

label.text = สตริง (previousNumber / numberOnScreen)

}

อย่างอื่นถ้าการดำเนินการ == 13{ // คูณ

label.text = สตริง (หมายเลขก่อนหน้า * หมายเลขบนหน้าจอ)

}

มิฉะนั้นถ้าการดำเนินการ == 14{ // ลบ

label.text = สตริง (previousNumber - numberOnScreen)

}

อย่างอื่นถ้าการดำเนินการ == 15{ //Add

label.text = สตริง (หมายเลขก่อนหน้า + หมายเลขบนหน้าจอ)

}

}

อย่างอื่นถ้า sender.tag == 11{

label.text = ""

ก่อนหน้าจำนวน = 0;

จำนวนบนหน้าจอ = 0;

การดำเนินการ = 0;

}

โดยพื้นฐานแล้ว โค้ดชิ้นนี้จะแสดงปุ่มเบ็ดเตล็ดปุ่มใดปุ่มหนึ่งเมื่อกด และดำเนินการคำนวณคำตอบสุดท้ายและแสดงไว้บนฉลาก

ขั้นตอนที่ 9: รหัสเต็ม

หากคุณไม่ต้องการสร้างเครื่องคิดเลขทีละขั้นตอนกับฉัน คุณสามารถเพิ่มองค์ประกอบลงในกระดานเรื่องราวของคุณ แล้วคัดลอกและวางโค้ดทั้งหมดลงในตัวควบคุมมุมมองของคุณ นี่คือรหัส:

นำเข้า UIKit

คลาส ViewController: UIViewController {

var numberOnScreen: สองเท่า = 0;

var PreviousNumber: สองเท่า = 0;

var performanceMath = เท็จ;

การทำงานของ var = 0;

@IBAction หมายเลข func (_ ผู้ส่ง: UIButton) {

ถ้าทำคณิตศาสตร์ == จริง {

label.text = สตริง (sender.tag-1)

numberOnScreen = สองเท่า (label.text!)!

performanceMath = เท็จ

}

อื่น {

label.text = label.text! + สตริง (sender.tag-1)

numberOnScreen = สองเท่า (label.text!)!

}

}

@IBOutlet ป้ายกำกับ var ที่อ่อนแอ: UILabel!

ปุ่มฟังก์ชั่น @IBAction (_ ผู้ส่ง: UIButton) {

ถ้า label.text != "" && sender.tag != 11 && sender.tag != 16{

PreviousNumber = สองเท่า (label.text!)!

ถ้า sender.tag == 12 { //แบ่ง

label.text = "/";

}

ถ้า sender.tag == 13 { //คูณ

label.text = "x";

}

ถ้า sender.tag == 14 { // ลบ

label.text = "-";

}

ถ้า sender.tag == 15 { //Add

label.text = "+";

}

การดำเนินการ = sender.tag

performanceMath = จริง;

}

อย่างอื่นถ้า sender.tag == 16 {

ถ้าการดำเนินการ == 12{ // หาร

label.text = สตริง (previousNumber / numberOnScreen)

}

อย่างอื่นถ้าการดำเนินการ == 13{ // คูณ

label.text = สตริง (หมายเลขก่อนหน้า * numberOnScreen)

}

มิฉะนั้นถ้าการดำเนินการ == 14{ // ลบ

label.text = สตริง (หมายเลขก่อนหน้า - หมายเลขบนหน้าจอ)

}

อย่างอื่นถ้าการดำเนินการ == 15{ //Add

label.text = สตริง (หมายเลขก่อนหน้า + หมายเลขบนหน้าจอ)

}

}

อย่างอื่นถ้า sender.tag == 11{

label.text = ""

ก่อนหน้าจำนวน = 0;

จำนวนบนหน้าจอ = 0;

การดำเนินการ = 0;

}

}

แทนที่ func viewDidLoad () {

super.viewDidLoad()

// ทำการตั้งค่าเพิ่มเติมหลังจากโหลดมุมมอง โดยทั่วไปจะมาจากปลายปากกา

}

แทนที่ func didReceiveMemoryWarning () {

super.didReceiveMemoryWarning()

// กำจัดทรัพยากรใด ๆ ที่สามารถสร้างใหม่ได้

}

}