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 แล้ว กดปุ่ม Adjust Editor Options เพื่อเปลี่ยนเป็นโหมด Assistant Editor เมื่อเลือกแล้ว Xcode จะเปิด AddNewItemViewController ให้อัตโนมัติ

เปิด Assistant Editor Xcode จะเปิด AddNewItemViewController ให้

ในกรณีที่ Xcode แสดง Editor เปล่าไม่แสดงไฟล์ AddNewItemViewController ให้ปิดแล้วเปิดใหม่

หากยังไม่สามารถเปิดได้ให้ข้ามลงไปที่หัวข้อ กรณีที่ไม่สามารถเปิด Assistant ได้

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

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

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

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

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

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

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

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

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

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

กรณีที่ไม่สามารถเปิด Assistant ได้

ให้เราเปิดไฟล์ AddNewItemViewController.swift แล้วเพิ่มโค้ดให้เป็นแบบนี้

class AddNewItemViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func doneButtonDidTap(_ sender: UIBarButtonItem) {
    }

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

บรรทัดที่ 7-8 เป็น ฟังก์ชั่นที่เราเตรียมไว้สำหรับปุ่ม done บรรทัดที่ 10-11 เป็น ฟังก์ชั่นที่เราเตรียมไว้สำหรับปุ่ม cancel

จากนั้นเราเปิด Main.storyboard แล้วคลิ๊กขวาที่ Add New Item controller ให้เราเชื่อมฟังก์ชั่นที่เราสร้างกับปุ่มใน document outline

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

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

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

ทดสอบ

ทดสอบว่า 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 เพื่อลบการเชื่อมออก