การทำ App Interactive

ในบทนี้เราจะแนะนำสิ่งใหม่ ๆ และคุณสมบัติ UI ที่ iOS มีให้สำหรับการโต้ตอบกับผู้ใช้ เราจะเพิ่ม -

• ฟิลด์ข้อความ
• Labels
• ปุ่มและการทำงาน

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

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

การเพิ่มฟิลด์ข้อความ

เราจะสร้างโครงการใหม่อีกครั้ง ควรจะจัดการได้ง่ายเนื่องจากเราได้พูดถึงวิธีการสร้างโครงการใหม่ใน Xcode แล้ว

เอาล่ะตอนนี้เราจะสร้างโครงการใหม่ชื่อ“ อายุสุนัขของฉัน” หลังจากสร้างโปรเจ็กต์นี้เราจะคลิกที่ไฟล์“ Main.storyboard” ของเราและทำตามขั้นตอนที่ระบุด้านล่าง

• ในแถบค้นหาของบานหน้าต่างยูทิลิตี้ (อยู่ที่มุมล่างขวาของ Xcode) ให้ค้นหาป้ายกำกับ คลิกและลากป้ายนั้นไปที่ main.storyboard / (View) จากนั้นดับเบิลคลิกที่ป้ายกำกับและเปลี่ยนชื่อเป็น -“ My Dog's Age”

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

การเพิ่มปุ่มในมุมมองของเรา

ตอนนี้ค้นหาปุ่มในแถบค้นหา ลากไปที่มุมมองของคุณดับเบิลคลิกและเปลี่ยนชื่อเป็น "คำนวณ"

การเพิ่มป้ายกำกับเพื่อดู

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

Tip - หากคุณไม่สามารถเปลี่ยนชื่อได้ด้วยการดับเบิลคลิกให้เลือกรายการและในบานหน้าต่างยูทิลิตี้ - Attribute inspectorมีชื่อของรายการนั้นแก้ไขที่นั่นแล้วกด Return ตามที่แสดงในภาพหน้าจอต่อไปนี้

ตอนนี้ Main.storyboard ของคุณควรมีลักษณะเหมือนภาพหน้าจอต่อไปนี้

เราไม่ได้หยุดเพียงแค่นี้ แต่ตอนนี้เราจะพูดถึงวิธีการเพิ่มภาพลงใน main.storyboard

การเพิ่มรูปภาพในมุมมองของเรา

เริ่มต้นด้วยการค้นหารูปภาพซึ่งเราต้องการเพิ่มในโปรเจ็กต์ก่อน คุณสามารถดาวน์โหลดภาพด้านล่าง -

คัดลอกภาพนี้ไปยังโครงการของคุณหรือลากภาพนี้ไปยังโครงการของคุณจากนั้นคุณจะเห็นหน้าต่างต่อไปนี้

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

ไปที่ Utility Pane → Object Library แล้วค้นหา Image views ลากมุมมองภาพไปที่มุมมองของคุณ ตอนนี้มุมมองของคุณควรมีลักษณะเหมือนภาพหน้าจอด้านล่าง

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

ตอนนี้คุณได้เลือกภาพสำหรับมุมมองภาพของคุณแล้วมุมมองสุดท้ายของคุณควรมีลักษณะเหมือนภาพหน้าจอต่อไปนี้ นี่เป็นสิ่งเดียวที่เราจะทำกับ main.storyboard ของเราสำหรับแอปพลิเคชันนี้

นี่คือมุมมองของเราตอนนี้หลังจากเพิ่มองค์ประกอบ UI ทั้งหมด

หลังจากนี้เรามีการใช้งานโค้ดเชิงตรรกะของเราซึ่งเราจะดำเนินการต่อหากคุณดำเนินการจนถึงขั้นตอนนี้

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

ตอนนี้มุมมองของเราควรมีลักษณะเหมือนภาพหน้าจอต่อไปนี้

การเพิ่มฟังก์ชันการทำงานให้กับแอปพลิเคชันของเรา

จนถึงตอนนี้แอปพลิเคชันของเราเป็นเพียงแอปพลิเคชันแบบคงที่ซึ่งไม่ตอบสนองต่อสิ่งใด ๆ และไม่เปลี่ยนแปลงการโต้ตอบของผู้ใช้

ตอนนี้มาถึงส่วนหลักของการเชื่อมต่อ UI Elements กับ Code ของเราแล้ว UI จะเปลี่ยนไปตามการป้อนข้อมูลของผู้ใช้ “ViewController.swift” ไฟล์เป็นไฟล์หลักของเราซึ่งเราจะเขียนโค้ดสำหรับมุมมองปัจจุบันของเรา

Note- ขณะนี้เรากำลังทำงานกับมุมมองเดียวในภายหลังเมื่อเราพูดคุยเกี่ยวกับหลายมุมมอง เราจะพูดถึงวิธีที่ไฟล์ต่างๆควบคุมมุมมองที่แตกต่างกัน

คลิกที่ช่องข้อความกด control แล้วลากเคอร์เซอร์ไปที่ Second part of screen นั่นคือไฟล์ viewcontroller.swift คุณจะเห็นเส้นสีน้ำเงินเชื่อมระหว่างมุมมองของเราและไฟล์ที่รวดเร็ว เมื่อคุณปล่อยเมาส์คุณจะเห็นป๊อปอัปขอให้ป้อนข้อมูล

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

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

ในขั้นตอนนี้ viewcontroller.swift ของเราจะมีลักษณะดังนี้ -

ตอนนี้ภายในการทำงานของปุ่มของคุณให้เพิ่มบรรทัดต่อไปนี้ -

var age = Int(enteredAge.text!)! * 8 
yearsLabel.text = String(age);

Tip- เราไม่จำเป็นต้องเพิ่มอัฒภาคที่จะจบในบรรทัดรวดเร็ว แต่แม้ว่าเราใส่อัฒภาคคอมไพเลอร์จะไม่รายงานข้อผิดพลาดใด

ในโค้ดด้านบนบรรทัดแรกจะประกาศตัวแปร "อายุ" ซึ่งเราจะพูดถึงในบทถัดไป จากนั้นเรากำหนดค่าที่ป้อนโดยผู้ใช้โดยการแปลงเป็นจำนวนเต็มและคูณด้วย 8

ในบรรทัดที่สองเรากำหนดค่า "อายุ" ให้กับป้ายกำกับผลลัพธ์ของเรา ในขั้นตอนนี้ตัวควบคุมมุมมองของเราจะมีลักษณะดังนี้ -

ตอนนี้เราจะเรียกใช้แอปพลิเคชันของเราและนี่คือลักษณะที่จะปรากฏ

Tip- หากแป้นพิมพ์ของคุณไม่ปรากฏในการรันครั้งแรกให้เปิดโปรแกรมจำลองของคุณคลิกที่ฮาร์ดแวร์ไปที่แป้นพิมพ์และคลิกที่สลับแป้นพิมพ์ซอฟต์แวร์

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