Home / Developer  / พัฒนา iPhone Apps วิธีการใช้ UIPanGestureRecognizer จับภาพเลื่อนไปมา

พัฒนา iPhone Apps วิธีการใช้ UIPanGestureRecognizer จับภาพเลื่อนไปมา

ทำการเชื่อม Outlet เข้ากับ Gesture

วิธีการพัฒนา iPhone Apps สำหรับผู้เริ่มต้นกับการใช้ UIGestureRecognizer เบื้องต้นจับการเคลื่อนไหวของตัวอุปกรณ์ เพื่อตอบสนองกับแอพพลิเคชันด้วย XCode 6 ครับอีกหนึ่งบทเรียนที่มีคนสอบถามกันมามากในซีรีย์ของนักพัฒนาแอพพลิเคชันบน iPhone ครับ ซึ่งกว่าจะจัดการเขียนชุด SQLite หรือ Core Data เสร็จคงต้องใช้เวลาอีกสักหน่อยก็จะมีพอมีเวลาคั่นด้วยบทเรียนเล็กๆ น้อยๆ เหล่านี้แทนครับ

Gesture คือการจับการเคลื่อนไหวของตัวอุปกรณ์ iPhone ครับ โดยสิ่งที่เรียกมาช่วยคือ UIGestureRecognizer ผ่านการใช้งานร่วมกับ MainStoryBoard ครับ

เริ่มต้นพัฒนา แอพพลิเคชันบน iPhone ด้วย UIGestureRecognizer

ให้ทำการสร้าง New Project ขึ้นมาใหม่ แล้วเลือก Template เป็น “Single View Application”

ทำการ New Project ขึ้นมาใหม่

ทำการ New Project ขึ้นมาใหม่

ให้หาไฟล์รูปภาพ ประเภท .PNG เป็น Transparent มาเตรียมไว้ในที่นี้ผมใช้ไฟล์ psy.png และ ball.png ตามตัวอย่างข้างล่างครับ

ไฟล์ภาพที่เตรียมไว้

ไฟล์ภาพที่เตรียมไว้

นำรูปภาพทั้ง 2 ไฟล์ไปวางไว้ที่ Project Tree เลยครับ เลือก Copy ด้วยนะครับ ต่อจากนั้นให้ลองเปิดไฟล์ MainStoryBoard ขึ้นมา แล้วลาก UIImageView ไปวางไว้ที่ ViewController 2 ตัวเลือกไฟล์ปลายทางของ UIImage View เป็น psy.png และ ball.png ครับ

เลือก Copy Item

เลือก Copy Item

เลือก UIImageView

เลือก UIImageView

วาง UIImageView 2 ตัวลงบน ViewController ตรงไหนก็ได้

วาง UIImageView 2 ตัวลงบน ViewController ตรงไหนก็ได้

หลังจากวาง UIImageView แล้ว 2 ตัวก็ให้เลือก และปรับขนาดของ UIImageView ให้พอดีกับภาพของเรา ปรับลากวางจัดตำแหน่งตามใจชอบครับ ให้เหมือนตัวอย่าง

ปรับขนาด และ จัดตำแหน่งในหน้า ViewController

ปรับขนาด และ จัดตำแหน่งในหน้า ViewController

ต่อมาจำเป็นจะต้องใช้ UIGesture มาช่วยแล้วให้ลงไปเลือก Object ที่ชื่อว่า Pan Gesture Recognizer มาวางไว้ที่ ViewController ครับ

ทำการเลือก Pan Gesture Recognizer วางใน  ViewController

ทำการเลือก Pan Gesture Recognizer วางใน ViewController

ให้ทำการเลือก Pas Gesture Recognizer ไปวางไว้ที่ View Controller Scene ตามรูปครับ ให้ลากไปวางไว้เลย

ลาก Pan Gesture Recognizer ไปวางใน ViewController Scene

ลาก Pan Gesture Recognizer ไปวางใน ViewController Scene

ต่อจากนั้นให้คลิกที่ UIImageView โดยผมจะคลิกที่รูปของ psy.png ท่าเต้นกังนัมสไตล์ เมื่อคลิกแล้วให้ สังเกตที่แถบ บนขวาที่เขียนว่า  Outlet collector ทำการ Link มันเข้าหากันตาม สเตปรูปภาพด้านล่างเลยครับ

คลิกที่ภาพ แล้วไปลาก Outlet เชื่อมกับ pan gestureRecognizer

คลิกที่ภาพ แล้วไปลาก Outlet เชื่อมกับ Pan Gesture

Recogniser

ทำการเชื่อม Outlet เข้ากับ Gesture

ทำการเชื่อม Outlet เข้ากับ Gesture

ต่อจากนั้นให้เปิดไฟล์ ViewController.h ขึ้นมาแล้วเขียนคำสั่งต่อไปนี้

ต่อจากนั้นให้เปิดไฟล์ ViewController.m ขึ้นมาแล้ว เพิ่ Method ใหม่เข้าไปเลยครับ ตามที่เรากำหนดไว้

ให้ไปที่ไฟล์ MainStoryBoard อีกครั้ง คราวนี้ให้ทำการ เลือกที่ Connection Inspector แล้วลากเชื่อมโยง Link จาก Sent Actions ไปยังหน้าต่าง ViewController ในพื้นที่ว่าง

ลาก Sent Actions ไปวางที่พื้นที่ว่างบน ViewController

ลาก Sent Actions ไปวางที่พื้นที่ว่างบน ViewController

ถ้าเชื่อมถูก ก็จะได้แบบนี้

ถ้าเชื่อมถูก ก็จะได้แบบนี้

ทำตามขั้นตอนดังรูปภาพ

ทำตามขั้นตอนดังรูปภาพ

ลองทำการ Run ตัว Project ดู แล้วลอง ลากรูปภาพของ Psy.png จะเห็นว่ามันสามารถเลื่อนไปมาได้บนหน้าจอแอพพลิเคชัน

iOS Simulator Screen Shot

iOS Simulator Screen Shot

ต่อมาให้เพิ่มคำสั่งในการ คำนวณ เวลาที่มีการ Touch หรือ End เหตุการณ์ที่เราสัมผัสหน้าจอ iPhone ครับ โดยไปที่ไฟล์ ViewController.m ขึ้นมาแล้วก็เพิ่ม คำสั่งเล็กน้อยใน Method เดิมที่ชื่อ handlePan() ครับ

หากใส่ Code ลงไปจะเป็นดังนี้

หากทำการ Run ดูจะพบว่า Console DeBug ของ XCode จะโผล่ขึ้นมา และถ้ามีการ ลากตัว UIImageView ไปมา จะมีการเก็บค่าตำแหน่ง Position ล่าสุดไว้เสมอ เพื่อให้เราทราบพิกัดล่าสุดที่มีการเคลื่อนไหวครับ

สังเกตส่วนของ Debug Console บน XCode

สังเกตส่วนของ Debug Console บน XCode

เป็นไงบ้างครับ ขั้นตอนการใช้ UIPan GestureRecognizer เพื่อได้ไอเดียไปประยุกต์ใช้ค้นหาตำแหน่งที่วาง UIImage ตำแหน่งล่าสุด ยังคงเหลือรูปแบบอีกหลายรูปแบบหลายตัวเช่น Rotate GestureRecognizer และ Resize อีกครับ ไว้จะกลับมาเพิ่มเติมให้ศึกษาอีกนะครับ

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

POST A COMMENT