โยกย้าย โยกย้าย เรามาโยกย้ายภาพออกกำลังนิ้วกัน

สวัสดีค่ะ ครั้งนี้มาช้าไปหน่อย พอดีไม่มีอะไรยาก เลยเรื่อยๆ ครั้งนี้เป็นการย้ายภาพที่แสดงบนหน้าแอปพลิเคชันด้วยการ Drag ไปยังตำแหน่งที่เราต้องการ จริงๆ เป็นอะไรที่ง่ายมากๆ ค่ะ จะยากก็ตอนไปประยุกต์ใช้เนี่ยแหล่ะ มาเริ่มดีกว่า โจทย์ของเรามีอยู่ว่า สร้างแอปพลิเคชันขึ้นมา 1 อัน เมื่อผู้ใช้งานกดปุ่ม Add Image แล้ว จะมีรูปแสดงขึ้นมา จากนั้นเราก็ย้ายรูปนั้นได้ตามต้องการ ดูเหมือนง่ายเนอะ ก็ง่ายจริงๆ ค่ะ

เริ่ม Add Image

หลังย้าย Image

มาเริ่มดีกว่า บทความนี้ไม่ยาว เริ่มจากเราสร้างโปรเจคขึ้นมาแล้วที่ Main.storyboard วาง UIButton ลงไป 1 อัน ปรับข้อความเป็น Add Image เนอะ จะได้สื่อหน่อย จากนั้นประกาศ IBActionให้ปุ่มรอไว้ก่อนเลยจ้าาาาา😁

อธิบายกันหน่อย ตัวของรูปภาพเราจะมองเป็น Object สักก้อนที่มีการทำงานเป็นของมันเองนั่นคือ มีรูปเป็นเอกลักษณ์ของตัวเอง(เทียบกับ Object คือ Attribute) สามารถขยับไปมาได้ (เทียบกับ Object คือ Method) ดังนั้นถ้าเราอยากได้ Object ที่มีการทำงานเหมือนกันหลายๆ ก้อน เพียงแค่เราสร้าง Object นั้นขึ้นมาจาก Class ต้นฉบับของมันนั่นแหล่ะ พอมาถึงตอนนี้เราก็เลยต้องสร้าง Class ต้นฉบับกันค่ะ สร้าง File ใหม่มา 1 File โดยเลือก subclass เป็น UIImageView นะคะ

สร้าง File ใหม่

จากนั้น File ที่สร้างมาเราจะใส่คำสั่งดังนี้

ซึ่ง func touchesBegan จะเป็นการทำงานเมื่อผู้ใช้เริ่มแตะที่ Object เราอยากให้ทำงานอะไร ก็ใส่การทำงานลงไปใน func นี้ค่ะ ส่วน func touchesMoved จะเป็นการทำงานหลังจากที่ผู้ใช้ย้ายตำแหน่งแล้วเราต้องการให้ทำอะไรนั่นเอง

เมื่อเราได้ Class แล้ว คราวนี้เรามาเริ่มสร้างการทำงานของแอปพลิเคชันกันค่ะ โดยเราจะไปที่ไฟล์ ViewController.swift ใน func IBAction ของปุ่ม Add Image เราจะใส่คำสั่ง

สำหรับ Object newImg นั้น เราจะประกาศไว้ก่อน function แล้วนะคะ ว่า var newImg:imgObj!

คำสั่ง CGRext(x:100, y:150, width: 50, height:50) คือคำสั่งที่ใช้กำหนดตำแหน่งที่จะแสดงรูปภาพและความกว้างความสูงของภาพที่อยากให้แสดงหน้าแอปพลิเคชัน

เพียงเท่านี้ พอทดสอบการทำงานของแอปพลิเคชันดู กดปุ่ม Add Image แต่ละครั้งปรากฏว่าเราได้รูป เพิ่มขึ้นมาเท่าจำนวนที่เรากด และสามารถย้ายได้ทุกรูป

ทดลองกด Add Image หลายๆ ครั้ง

แต่ถ้าเราอยากได้ว่า เมื่อกด Add Image ครั้งหนึ่งแล้ว ครั้งต่อไปต้องเอารูปเก่าออก แล้วแสดงรูปใหม่ในตำแหน่งที่เรากำหนดไว้ นั่นคือ ให้แสดงแค่รูปเดียวเสมอ ไม่เอาหลายรูปแบบนี้น่ะ เงื่อนไขนี้เป็นแนวคิดของแต่ละคน เอาง่าย ประกาศ var flag = false ไว้นอก func IBAction ของปุ่ม Add Image จากนั้นข้างใน function เราจะใส่

เพียงเท่านี้เองค่ะ ลองทดสอบการทำงานกันดูนะคะ 😉😉😉