Binding action

ทำปุ่มให้กดได้ เริ่มจาก Controller ใหม่

เราเริ่มด้วยการสร้าง ViewController ให้หน้า Add new item

New File เลือก Cocoa Touch Class แล้วกด Next

ถัดมาตั้งชื่อ Controller ใหม่ของเราเป็น AddNewItemViewController โดยเลือกให้ Subclass เป็น UIViewController

ไม่เลือก Also create XIB file

Language เป็น Swift แล้วกด Next

เราต้องผูกหน้า Add new item ใน Main.storyboard ให้รู้ว่าต้องใช้ Controller ใหม่ที่เราเพิ่งสร้าง

โดยการเลือกหน้า Add new item ใน Main.storyboard จากนั้นเลือกที่ Identity Inspector กรอกชื่อ AddNewItemViewController ลงในช่อง Class แล้วกด enter

ระบุ class เป็น AddNewItemViewController ใน Identity Inspector

ผูก Action ปุ่มกับ ViewController

ให้เราเลือก Add new item ใน storyboard แล้วเปิด Assistant Editor ที่เป็นรูปวงกลมซ้อนกันด้านบนทางขวาของ Xcode

Xcode จะเปิด AddNewItemViewController ให้อัตโนมัติ

เปิด Assistant Editor Xcode จะเปิด AddNewItemViewController ให้อัตโนมัติ

หาก Xcode ไม่สามารถแสดงได้ถูกต้องให้เราเลือกเองดังรูป

จากนั้นให้กด Ctrl ค้างแล้วลากจากปุ่ม Done เข้ามาที่ AddNewItemViewController

เลือก Connection เป็น Action ตั้งชื่อว่า doneButtonDidTap ตั้ง Type เป็น UIBarButtonItem จะปรากฎฟังก์ชั่นขึ้นที่ AddNewItemViewController

สร้าง Action โดยลากจาก Storyboard

@IBAction เป็นการระบุให้ Storyboard มองเห็น โดย @IBAction จะเห็นเป็น Action และ @IBOutlet จะเห็นเป็น Outlet

Action คือจุดที่รับ event จาก view เช่น รับ event จากการกดปุ่ม

Outlet คือการผูก view เพื่อ Set หรือ Get property จาก view นั้น เช่น ต้องการอ่านค่าจากช่อง TextField ที่ผู้ใช้กรอกเข้ามา

เราสามารถลากจาก code กลับไปที่ Storyboard ได้ โดยสร้างฟังก์ชั่นตามนี้

@IBAction func cancelButtonDidTap(_ sender: UIBarButtonItem) {
}

จากนั้นลากจากวงกลมเล็ก ๆ หน้าฟังก์ชั่นกลับไปที่ปุ่ม Cancel

ผูก Action โดยการลากจาก code ไป storyboard

ทดสอบว่า action ใช้งานได้โดยการ print log ออกมา

@IBAction func doneButtonDidTap(_ sender: UIBarButtonItem) {
    print("done")
}

@IBAction func cancelButtonDidTap(_ sender: UIBarButtonItem) {
    print("cancel")
}

เมื่อเรารันแล้วทดสอบกดปุ่มจะเห็น log ออกมา

โค้ดสุดท้ายของ AddNewItemViewController ในบทนี้

AddNewItemViewController.swift

import UIKit

class AddNewItemViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func doneButtonDidTap(_ sender: UIBarButtonItem) {
        print("done")
    }

    @IBAction func cancelButtonDidTap(_ sender: UIBarButtonItem) {
        print("cancel")
    }

}

ข้อควรระวัง

Action หรือ Outlet ที่เราใช้การผูกไปแล้ว ถ้า rename ทีหลังอาจทำให้แอพ Crash ได้เพราะเมื่อเรา rename ใน code ส่วนของ Storyboard จะยังใช้ชื่อเดิมอยู่ โดยวิธีที่ถูกต้องคือการคลิ๊กขวา เลือก Refactor -> Rename

ในกรณีที่มีปัญหาเราสามารถตรวจสอบได้จากที่ Document Outline หรือ Connections Inspector

ที่ Document Outline ให้คลิ๊กขวาที่ Add new item controller ถ้ามีปัญหาจะเจอสัญลักษณ์ Warning แก้โดยกด x เพื่อลบการเชื่อมออก

ที่ Connections Inspector ให้คลิ๊กที่ Add new item controller แล้วกดที่ Connections Inspector ถ้ามีปัญหาจะเจอสัญลักษณ์ Warning แก้โดยกด x เพื่อลบการเชื่อมออก