Hướng dẫn sử dụng Gesture trong iOS (phần 2)

46

Phần 1

Phần 1 chúng ta đã cùng tìm hiểu về cách sử dụng Tap Gesture và Long Press Gesture, ở phần 2 này, chúng ta sẽ tiếp tục với Pinch Gesture, Rotation Gesture và Pan Gesture.

Pinch Gesture

Pinch Gesture là gesture hỗ trợ việc bắt sự kiện 2 ngón tay của user co giãn trên đối tượng UIView, trong trường hợp này là cho phép user zoom lớn nhỏ 1 tấm hình.

Interface Builder

Cũng với project đã tạo trong phần 1 trước đó, trong khung chứa các thành phần UI của Xcode, tìm kiếm đối tượng có tên là Pinch Gesture

Screen Shot 2016-11-09 at 14.20.57

Nắm Pinch Gesture kéo thả vào trong image view của chúng ta, và kết nối đối tượng này vào Viewcontroller và thiết lập cấu hình như sau:

Screen Shot 2016-11-09 at 14.33.08

 

Trong action vừa mới kết nối, thêm những dòng lệnh sau để có thể thu phóng image view theo độ co giãn của 2 ngón tay user:

Trong 2 dòng code trên, dòng thứ nhất dùng để scale image view bằng thuộc tính transform; dòng thứ hai là set giá trị scale của sender về bằng 1, nếu không có dòng này thì imageView của chúng ta sẽ scale lên nhiều lần so với lại độ co giãn của ngón tay user.

Lưu ý: để sử dụng được 2 ngón tay trên iOS Simulator, vui lòng xem lại hướng dẫn ở phần 1

Build và run để kiểm tra kết quả.

Code

Để add 1 pinch gesture cho image view, việc đầu tiên là kết nối image view của bạn vào Viewcontroller.swift, sau đó, trong hàm viewDidLoad() thêm dòng lệnh như sau để tạo gesture cho image view:

Với tham số action của UIPinchGestureRecognizer sẽ là tên của 1 func bên ngoài viewDidLoad() (các bạn có thể tuỳ ý đặt tên func này, ở đây chúng ta sẽ lấy ví dụ tên func này là handlePinch(sender:)) và sau đó thêm những dòng code sau vào func này:

Build và run app để thấy kết quả.

Rotation Gesture

Rotation Gesture là gesture hỗ trợ việc bắt sự kiện khi user đặt 2 ngón tay lên view và xoay, trong ví dụ sau chúng ta sẽ cho user xoay 1 image view.

Interface Builder

Trong khung chứa các thành phần UI của Xcode, tìm kiếm đối tượng có tên là Rotation Gesture:

Screen Shot 2016-11-09 at 15.14.02

Kéo thả đối tượng này vào image view đã tạo trước đó và kết nối vào Viewcontroller, sau đó thiết lập các giá trị như sau:

Screen Shot 2016-11-09 at 15.16.15

Trong action vừa connect, thêm những dòng code sau để thực hiện xoay image view:

Trong 2 dòng code trên, dòng code thứ nhất để set cho sender.view (trường hợp này chính là imageView) xoay theo ngón tay của user (2 ngón); dòng code thứ hai để set giá trị rotation của sender về 0, nếu không có dòng này thì image view của chúng ta sẽ xoay với góc xoay rất lớn so với góc xoay của 2 ngón tay user.

Build và run app để thấy kết quả.

Code

Để add 1 rotation gesture cho image view, việc đầu tiên là kết nối image view của bạn vào Viewcontroller.swift, sau đó, trong hàm viewDidLoad() thêm dòng lệnh như sau để tạo rotation gesture cho image view:

Với tham số action của UIRotationGestureRecognizer sẽ là tên của 1 func bên ngoài viewDidLoad() (các bạn có thể tuỳ ý đặt tên func này, ở đây chúng ta sẽ lấy ví dụ tên func này là handleRotate(sender:)) và sau đó thêm những dòng code sau vào func này:

Build và run app để kiểm tra kết quả.

UIPanGestureRecognizer

UIPanGestureRecognizer là gesture hỗ trợ chúng ta bắt sự kiện khi user chạm vào 1 UIView nào đó và di chuyển ngón tay trên màn hình, trong ví dụ này chúng ta sẽ cho phép user chạm vào image view và kéo image view di chuyển theo ngón tay user.

Interface Builder

Trong khung chứa các thành phần UI của Xcode, tìm kiếm đối tượng có tên là Pan Gesture:

Screen Shot 2016-11-09 at 16.04.42

Kéo thả đối tượng này vào image view đã tạo trước đó và kết nối vào Viewcontroller, sau đó thiết lập các giá trị như sau:

Screen Shot 2016-11-09 at 16.06.07

Trong action vừa connect, thêm những dòng code sau để thực hiện di chuyển image view theo ngón tay user:

Trong 3 đoạn code trên, đoạn thứ nhất để bắt toạ độ di chuyển của ngón tay user; đoạn code thứ hai set vị trí center của image view di chuyển theo toạ độ mới vừa lấy được ở đoạn code thứ nhất; đoạn code thứ ba là quan trọng để điều khiển image view di chuyển theo phù hợp với toạ độ mới lấy được.

Build và run app, bạn chỉ cần click vào image view và rê chuột đi xung quanh (nếu test bằng iOS Simulator).

Code

Để add 1 pan gesture cho image view, việc đầu tiên là kết nối image view của bạn vào Viewcontroller.swift, sau đó, trong hàm viewDidLoad() thêm dòng lệnh như sau để tạo pan gesture cho image view:

Với tham số action của UIPanGestureRecognizer sẽ là tên của 1 func bên ngoài viewDidLoad() (các bạn có thể tuỳ ý đặt tên func này, ở đây chúng ta sẽ lấy ví dụ tên func này là handlePan(sender:)) và sau đó thêm những dòng code sau vào func này:

Build và run app để kiểm tra kết quả.

Xem tiếp Phần 3

Lương Nhật Lâm © – IDE Academy