เนื้อหา

• ฉันจำเป็นต้องรู้จัก Swift หรือไม่?
• ตั้งค่า Xcode IDE ของ Apple
• เริ่มต้นใช้งาน: สร้างโครงการ Xcode ใหม่
• จำเป็นต้องมีทีมพัฒนาหรือไม่
• ทำความเข้าใจกับ Xcode IDE ของ Apple
• AppleDelegate: ตรวจสอบไฟล์ต้นฉบับ Swift
• 1. สร้างจุดเริ่มต้น
• 2. กำหนด AppDelegate ของคุณ
• 3. กำหนดคุณสมบัติของหน้าต่าง
• 4. การใช้งาน Stub สารพัน
• ทดสอบโครงการของคุณ: เรียกใช้ iOS Simulator
• การสร้าง UI ด้วยเครื่องมือสร้างส่วนติดต่อ
• การเข้าถึงคลังวัตถุของ iOS
• การปรับแต่งวัตถุด้วยตัวตรวจสอบคุณสมบัติ
• ดูตัวอย่างส่วนต่อประสานผู้ใช้ของคุณ
• เชื่อมต่อ UI ของคุณกับซอร์สโค้ดของคุณ
• การสร้างวิธีการกระทำ
• 1. ระบุวิธีการนี้เป็นการกระทำ
• 2. ประกาศวิธีการ
• 3. กำหนดพารามิเตอร์บางอย่าง
• ตรวจสอบการเชื่อมต่อ
• การสร้างกล่องโต้ตอบการแจ้งเตือน
• 1. ประกาศค่าคงที่
• 2. ตั้งค่าเนื้อหาของ
• 3. กำหนดรูปแบบ
• 4. เพิ่มการกระทำ
• 5. แสดงการแจ้งเตือน
• ทดสอบแอป iOS ที่สมบูรณ์ของคุณ
• ห่อ

Android อาจเป็นหนึ่งในระบบปฏิบัติการที่ได้รับความนิยมมากที่สุดในโลก แต่ก็ยังห่างไกลจากระบบปฏิบัติการมือถือเพียงระบบเดียว!

หากคุณต้องการให้แอปพลิเคชันมือถือของคุณเข้าถึงผู้ชมที่กว้างที่สุดคุณจะต้องกำหนดเป้าหมายหลายแพลตฟอร์ม ในขณะที่คุณ ได้ เลือกใช้เครื่องมือในการพัฒนาข้ามแพลตฟอร์มเช่น Flutter คุณสามารถสร้างฐานหลายโค้ดซึ่งอนุญาตให้คุณมอบประสบการณ์ผู้ใช้ที่ได้รับการออกแบบและปรับให้เหมาะกับแต่ละแพลตฟอร์มมือถือ

บางทีคุณอาจต้องการที่จะปล่อยแอพมือถือรุ่นล่าสุดของคุณบน Android และ iOS บางทีคุณอาจกำลังพิจารณาที่จะกระโดดลงเรือไปที่ Apple หรือบางทีคุณอาจอยากรู้ว่าการพัฒนาสำหรับ iOS เปรียบเทียบกับการพัฒนาสำหรับ Android อย่างไร ไม่ว่าแรงบันดาลใจของคุณจะเป็นอย่างไรในบทความนี้ฉันจะแสดงให้คุณเห็นว่าจะเริ่มพัฒนาอย่างไรสำหรับ iOS ด้วยการสร้างแอปง่าย ๆ สำหรับ iPad และ iPhone

ฉันจะแนะนำแนวคิดหลักของภาษาการเขียนโปรแกรม Swift ของ Apple แนะนำคุณผ่านพื้นที่สำคัญของสภาพแวดล้อมการพัฒนาแบบรวมของ Xcode และแสดงวิธีทดสอบโครงการของคุณใน iOS Simulator - ในกรณีที่คุณ ยังไม่มุ่งมั่นที่จะซื้อ iPad หรือ iPhone เลย!

นี่คือสิ่งที่คุณต้องรู้เพื่อเริ่มพัฒนาสำหรับ iOS

ฉันจำเป็นต้องรู้จัก Swift หรือไม่?

เมื่อเริ่มต้นพัฒนาสำหรับ iOS โดยทั่วไปคุณจะมีตัวเลือกภาษาการเขียนโปรแกรมสองภาษา: Objective-C หรือ Swift เปิดตัวในปี 2014 Swift เป็นภาษาที่ทันสมัยกว่าและ Apple ดูเหมือนว่าจะผลักดัน Swift เหนือ Objective-C สำหรับการพัฒนา iOS ดังนั้นฉันจะใช้ Swift ตลอดการสอนนี้

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

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

น่าเสียดายที่คุณจะไม่เชี่ยวชาญภาษาการเขียนโปรแกรมใหม่ทั้งหมดเมื่อถึงด้านล่างของหน้านี้ แต่ถ้าคุณตัดสินใจที่จะพัฒนา iOS เราขอแนะนำให้คุณลองใช้แอพ Swift Playgrounds แอปพลิเคชันนี้มีแบบฝึกหัด Learn To Code ซึ่งนำเสนอเป็นปริศนาแบบโต้ตอบที่จะช่วยให้คุณคุ้นเคยกับสิ่งจำเป็นสำหรับ Swift ที่คุณต้องการเพื่อสำรวจการพัฒนา iOS ต่อไป

ตั้งค่า Xcode IDE ของ Apple

ในการพัฒนาสำหรับ iPhone และ iPad คุณจะต้องมี Mac ที่ใช้ macOS 10.11.5 ขึ้นไป หากคุณไม่แน่ใจว่า macOS เวอร์ชันใดที่คุณกำลังใช้งานอยู่ให้ทำดังนี้:

• เลือกโลโก้“ Apple” ในแถบเมนูของ Mac
• เลือก“ เกี่ยวกับ Mac นี้”
• ตรวจสอบให้แน่ใจว่าได้เลือกแท็บ“ ภาพรวม” macOS เวอร์ชันของคุณควรปรากฏในหน้าต่างนี้

คุณจะต้องใช้ Xcode ซึ่งเป็นสภาพแวดล้อมการพัฒนาแบบรวม (IDE) ของ Apple Xcode มีเครื่องมือและคุณสมบัติทั้งหมดที่จำเป็นสำหรับการออกแบบพัฒนาและดีบักแอปพลิเคชันสำหรับ macOS, watchOS, tvOS - และ iOS

หากต้องการดาวน์โหลด Xcode เวอร์ชันล่าสุด:

• เปิดตัว App Store บน Mac ของคุณ
• ในช่อง“ ค้นหา” ให้ป้อน“ Xcode”
• เมื่อแอปพลิเคชัน Xcode ปรากฏขึ้นให้เลือก“ รับ” แล้วตามด้วย“ ติดตั้งแอป”
• เมื่อได้รับแจ้งให้ป้อน Apple ID และรหัสผ่านของคุณ หากคุณไม่มี Apple ID คุณสามารถสร้างได้ฟรี Xcode จะถูกดาวน์โหลดไปยังโฟลเดอร์“ Applications” ของ Mac
• เมื่อ Xcode ดาวน์โหลดเสร็จแล้วให้เปิดมัน อ่านข้อกำหนดในการให้บริการและหากคุณยินดีที่จะดำเนินการต่อให้คลิก "ยอมรับ"
• หาก Xcode แจ้งให้คุณดาวน์โหลดซอฟต์แวร์เพิ่มเติมให้ทำตามคำแนะนำบนหน้าจอเพื่อดาวน์โหลดส่วนประกอบที่ขาดหายไปเหล่านี้

เริ่มต้นใช้งาน: สร้างโครงการ Xcode ใหม่

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

ในการสร้างโครงการ Xcode ใหม่:

• เปิดตัว Xcode IDE หากคุณยังไม่ได้ดำเนินการ
• หลังจากนั้นครู่หนึ่งหน้าจอ“ ยินดีต้อนรับสู่ Xcode” จะปรากฏขึ้น เลือก“ สร้างโครงการ Xcode ใหม่” หากหน้าจอต้อนรับไม่ปรากฏขึ้นให้เลือก“ ไฟล์> ใหม่> โครงการ” จากแถบเมนู Xcode
• ในหน้าต่าง“ เลือกเทมเพลตสำหรับโครงการใหม่ของคุณ” ตรวจสอบให้แน่ใจว่าได้เลือกแท็บ“ iOS”
• เลือกเทมเพลต“ แอปมุมมองเดียว” จากนั้นคลิก“ ถัดไป”
• ใน“ ชื่อผลิตภัณฑ์” ป้อน“ HelloWorld” Xcode จะใช้ชื่อโครงการและแอปพลิเคชันของคุณ
• หากต้องการให้ป้อน "ชื่อองค์กร" ที่เป็นตัวเลือก
• ป้อน“ ตัวระบุองค์กร” ของคุณหากคุณไม่มีตัวระบุคุณสามารถใช้“ com.example” โปรดทราบว่า“ ตัวระบุกลุ่ม” ถูกสร้างขึ้นโดยอัตโนมัติตามชื่อผลิตภัณฑ์และตัวระบุองค์กรดังนั้นคุณจึงไม่ ต้องกังวลเกี่ยวกับเรื่องนี้
• เปิดเมนูแบบเลื่อนลง“ ภาษา” และเลือก“ Swift”
• ค้นหาช่องทำเครื่องหมาย "ใช้ข้อมูลหลัก" และตรวจสอบให้แน่ใจว่าเป็น ไม่ เลือก
• เลือกช่องทำเครื่องหมาย“ รวมการทดสอบหน่วย”
• ค้นหาช่องทำเครื่องหมาย "รวมการทดสอบ UI" และตรวจสอบให้แน่ใจ ไม่ เลือก
• คลิก“ ถัดไป”
• ในกล่องโต้ตอบที่ตามมาเลือกตำแหน่งที่คุณต้องการบันทึกโครงการของคุณแล้วคลิก "สร้าง"

Xcode จะโหลดโครงการของคุณในหน้าต่างพื้นที่ทำงาน

จำเป็นต้องมีทีมพัฒนาหรือไม่

ณ จุดนี้ Xcode อาจแสดงข้อผิดพลาดต่อไปนี้“ การลงชื่อเข้าใช้ HelloWorld ต้องใช้ทีมพัฒนา”

ก่อนที่คุณจะสามารถเรียกใช้โครงการบนอุปกรณ์ iOS ที่มีอยู่จริงคุณจะต้องตั้งค่าทีมที่ถูกต้องและลงนามในใบสมัครของคุณ เนื่องจากเราเพิ่งทดสอบกับ iOS คุณไม่จำเป็นต้องทำขั้นตอนการเซ็นให้เสร็จสิ้น แต่คุณจะต้องลงชื่อสมัครใช้แอปพลิเคชันของคุณก่อนจึงจะสามารถทำงานบนอุปกรณ์ทางกายภาพหรือเข้าถึงบริการบางอย่างเช่น Game Center หรือ In-App การสั่งซื้อสินค้า

ทำความเข้าใจกับ Xcode IDE ของ Apple

เวิร์กสเปซของ Xcode เป็นที่ที่คุณจะเขียนซอร์สโค้ดของแอปทั้งหมดออกแบบและสร้างส่วนต่อประสานผู้ใช้ (UI) และสร้างไฟล์และทรัพยากรเพิ่มเติมทั้งหมดที่จะมารวมกันเพื่อสร้างแอปพลิเคชั่น iOS ที่สมบูรณ์

Xcode เต็มไปด้วยคุณสมบัติต่างๆ แต่ในฐานะที่เป็นผู้พัฒนา iOS ใหม่คุณต้องรู้เกี่ยวกับ:

• (1) พื้นที่นำทาง พื้นที่นี้ให้การเข้าถึงไฟล์และแหล่งข้อมูลต่าง ๆ ทั้งหมดที่เป็นโครงการของคุณอย่างรวดเร็วและง่ายดาย คุณสามารถตรวจสอบเนื้อหาของไฟล์ได้โดยเลือกในส่วนการนำทาง โปรดทราบว่าคุณจะต้อง เลือก ไฟล์ในคำถาม; การดับเบิลคลิกที่ไฟล์จะเป็นการเปิดในหน้าต่างใหม่ภายนอก
• (2) พื้นที่แก้ไข. ขึ้นอยู่กับไฟล์ที่คุณเลือกในพื้นที่การนำทาง Xcode จะแสดงอินเทอร์เฟซต่าง ๆ ในพื้นที่ตัวแก้ไข โดยทั่วไปคุณจะใช้พื้นที่ตัวแก้ไขเพื่อเขียนซอร์สโค้ดของแอปพลิเคชันของคุณและสร้าง UI
• พื้นที่ใช้สอย พื้นที่นี้แบ่งออกเป็นสองส่วน ด้านบนของพื้นที่ยูทิลิตี้ (3) แสดงบานหน้าต่างตัวตรวจสอบที่คุณสามารถดูข้อมูลเกี่ยวกับรายการที่คุณเลือกในพื้นที่การนำทางหรือตัวแก้ไขและแก้ไขแอตทริบิวต์ ด้านล่างของพื้นที่ยูทิลิตี้ (4) แสดงบานหน้าต่างไลบรารีซึ่งให้การเข้าถึงองค์ประกอบ UI สำเร็จรูป, ข้อมูลโค้ดและทรัพยากรอื่น ๆ

AppleDelegate: ตรวจสอบไฟล์ต้นฉบับ Swift

เทมเพลตแอปมุมมองเดียวรวมถึงรหัส Swift และทรัพยากรที่จำเป็นสำหรับการสร้างแอปพลิเคชัน iOS ที่เรียบง่าย แต่ใช้งานได้

คุณสามารถดูไฟล์และทรัพยากรที่สร้างขึ้นโดยอัตโนมัติเหล่านี้ได้ในพื้นที่นำทาง (ไปทางซ้ายมือของพื้นที่ทำงาน Xcode)

หากมองไม่เห็นพื้นที่การนำทางคุณสามารถเกลี้ยกล่อมพื้นที่ให้ซ่อนตัวได้โดยเลือก "ดู> ตัวนำทาง> แสดงตัวนำทางโครงการ" จากแถบเมนู Xcode

เทมเพลต Simple View Application สร้างไฟล์หลายไฟล์โดยอัตโนมัติ แต่ให้เริ่มต้นด้วยการตรวจสอบ“ AppleDelegate.swift” เลือกไฟล์นี้ในพื้นที่การนำทางและพื้นที่ตัวแก้ไขควรอัปเดตเพื่อแสดงเนื้อหาของไฟล์

นำเข้า UIKit @UIApplicationMain คลาส AppDelegate: UIResponder, UIApplicationDelegate {หน้าต่าง var: UIWindow? // ใน Swift คุณประกาศวิธีการโดยใช้คีย์เวิร์ด“ func” // แอปพลิเคชัน func (_ แอปพลิเคชัน: UIApplication, DidFinishLaunchingWithOptions launchOptions:?) -> Bool {return true} // กำหนดพารามิเตอร์“ application” ด้วยประเภท“ UIApplication” ” // func applicationWillResignActive (_ แอปพลิเคชัน: UIApplication) {} func applicationDidEnterBackground (_ แอปพลิเคชัน: UIApplication) {} แอปพลิเคชัน UIApplication) {} func applicationDidBecomeActive (_ แอปพลิเคชัน UIApplication) (} แอปพลิเคชัน UIApplication) ) {}}

ลองมาดูสิ่งที่เกิดขึ้นในไฟล์นี้:

1. สร้างจุดเริ่มต้น

แอ็ตทริบิวต์ @UIApplicationMain สร้างจุดเข้าสู่แอปของคุณและ run loop ซึ่งเป็นลูปการประมวลผลเหตุการณ์ที่ช่วยให้คุณกำหนดเวลาการทำงานและประสานงานกิจกรรมอินพุตภายในแอปพลิเคชันของคุณ

@UIApplicationMain

2. กำหนด AppDelegate ของคุณ

ไฟล์ AppDelegate.swift กำหนดคลาส AppleDelegate ซึ่งสร้างหน้าต่างที่เนื้อหาแอปของคุณถูกดึงและเป็นที่สำหรับตอบสนองต่อการเปลี่ยนสถานะเช่นเมื่อใดก็ตามที่แอปของคุณเปลี่ยนเป็นพื้นหลังหรือถูกนำไปด้านหน้า

คลาส AppDelegate: UIResponder, UIApplicationDelegate {

ในรหัสด้านบนเรายังใช้โปรโตคอล UIApplicationDelegate ซึ่งกำหนดวิธีการต่าง ๆ ที่คุณสามารถใช้ในการตั้งค่าแอปและจัดการกับกิจกรรมระดับแอปต่างๆ

3. กำหนดคุณสมบัติของหน้าต่าง

คลาส AppDelegate มีคุณสมบัติ“ หน้าต่าง” ซึ่งเก็บการอ้างอิงถึงหน้าต่างแอปพลิเคชัน พร็อพเพอร์ตี้นี้แสดงถึงรากของลำดับชั้นการดูแอปของคุณและเป็นที่ที่เนื้อหาทั้งหมดของแอพจะถูกดึงออกมา

หน้าต่าง var: UIWindow?

4. การใช้งาน Stub สารพัน

คลาส AppDelegate ยังมีการใช้งานสตับสำหรับวิธีการมอบสิทธิ์หลายวิธีเช่น:

func applicationDidEnterBackground (_ application: UIApplication) {

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

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

นอกเหนือจาก applicationDidEnterBackground แล้ว AppleDelegate.swift มีวิธีการดังต่อไปนี้:

• didFinishLaunchingWithOptions แจ้งผู้ได้รับมอบหมายว่ากระบวนการเปิดตัวใกล้จะเสร็จสมบูรณ์และแอปพลิเคชันของคุณเกือบจะพร้อมที่จะทำงานแล้ว คุณควรใช้วิธีนี้ในการเริ่มต้นแอพให้สมบูรณ์และทำการปรับแต่งขั้นสุดท้ายก่อนที่ UI ของแอปพลิเคชันของคุณจะปรากฏต่อผู้ใช้
• applicationWillResignActive บอกผู้รับมอบสิทธิ์ว่าแอปพลิเคชันของคุณกำลังจะย้ายจากสถานะใช้งานเป็นสถานะไม่ใช้งาน วิธีการนี้สามารถถูกทริกเกอร์โดยการหยุดชะงักชั่วคราวเช่นการโทรเข้าหรือเมื่อแอปพลิเคชันของคุณเริ่มเปลี่ยนเป็นสถานะพื้นหลัง เมื่อแอพของคุณอยู่ในสถานะไม่ได้ใช้งานมันควรจะทำงานให้น้อยที่สุดดังนั้นคุณควรใช้ applicationWillResignActive เพื่อหยุดงานที่กำลังดำเนินการอยู่และหยุดตัวจับเวลาใด ๆ คุณควรใช้โอกาสนี้ในการบันทึกข้อมูลที่ไม่ได้บันทึกดังนั้นจะไม่สูญหายหากผู้ใช้เลือกที่จะออกจากแอปพลิเคชันของคุณขณะที่อยู่ในพื้นหลัง
• applicationWillEnterForeground ใน iOS 4.0 และใหม่กว่าวิธีนี้เรียกว่าเป็นส่วนหนึ่งของการเปลี่ยนแอพของคุณจากพื้นหลังเป็นสถานะแอ็คทีฟและเบื้องหน้า คุณควรใช้วิธีนี้เพื่อยกเลิกการเปลี่ยนแปลงใด ๆ ที่คุณทำเมื่อแอปพลิเคชันของคุณเข้าสู่พื้นหลัง
• applicationDidBecomeActive สิ่งนี้จะบอกผู้รับมอบสิทธิ์ว่าแอปของคุณย้ายจากไม่ได้ใช้งานเป็นสถานะใช้งานอยู่ โดยทั่วไปแล้วสิ่งนี้จะเกิดขึ้นเมื่อผู้ใช้หรือระบบเปิดใช้งานแอปพลิเคชันของคุณ แต่ก็สามารถเกิดขึ้นได้หากผู้ใช้เลือกที่จะเพิกเฉยต่อการขัดจังหวะที่ทำให้แอปของคุณอยู่ในสถานะไม่ใช้งานชั่วคราวเช่นสายเรียกเข้าหรือ SMS คุณควรใช้เมธอด applicationDidBecomeActive เพื่อรีสตาร์ทงานใด ๆ ที่ถูกหยุดชั่วคราวขณะที่แอปพลิเคชันของคุณอยู่ในสถานะไม่ใช้งาน
• applicationWillTerminate วิธีนี้แจ้งผู้รับมอบสิทธิ์ว่าใบสมัครของคุณกำลังจะถูกยกเลิก คุณควรใช้วิธีนี้เพื่อทำการล้างข้อมูลที่จำเป็นเช่นการบันทึกข้อมูลผู้ใช้หรือการปลดปล่อยทรัพยากรที่ใช้ร่วมกัน เพิ่งทราบว่าวิธีนี้มีประมาณห้าวินาทีในการทำงานและส่งคืนและหากเกินเวลาที่กำหนดระบบจะตัดสินใจฆ่ากระบวนการทั้งหมด

ทดสอบโครงการของคุณ: เรียกใช้ iOS Simulator

เนื่องจากเราใช้เทมเพลต Single View App โครงการของเรามีรหัสเพียงพอที่จะทำงานบน iOS

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

มาดำเนินโครงการของเราใน iOS Simulator:

• เลือก“ ตั้งค่ารูปแบบที่ใช้งานอยู่” (ซึ่งเคอร์เซอร์อยู่ในตำแหน่งในภาพหน้าจอต่อไปนี้)

• เลือกอุปกรณ์ที่คุณต้องการเลียนแบบเช่น "iPhone 8," "iPad Air 2" หรือ "iPhone X. " ตัวจำลองจะจำลอง iPhone 8 Plus ตามค่าเริ่มต้น
• ในมุมบนซ้ายของแถบเครื่องมือ Xcode ให้เลือกปุ่ม“ Run” (ตำแหน่งของเคอร์เซอร์ในภาพหน้าจอต่อไปนี้)

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

เมื่อ Xcode สร้างโครงการของคุณเสร็จแล้ว iOS Simulator จะเปิดใช้งานและเริ่มโหลดแอปของคุณ คล้ายกับตัวเลียนแบบ Android บางครั้งอาจเป็นกระบวนการที่ช้าดังนั้นคุณอาจต้องอดทน (อาจใช้สิ่งนี้เป็นโอกาสที่จะได้กาแฟด้วยตัวคุณเอง!)

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

การสร้าง UI ด้วยเครื่องมือสร้างส่วนติดต่อ

เครื่องมือสร้างอินเทอร์เฟซของ Xcode นำเสนอวิธีการที่มองเห็นได้สำหรับคุณในการออกแบบและสร้าง UI ของแอปพลิเคชันของคุณคล้ายกับวิธีที่ Layout Editor ทำงานใน Android Studio

หากคุณดูที่บริเวณการนำทางคุณจะเห็นว่าเทมเพลตแอป Single View ได้สร้างไฟล์“ Main.storyboard” ซึ่งเป็น สตอรี่บอร์ด ไฟล์. กระดานเรื่องราวเป็นภาพที่แสดงให้เห็นถึง UI ของแอพของคุณซึ่งคุณสามารถแก้ไขได้ในเครื่องมือสร้างส่วนต่อประสาน

หากต้องการดู Storyboard ของแอปให้เลือกไฟล์ Main.storyboard ในพื้นที่การนำทาง เครื่องมือสร้างส่วนต่อประสานควรเปิดขึ้นโดยอัตโนมัติและแสดง UI ของแอปของคุณซึ่งในปัจจุบันประกอบด้วยหน้าจอเดียว

หน้าจอนี้มีมุมมองเดียวโดยมีลูกศรชี้ไปทางด้านซ้ายของหน้าจอ ลูกศรนี้แสดงถึงจุดเข้าสู่กระดานเรื่องราวซึ่งเป็นหน้าจอแรกที่ผู้ใช้เห็นเมื่อพวกเขาเปิดแอปของคุณ

การเข้าถึงคลังวัตถุของ iOS

วิธีที่ง่ายที่สุดในการสร้าง UI ของคุณคือการใช้รายการจาก Xcode ห้องสมุดวัตถุ. ห้องสมุดนี้มีวัตถุที่มีการแสดงตนบนหน้าจอที่มองเห็นได้เช่นมุมมองภาพ, แถบการนำทางและสวิตช์และวัตถุที่กำหนดพฤติกรรม แต่ไม่มีสถานะที่มองเห็นได้เช่นตัวจดจำท่าทางและมุมมองคอนเทนเนอร์

เราจะสร้างปุ่มที่เมื่อแตะจะแสดงการแจ้งเตือน เริ่มต้นด้วยการคว้าปุ่มจากห้องสมุดวัตถุและเพิ่มลงในแอปของเรา:

• ที่ด้านล่างขวาของพื้นที่ทำงาน Xcode ให้เลือกปุ่ม“ แสดงวัตถุไลบรารี” อีกทางหนึ่งคุณสามารถเลือก“ ดู> ยูทิลิตี้> แสดงไลบรารีวัตถุ” จากเมนูของ Xcode

• ขณะนี้ไลบรารีวัตถุควรแสดงรายการของรายการต่าง ๆ ทั้งหมดที่คุณสามารถเพิ่มใน UI ของคุณ เลื่อนดูรายการนี้เพื่อดูว่ามีตัวเลือกใดบ้าง
• เราต้องการเพิ่มปุ่มดังนั้นให้พิมพ์“ ปุ่ม” ลงในช่องข้อความ“ กรอง” แล้วเลือกปุ่มเมื่อปรากฏในรายการ
• ลากวัตถุปุ่มบนผืนผ้าใบของคุณ ขณะที่คุณลากชุดแนวนอนและแนวตั้งจะปรากฏขึ้นเพื่อช่วยให้คุณวางตำแหน่งปุ่ม เมื่อคุณพอใจกับตำแหน่งของมันแล้วให้ปล่อยเมาส์เพื่อเพิ่มปุ่มใน UI ของคุณ

การปรับแต่งวัตถุด้วยตัวตรวจสอบคุณสมบัติ

ต่อไปเราต้องเพิ่มข้อความลงในปุ่ม คุณสามารถปรับแต่งวัตถุโดยใช้ Xcode ของแอตทริบิวต์ตรวจสอบ:

• เลือก“ ดู> ยูทิลิตี้> แสดงตัวตรวจสอบคุณสมบัติ” จากแถบเครื่องมือ Xcode ตอนนี้ผู้ตรวจสอบคุณสมบัติควรปรากฏขึ้นทางด้านขวาของพื้นที่ทำงาน Xcode

• ใน Canvas ของคุณเลือกวัตถุปุ่ม
• ในตัวตรวจสอบแอตทริบิวต์ให้ค้นหาส่วน“ ชื่อเรื่อง” และแทนที่ข้อความ“ ปุ่ม” เริ่มต้นด้วยข้อความบางส่วนของคุณเอง
  กดปุ่ม“ Return” บนแป้นพิมพ์ของคุณและ Interface Builder จะอัปเดตปุ่มเพื่อแสดงข้อความใหม่ของคุณ

ณ จุดนี้คุณอาจต้องการทดสอบกับคุณลักษณะอื่น ๆ ของปุ่มเช่นคุณอาจเปลี่ยนสีพื้นหลังของปุ่มหรือแบบอักษรที่ใช้สำหรับข้อความ

ดูตัวอย่างส่วนต่อประสานผู้ใช้ของคุณ

ในขณะที่คุณสามารถทดสอบแอปพลิเคชันของคุณด้วยการเรียกใช้แอปพลิเคชันบน iOS Simulator นี่ไม่ใช่วิธีที่ง่ายที่สุดในการตรวจสอบว่าแอปพลิเคชันของคุณมีรูปร่างอย่างไร

เมื่อคุณสร้าง UI คุณสามารถประหยัดเวลาได้ด้วยการดูตัวอย่างการเปลี่ยนแปลงในหน้าต่าง“ Preview” ของ Xcode ซึ่งเป็นเครื่องมือแก้ไขรองที่แสดงเป็นส่วนหนึ่งของพื้นที่ทำงาน Xcode ปกติ

• เลือก“ ดู> แก้ไข> แสดงผู้ช่วยแก้ไข” จากแถบเมนูของ Xcode
• ในแถบเมนูของ Assistant Editor ให้เลือก“ อัตโนมัติ”

• เลือก“ ดูตัวอย่าง> Main.storyboard (ดูตัวอย่าง)” ผู้ช่วยแก้ไขจะแสดงตัวอย่างของอินเทอร์เฟซผู้ใช้ของแอปของคุณพร้อมกับพื้นที่แก้ไขตามปกติ
• หากต้องการดูตัวอย่าง UI ของแอปในแนวที่แตกต่างให้เลื่อนไปที่ด้านล่างของหน้าต่างดูตัวอย่างแล้วเลือกปุ่ม“ หมุน”

เชื่อมต่อ UI ของคุณกับซอร์สโค้ดของคุณ

ในการพัฒนา iOS รหัสแอปและส่วนต่อประสานผู้ใช้ของคุณแยกจากกันจนถึงจุดที่เราได้สร้าง UI พื้นฐานโดยไม่ต้องเขียนโค้ดบรรทัดเดียว อย่างไรก็ตามมีข้อเสียในการเก็บรหัสและ UI แยกต่างหาก: คุณต้องสร้างความสัมพันธ์อย่างชัดเจนระหว่างซอร์สโค้ดและส่วนต่อประสานผู้ใช้ของคุณโดยการเจาะลึกลงไปในคลาส UIViewController และ ViewController ของโครงการของคุณ

UIViewController เป็นหน่วยการสร้างพื้นฐานของแอปพลิเคชั่น iOS ซึ่งรับผิดชอบการจัดเก็บองค์ประกอบ UI เช่นปุ่มตัวเลื่อนและช่องข้อความ โดยค่าเริ่มต้น UIViewController มีมุมมองที่ว่างเปล่าดังนั้นเราจำเป็นต้องสร้างคลาสแบบกำหนดเองที่ขยาย UIViewController ที่รู้จักในชื่อ View Controller

หากคุณเปิดไฟล์“ ViewController.swift” ของโครงการคุณจะเห็นว่าเทมเพลตแอป Single View ได้สร้าง View Controller ให้เราแล้ว:

ระดับ ViewController: UIViewController {

ในปัจจุบันคลาส ViewController นี้จะสืบทอดพฤติกรรมทั้งหมดที่กำหนดโดย UIViewController แต่คุณสามารถขยายและปรับแต่งพฤติกรรมเริ่มต้นนี้ได้โดยการแทนที่วิธีที่กำหนดโดย UIViewControllerตัวอย่างเช่นปัจจุบันไฟล์ ViewController.swift จะแทนที่เมธอด viewDidLoad () แต่จริง ๆ แล้วไม่ได้ ทำ อะไรก็ได้ยกเว้นวิธีการโทรเวอร์ชันนี้ของ UIViewController:

แทนที่ func viewDidLoad () {super.viewDidLoad () // ทำการตั้งค่าเพิ่มเติมหลังจากโหลดมุมมอง //}

แม้ว่าจะอยู่นอกเหนือขอบเขตของบทช่วยสอนนี้คุณสามารถปรับแต่งการตอบสนองของ View Controller สำหรับเหตุการณ์นี้ได้โดยการเพิ่มโค้ดของคุณเองลงในเมธอด viewDidLoad () ตัวอย่างเช่นที่นี่คือสถานที่ที่คุณมักจะทำการตั้งค่าเพิ่มเติมใด ๆ

เบื้องหลังเทมเพลต Single View App จะสร้างการเชื่อมต่อระหว่างคลาส ViewController.swift ของคุณกับ Main.storyboard โดยอัตโนมัติ ที่รันไทม์ Storyboard ของคุณจะสร้างอินสแตนซ์ของ ViewController และเนื้อหาของ Storyboard ของคุณจะปรากฏบนหน้าจอ

สิ่งนี้ทำให้เราเริ่มต้นได้ แต่เรายังต้องเชื่อมโยงแต่ละองค์ประกอบภายในสตอรีบอร์ดของเรากับไฟล์ ViewController.swift เพื่อให้ซอร์สโค้ดสามารถสื่อสารกับองค์ประกอบแต่ละอย่างเหล่านี้ได้

ภารกิจของเราคือสร้างการเชื่อมต่อระหว่างปุ่มของเราและส่วนที่เหมาะสมของซอร์สโค้ดของเราเพื่อให้แอปพลิเคชันของเราแสดงการแจ้งเตือนทุกครั้งที่ผู้ใช้แตะที่ปุ่ม

การสร้างวิธีการกระทำ

การแตะปุ่มเป็นกิจกรรมดังนั้นเราจำเป็นต้องสร้าง วิธีการกระทำซึ่งเป็นส่วนของรหัสที่กำหนดว่าแอปพลิเคชันของคุณควรตอบสนองต่อเหตุการณ์ใด

วิธีสร้างวิธีการกระทำ:

• ในพื้นที่นำทางให้แน่ใจว่าไฟล์ Main.storyboard ของคุณถูกเลือก
• เปิดตัวแก้ไขผู้ช่วยของ Xcode โดยเลือก ‘มุมมอง> ตัวแก้ไขผู้ช่วย> แสดงตัวช่วยแก้ไข”
• ในแถบตัวเลือกเครื่องมือแก้ไขคลิก“ อัตโนมัติ” จากนั้นเลือก“ อัตโนมัติ> ViewController.swift”
• ณ จุดนี้ทั้งไฟล์ ViewController.swift และ Storyboard ควรปรากฏบนหน้าจอ ในไฟล์ ViewController.swift ค้นหาบรรทัดต่อไปนี้และเพิ่มพื้นที่ว่างสองสามบรรทัดด้านล่าง:

ระดับ ViewController: UIViewController {

• ในกระดานเรื่องราวของคุณเลือกองค์ประกอบ UI ของปุ่มเพื่อให้มีการเน้นสีฟ้า
• ควบคุม - ลากปุ่มไปยังพื้นที่ว่างที่คุณเพิ่งสร้างในไฟล์ ViewController.swift ของคุณ ควรมีเส้นสีน้ำเงินปรากฏขึ้นเพื่อระบุตำแหน่งที่จะสร้างวิธีการกระทำ

• เมื่อคุณพอใจกับตำแหน่งของวิธีการแล้วให้ปล่อยปุ่มและป๊อปอัปจะปรากฏขึ้น
• ในป๊อปอัพเปิดเมนูดรอปดาวน์“ การเชื่อมต่อ” และเลือก“ การกระทำ”
• จากนั้นเปิดเมนูแบบเลื่อนลง "กิจกรรม" และเลือก "แตะด้านใน" ซึ่งเป็นเหตุการณ์ที่จะถูกเรียกใช้เมื่อใดก็ตามที่ผู้ใช้ยกนิ้วภายในปุ่ม
• ตั้งชื่อการกระทำนี้ว่า“ alertController”
• คลิก“ เชื่อมต่อ”

Xcode จะสร้างวิธีการ“ alertController” ต่อไปนี้:

@IBAction func alertController (_ ผู้ส่ง: มี) {}

มาแยกกันว่าเกิดอะไรขึ้นที่นี่:

1. ระบุวิธีการนี้เป็นการกระทำ

แอ็ตทริบิวต์“ IBAction” แสดงวิธีนี้ไปยังตัวสร้างส่วนต่อประสานเป็นการดำเนินการซึ่งช่วยให้คุณเชื่อมต่อวิธีนี้กับวัตถุ UI ของคุณ:

@IBAction

2. ประกาศวิธีการ

ใน Swift เราประกาศวิธีการโดยใช้คำสำคัญ“ func” ตามด้วยชื่อของวิธีการ:

func alertControlle ()

3. กำหนดพารามิเตอร์บางอย่าง

ต่อไปเราจะกำหนดพารามิเตอร์ทางเลือกบางอย่างภายในชุดวงเล็บซึ่งวิธีการของเราจะใช้เป็นอินพุต

ชุดพารามิเตอร์แต่ละชุดควรมีชื่อและประเภทคั่นด้วยเครื่องหมายโคลอน (:)

func alertController (_ ผู้ส่ง: มี) {

ที่นี่วิธีการยอมรับพารามิเตอร์“ ผู้ส่ง” ซึ่งหมายถึงวัตถุที่รับผิดชอบในการกระตุ้นการกระทำเช่นปุ่มของเรา นอกจากนี้เรายังระบุว่าพารามิเตอร์นี้อาจเป็นประเภท“ ใด ๆ ”

ตอนนี้เมื่อใดก็ตามที่ผู้ใช้แตะที่ปุ่มแอพของเราจะเรียกใช้เมธอด alertController (_ sender :)

ตรวจสอบการเชื่อมต่อ

หลังจากสร้างวิธี "alertController" ของเราเราสามารถตรวจสอบว่ามันเชื่อมต่อกับปุ่มอย่างถูกต้อง:

• ในพื้นที่นำทางให้เลือกไฟล์“ Main.storyboard”
• ในแถบเมนูของ Xcode ให้เลือก“ ดู> ยูทิลิตี้> แสดงการเชื่อมต่อของผู้ตรวจสอบ” ตอนนี้ตัวตรวจสอบการเชื่อมต่อควรเปิดขึ้นทางด้านขวาของเวิร์กสเปซ Xcode
• ในพื้นที่ตัวแก้ไขให้เลือกปุ่มของคุณ

ตอนนี้ผู้ตรวจสอบการเชื่อมต่อควรแสดงข้อมูลบางอย่างเกี่ยวกับปุ่มนี้รวมถึงส่วน "เหตุการณ์ที่ถูกส่งแล้ว" ซึ่งมีรายการเหตุการณ์ที่มีอยู่และวิธีการที่เกี่ยวข้องซึ่งจะถูกเรียกเมื่อใดก็ตามที่เกิดเหตุการณ์แต่ละเหตุการณ์

เราจะเห็นว่าเหตุการณ์“ Touch Up Inside” เชื่อมต่อกับวิธีการ“ alertController” ของเราดังนั้นเราจึงรู้ว่าทุกครั้งที่ผู้ใช้โต้ตอบกับปุ่มนี้จะมีการเรียกวิธีการ“ alertController”

อย่างไรก็ตามมีปัญหา: เรายังไม่ได้กำหนดสิ่งที่ควรเกิดขึ้นจริง ๆ เมื่อมีการเรียกใช้เมธอด“ alertController”!

การสร้างกล่องโต้ตอบการแจ้งเตือน

ใน iOS คุณสามารถสร้างการแจ้งเตือนโดยใช้ UIAlertController ซึ่งเทียบเท่ากับ AlertDialog ของ Android

เปิดไฟล์ ViewController.swift ของคุณและเพิ่มรายการต่อไปนี้:

คลาส ViewController: UIViewController {@IBAction func showAlert (_ ผู้ส่ง: ใด ๆ ) {let alertController = UIAlertController (ชื่อ: "ชื่อเรื่อง",: "Hello, world!", PreferredStyle: .alert) alertController.addAction (ชื่อเรื่อง: "ยกเลิก ", style: .default)) self.present (alertController, ภาพเคลื่อนไหว: จริง, เสร็จสิ้น: ไม่มี)}

มาดูกันว่ามีอะไรเกิดขึ้นที่นี่:

1. ประกาศค่าคงที่

ใน Swift คุณประกาศค่าคงที่ด้วยคีย์เวิร์ด“ let” ดังนั้นเราเริ่มต้นด้วยการประกาศค่าคงที่ที่เรียกว่า alertController:

ให้ alertController

2. ตั้งค่าเนื้อหาของ

ตอนนี้เราสามารถกำหนดชื่อของการแจ้งเตือนและ:

ให้ alertController = UIAlertController (ชื่อเรื่อง: "Title",: "Hello, world!")

3. กำหนดรูปแบบ

เนื่องจากนี่เป็นการแจ้งเตือนฉันจึงใช้รูปแบบ "แจ้งเตือน":

ให้ alertController = UIAlertController (ชื่อเรื่อง: "Title",: "Hello, world!", PreferredStyle: .alert)

4. เพิ่มการกระทำ

ต่อไปเราจะเพิ่มปุ่มการกระทำโดยใช้วิธีการ addAction ():

alertController.addAction (UIAlertAction (ชื่อ: "ยกเลิก", ​​สไตล์: .default))

5. แสดงการแจ้งเตือน

เมื่อเรากำหนดค่าวัตถุ UIAlertController ของเราเราพร้อมที่จะแสดงให้ผู้ใช้เห็น ในตัวอย่างต่อไปนี้เรากำลังขอให้ ViewController แสดงวัตถุ alertController ด้วยภาพเคลื่อนไหว:

self.present (alertController ภาพเคลื่อนไหว: จริงเสร็จสมบูรณ์: ไม่มี)}

ทดสอบแอป iOS ที่สมบูรณ์ของคุณ

ถึงเวลาที่จะนำโครงงานของเราไปทดสอบ:

• เลือกปุ่ม“ Run” ในแถบเครื่องมือของ Xcode
• เมื่อแอปพลิเคชันของคุณปรากฏในเครื่องมือจำลอง iOS ให้คลิกปุ่มเพียงปุ่มเดียวการแจ้งเตือนของคุณควรปรากฏบนหน้าจอ!

ห่อ

ในบทช่วยสอนนี้เราได้รับประสบการณ์จริงในการพัฒนาสำหรับ iOS เราสร้างแอปพลิเคชั่นที่เรียบง่ายซึ่งประกอบด้วยปุ่มและการแจ้งเตือนขณะที่ทำความคุ้นเคยกับ Xcode IDE และภาษาการเขียนโปรแกรม Swift

คุณมีแผนที่จะเริ่มพัฒนาแอพสำหรับ iPhone และ iPad หรือไม่? หรือคุณชอบเครื่องมือพัฒนาข้ามแพลตฟอร์มเช่น Flutter แจ้งให้เราทราบในความคิดเห็นด้านล่าง!