GUI เบื้องต้นสำหรับ iOS App

วันนี้เราจะมาทำความรู้จักเกี่ยวกับ GUI ของ iOS App พร้อมทั้งทำความรู้จักเกี่ยวกับ IBOutlet และ IBAction กันนะครับ ไม่พูดพลำทำเพลงอะไรละ เร่ิมกันเลย

Interface Builder

GUI เบื้องต้นวันนี้เป็น Default User Interface (UI) ที่ Apple มีให้ใน iOS อยุ่แล้วครับ ถ้าดูๆ ไปแล้วผมว่าเป็นอะไรที่เรียบง่าย Simplify และถ้าจัดวางองค์ประกอบให้ดีๆ ก็ทำให้ App ที่เราสร้างขึ้นดูสวยงามได้ครับ โดย UI แบบนี้ทุกคนสามารถ ทำได้ง่ายๆ ผ่าน Interface Builder (IB) เลยครับ หลักการก็ไม่มีอะไรครับ Drag and Drop ลาก UI ที่เราต้องการจาก IB ลงมาใน View ดังรูป เช่น
– TextFiled
– Slider
– Button
– Segment
Xib Fileก็แค่ Drag and Drop ลงมา แล้วมันจะทำงานได้ยังไงอ่ะ ถูกต้องแล้วครับ สิ่งที่เราต้องทำต่อไปก็คือ IBOulet และ IBAction นั้นเองครับ ที่จะทำหน้าที่ในการสั่งให้ UI เหล่านี้ทำงานได้

IBOutlet เพื่อให้เข้าใจง่ายๆ เลย ไม่ต้องวิชาการจ๋า ก็คือ ถ้าอยากให้ IB กับ Code เรารู้จักกันก็ประกาศขึ้นมาซะเลยจะได้มองเห็นแล้ว เชื่อมกันได้

ส่วน IBAction ตามชื่อครับ Action ผมมองว่ามันก็คือ Method หรือ Function นั่นเอง ถ้าเราต้องการให้มีการทำงานอะไรเมื่อเกิด Action ขึ้นมาจัดการที่ตรงส่วนนี้เลย

เพื่อให้เห็นภาพของ IBOutlet และ IBAction ผมขอยกตัวการการทำงานง่ายๆ คือ ผมจะมี View อยู่ 1 ตัว ซึ่งใน View นี้จะประกอบด้วย UI คือ Button และ Label โดยที่การทำงานของโปรแกรมนี้คือให้กดปุ่ม Button ชื่อว่า Show Message แล้วไปแสดงผลใน Label ว่า “Hello Message”

เอาละครับ สิ่งแรกที่เราจะต้องทำคือประกาศให้ UI กับ Code รู้จักกันก่อน ก็คือ IBOutlet ครับ

IBOutlet UILabel *myLabel;

ตอนนี้เราก็จะมี Object ที่ชื่อ myLabel ที่ IB จะมองเห็นแล้ว จากนั้นก็ทำการเชื่อม ระหว่าง IB กับ Code ดังภาพด้านล่าง

สำหรับวิธีการเชื่อม UI กับ Code ก็ง่ายๆครับ คลิ๊กขวาที่ File’s Owner ถ้าเราได้ประกาศ IBOutlet ไว้แล้วก็จะเห็นชื่อ Object ของเรา ซึ่งก็คือ myLabel ก็ให้ลากมาที่ UILabel ที่เราสร้างขึ้นมาจาก IB ดังภาพครับ (ถ้าหากไม่เจอ Object ที่เราประกาศไว้ กลับตรวจสอบให้แน่ใจว่าได้ประกาศ IBOutlet ไว้หรือยัง)

IBOutletแค่นี้เราก็เชื่อม UI กับ Code ให้รู้จักกันได้แล้ว ต่อไปเราจะมาดูกันว่าเมื่อผู้ใช้กดปุ่ม Show Message จะทำให้แสดงผลออกมาใน UILabel ที่เราเพิ่งทำมาได้ยังไง เฉลยคือ IBAction ครับ ง่ายๆเลยก็ประกาศ IBAction ขึ้นมาทั้งใน File .h และ .m

// .h
-(IBAction) pressShowMessage;

// .m
-(IBAction) pressShowMessage {
[myLabel setText:@”Hello Message”];
}

จะเห็นว่าเราได้ประกาศ IBAction หรือ Method ของเราขึ้นมาแล้วทั้งใน .h และ .m ก็เหลือแค่เชื่อม ปุ่ม เข้ากับ IBAction นี้ ไปดูกันเลยครับ หลักการก็คือให้กดปุ่ม control ค้างไว้แล้ว คลิ๊กลากจาก Button มายัง File’s Owner แล้ววาง จะให้ ชื่อของ IBAction ที่เราประกาศไว้ ก็ให้คลิ๊กเลือก ดังภาพ ก็เสร็จขึ้นตอนการเชื่อม IBAction กับ UI แล้ว

IBAction

ไว้พบกันใหม่ใน Entry ต่อไปครับ ^^

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s