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

143

Phần 1 – Phần 2

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

Swipe Gesture

Swipe Gesture là gesture giúp cho chúng ta bắt được sự kiện khi người dùng vuốt ngón tay lên 1 UIView nào đó được gắn gesture này, chúng có thể nhận ra hướng vuốt của user: từ trái, phải, trên, dưới.

Interface Builder

Trong project đã tạo ở phần 1 và phần 2, chúng ta sẽ thay image view bằng 1 đối tượng UILabel, ý tưởng sẽ là cho UILabel này hiển thị chiều vuốt của user.

Tiếp theo, trong khung UI của Xcode, tìm kiếm đối tượng có tên là Swipe Gesture

Screen Shot 2016-11-10 at 10.30.31

Nắm Swipe Gesture kéo thả vào trong label của chúng ta.

Đối với gesture này sẽ có 1 số thuộc tính chúng ta cần để ý:

Screen Shot 2016-11-10 at 10.32.12 Screen Shot 2016-11-10 at 10.32.28

Với thuộc tính swipe chúng ta có thể set chiều hướng để gesture này có thể bắt được (chúng ta chỉ có thể set được 1 giá trị cho thuộc tính này, ở đây sẽ là Right). Thuộc tính touches là số ngón tay user được dùng để vuốt (xem lại Tap Gesture để biết thêm chi tiết).

Sau đó, 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-10 at 10.38.18

Trong action vừa mới kết nối, thêm dòng lệnh sau để có thể hiển thị chiều vuốt của user lên label (lưu ý: hãy nhớ kết nối Label vào Viewcontroller):

Dòng code trên để kiểm tra chiều hướng của gesture này có phải là Right hay không??? Nếu đúng thì Label của chúng ta sẽ đổi chữ. Với cách này, các bạn có thể gắn nhiều swipe gesture vào Label và cho Label hiển thị đúng với chiều hướng của swipe gesture đó.

Build và run app để kiểm tra kết quả. Nhớ check user interaction enabled.

Sẽ có sự nhầm lẫn về tên gọi chiều hướng và cách vuốt:

  • Right: user sẽ phải vuốt từ phía trái sang phải của màn hình
  • Left: user sẽ phải vuốt từ phía phải sang trái của màn hình
  • Up: user sẽ phải vuốt từ phía dưới lên
  • Down: user sẽ phải vuốt từ trên xuống

Code

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

Với thuộc tính .direction sẽ là Right và tham số action của UISwipeGestureRecognizer 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à handleSwipe(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ả.

Screen Edge Pan Gesture

Screen Edge Pan Gesture là gesture giúp chúng ta bắt được sự kiện khi user vuốt từ cạnh của màn hình (chúng ta sẽ có 4 cạnh: trái, phải, trên, dưới). Có một vài điều cần lưu ý khi sử dụng gesture này:

  • Vì gesture này phải sử dụng dựa trên cạnh của màn hình thiết bị, nhưng đối với cạnh trên của iPhone hoặc iPad khi vuốt sẽ hiển thị trung tâm thông báo (notification center) và cạnh dưới sẽ là trung tâm kiểm soát (control center). Chính vì vậy, khi sử dụng gesture này chúng ta sẽ rất ít khi áp dụng cho cạnh trên và cạnh dưới màn hình, sẽ rất khó bắt đúng sự kiện vuốt ngón tay của user. Trong bài viết này, chúng ta chỉ tìm hiểu về 2 cạnh còn lại: trái và phải.
  • Cũng như thế, gesture này được sử dụng dựa trên cạnh của màn hình thiết bị, nên tất cả những đối tượng UIView muốn gắn gesture này vào thì UIView đó phải được layout sát cạnh của màn hình, trong bài viết này, chúng ta sẽ set frame cho UILabel nằm sát 2 cạnh trái, phải của màn hình.

Interface Builder

Set lại frame cho label của chúng ta:

Screen Shot 2016-11-10 at 11.06.19

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à Screen Edge Pan Gesture:

Screen Shot 2016-11-10 at 11.07.42

Nắm Gesture này kéo thả vào trong label của chúng ta.

Đối với gesture này sẽ có 1 số thuộc tính chúng ta cần để ý:

Screen Shot 2016-11-10 at 11.08.49

Với Edge chúng ta có 4 sự lựa chọn nhưng ở đây như đã nói ở trên, chúng ta chỉ check vào 1 trong 2 Left và Right là 2 cạnh của màn hình, các thuộc tính còn lại cứ để mặc định như trong hình

ScreenEdgePanGesture

Sau đó, 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-10 at 11.21.31

Trong action vừa mới kết nối, thêm dòng lệnh sau để có thể hiển thị chiều vuốt từ cạnh của user lên label:

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

Code

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

Với thuộc tính .edges sẽ là .left và tham số action của UIScreenEdgePanGestureRecognizer 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à handlePanEdge(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ả

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