Gesture Recognizer trong Xamarin Forms

Gesture recognizers có thể được sử dụng để phát hiện ra sự tương tác của người dùng đối với các thành phần trong ứng dụng Xamarin.Forms. Gesture recognizers trong Xamarin được hỗ trợ bởi class GestureRecognizers với các thao tác như tap (chạm), pinch (để zoom), và pan (kéo). Hôm nay chúng ta sẽ tìm hiểu về thao tác hay sử dụng nhất, đó chính là Tap. Tap dùng để phát hiện người dùng chạm vào màn hình.

Giới thiệu

Để làm cho giao diện người dùng có thể click với thao tác Tap, chúng ta sẽ tạo một thể hiện của class TapGestureRecognizer, xử lý sự kiện Tapped và thêm một bộ nhận dạng cử chỉ vào bộ GestureRecognizers trong giao diện người dùng. Ví dụ khi muốn them một TapGestureRecognizer vào một Image thì sẽ dạng như này, các thành phần giao diện khác cũng tương tự:

var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
    // handle the tap
};
image.GestureRecognizers.Add(tapGestureRecognizer);

Mặc định thì Image sẽ phản hồi đối với 1 thao tác Tap đơn lẻ, chúng ta sẽ thử thêm thao tác tap 2 lần (double tap) xem sao?

tapGestureRecognizer.NumberOfTapsRequired = 2; // double-tap

Khi set NumberOfTapsRequired như trên thì muốn thao tác double tap, chúng ta sẽ phải tap nhanh trong 1 khoảng thời gian ngắn (thời gian này không thay đổi được (facepalm)) nếu không thì sự kiện double tap sẽ không xảy ra.

Sử dụng trong XAML

Bộ nhận dạng cử chỉ có thể thêm vào các control trong XAML bằng các thuộc tính của XAML. Thử double tap xem nào. Đầu tiên chúng ta sẽ có màn hình như này:

<Image Source="tapped.jpg">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
                Tapped="OnTapGestureRecognizerTapped"
                NumberOfTapsRequired="2" />
  </Image.GestureRecognizers>
</Image>

với một ảnh tên là tapped.jpg, chúng ta sẽ thêm thuộc tính Image.GestureRecognizers với sự kiện Tapped="OnTapGestureRecognizerTapped" và số lần tap NumberOfTapsRequired="2". Thêm tí code xử lý nào!

void OnTapGestureRecognizerTapped(object sender, EventArgs args)
{
    tapCount++;
    var imageSender = (Image)sender;
    if (tapCount % 2 == 0) {
        imageSender.Source = "tapped.jpg";
    } else {
        imageSender.Source = "tapped_bw.jpg";
    }
}

Để OnTapGestureRecognizerTapped xảy ra chúng ta sẽ phải tap vào Image NumberOfTapsRequired="2" lần, lúc đó tapCount sẽ tăng và ảnh tapped.jpg sẽ được thay bằng tapped_bw.jpg:

Đơn giản phải ko?

Sử dụng ICommand

Khi lập trình ứng dụng Xamarin bằng mô hình MVVM, chúng ta thường dùng ICommand hơn là viết trực tiếp hàm xử lý sự kiện thông qua thuộc tính. TapGestureRecognizer đã hỗ trợ ICommand rồi, còn lại chỉ cần binding là xong!

var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.SetBinding (TapGestureRecognizer.CommandProperty, "TapCommand");
image.GestureRecognizers.Add(tapGestureRecognizer);

hoặc dùng XAML để binding:

<Image Source="tapped.jpg">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
            Command="{Binding TapCommand}"  />
    </Image.GestureRecognizers>
</Image>

Với phần xử lý binding như này:

public class TapViewModel : INotifyPropertyChanged
{
    int taps = 0;
    ICommand tapCommand;
    public TapViewModel () {
        // Thực thi tapCommand  bằng một hàm
        tapCommand = new Command (OnTapped);
    }
    public ICommand TapCommand {
        get { return tapCommand; }
    }
    void OnTapped (object s)  {
        taps++;
    }
    //bỏ qua phần INotifyPropertyChanged vậy
}

Tổng kết

Vậy là mình đã trình bày xong về phần phát hiện thao tác Tap bằng cách sử dụng TapGestureRecognizer class. Số lượng tap có thể được chỉ định để double tap, triple tap tuỳ ý bạn muốn. Rất đơn giản đúng ko? Cảm ơn các bạn đã đọc bài của mình!