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

71

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách sử dụng các gesture và cách khởi tạo cả hai cách: bằng code và trên Interface Builder.

Gesture là một đối tượng giúp cho người dùng có thể tương tác với bất kỳ một UIView nào, đó là class UIGestureRecognizer. Trường hợp các bạn sẽ thường sử dụng một đối tượng gesture đó là khi các bạn muốn cho người dùng tương tác với các đối tượng trong một màn hình (ví dụ: UIImageView, UILabel…).

Trong bài hướng dẫn này, chúng ta sẽ cùng tìm hiểu 7 đối tượng gesture có trong XCode:

Hướng dẫn sử dụng

UITapGestureRecognizer

Tiến hành khởi tạo 1 project XCode mới và chúng ta sẽ sử dụng Swift 3.

Interface Builder

Trong ví dụ này, chúng ta sẽ sử dụng gesture với một UIImageView. Vào main.storyboard, tìm kiếm trong khung chứa các UI của XCode đối tượng có tên là UIImageView, kéo thả vào trong màn hình:

Screen Shot 2016-11-08 at 14.14.57

Tiếp theo, tìm đối tượng có tên là UITapGestureRecognizer:

Screen Shot 2016-11-08 at 11.59.38

Kéo thả đối tượng này vào trong ImageView của bạn (lưu ý: phải đặt chính xác vào trong Image View, không để ra super view):

Screen Shot 2016-11-08 at 14.16.58

Trên thanh của ViewController sẽ xuất hiện thêm 1 icon như thế này:

Screen Shot 2016-11-08 at 14.18.25

Chúng ta có thể để mặc định các thuộc tính của Tap Gesture như sau:

Screen Shot 2016-11-08 at 14.21.53

Có 2 thuộc tính quan trọng ở đây các bạn cần lưu ý:

  • Taps: thuộc tính này ám chỉ số lần tương tác (chạm) vào view.
  • Touches: thuộc tính này ám chỉ số ngón tay mà cho phép người dùng được tương tác.

Ở đây Taps và Touches là 1, nghĩa là gesture này cho phép nhận tương tác với 1 ngón tay và chỉ 1 lần tương tác (chạm) là sẽ thực hiện hành động.

Tiếp theo, kết nối tap gesture vào file Viewcontroller.swift, thiết lập connection là action và đặt tên cho action đó:

Screen Shot 2016-11-08 at 14.31.35 Screen Shot 2016-11-08 at 14.31.49

Ở đây có 1 lưu ý nhỏ, những view nào mà các bạn thêm 1 gesture cho nó, chúng ta phải đảm bảo rằng thuộc tính user interaction enabled được kích hoạt (như trường hợp này là Image View):

Screen Shot 2016-11-08 at 14.41.39

Để ứng dụng thêm sinh động, các bạn có thể kiếm hình ảnh và chèn vào Image View của chúng ta.

Bây giờ, user đã có thể tương tác được với Image View, phần còn lại của action là do chúng ta quyết định, để cho đơn giản, trong handleTap, chúng ta sẽ dùng lệnh print() để kiểm tra:

Build và run ứng dụng để thấy kết quả.

Code

Để tạo Tap Gesture bằng code, kết nối đối tượng muốn thêm gesture vào file Viewcontroller.swift:

Sau đó, khởi tạo 1 biến có kiểu là UITapGestureRecognizer(), thiết lập 1 số thuộc tính của biến này và add vào imageView:

với selector ở đây là func mà chúng ta định nghĩa bên ngoài viewDidLoad(), nó sẽ được gọi khi tap gesture được tương tác bởi user:

Build và run ứng dụng để thấy kết quả.

Nếu muốn user chạm hai lần mới gọi handleTap(), thiết lập giá trị 2 cho numberOfTapsRequired, muốn user dùng hai ngón tay, thiết lập trị 2 cho numberOfTouchesRequired. Bạn có thể test trên máy ảo bằng cách giữ phím option trên bàn phím, rê chuột để điều chỉnh khoảng cách giữa 2 ngón tay, giữ thêm phím Shift để di chuyển 2 ngón tay.

UILongPressGestureRecognizer

UILongPressGestureRecognizer là gesture dùng để bắt sự kiện user chạm và giữ trên màn hình thiết bị (khác với 3D Touch)

Interface Builder

Tìm đối tượng UILongPressGestureRecognizer trong Xcode:

Screen Shot 2016-11-08 at 15.15.27

Kéo thả đối tượng này vào Image View và các bạn sẽ thấy một số thuộc tính cần lưu ý:

Screen Shot 2016-11-08 at 15.17.45

  • Min Duration: thời gian tối thiểu user phải giữ ngón tay lên view tính bằng giây (mặc định là 0.5 giây)
  • Tolenrance: khoảng cách cho phép gesture này còn hiệu lực khi user di chuyển ngón tay trong khi vẫn giữ lên view, tính bằng point (mặc định là 10).

Kết nối gesture này vào Viewcontroller.swift và set các giá trị như sau:

Screen Shot 2016-11-08 at 15.21.16

Lưu ý: trong action này cần có tham số truyền vào nên chúng ta thiết lập type ở đây là UILongPressGestureRecognizer.

Trong action này, chúng ta sẽ kiểm tra các trạng thái của đối tượng long press gesture và quyết định action cho nó:

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

Code

Ví dụ này chúng ta đã kết nối ImageView vào Viewcontroller, tiếp theo chúng ta sẽ add cho nó một đối tượng long press gesture trong hàm viewDidLoad() như sau:

Trong handleLongPress(sender:UILongPressGestureRecognizer)

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

Xem tiếp Phần 2

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