張高興的 Xamarin.Forms 開發筆記：TapGestureRecognizer 的簡單介紹與應用

文章出處

　　最近很少寫應用了，一直在忙關于 ASP.NET 的東西（哈欠...）。抽點時間對 TapGestureRecognizer 做點總結。

　　一、簡介

　　TapGestureRecognizer 就是對 Tap 手勢進行識別。 Forms 里的大多數控件都繼承自 View 類，而 View 類中有一個公共屬性 GestureRecognizers，因此控件都可以添加各種手勢識別。當然手勢不止 Tap 這一種，更多的可以在 Xamarin 的指南中了解：https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/gestures/

public IList<IGestureRecognizer> GestureRecognizers { get; }

　　二、用法

　　在說用法之前，首先要搞清楚我們需要關注 Tap 的哪些屬性。最重要的還是 Tap 的次數。

　　1. Xaml

<Label Text="0">
    <Label.GestureRecognizers>
        <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped" />
    </Label.GestureRecognizers>
</Label>

　　直接上代碼，這里以 Label 舉例，最最基本的用法都在這了，用 NumberOfTapsRequired 設置點擊數， Tapped 綁定監聽事件。對于 MVVM 涉及的綁定，可以去官方找找。

　　2. C# 代碼

var tapGestureRecognizer = new TapGestureRecognizer();

tapGestureRecognizer.NumberOfTapsRequired = 1;
tapGestureRecognizer.Tapped += (s, e) =>
{
    // TODO
};

YourControl.GestureRecognizers.Add(tapGestureRecognizer);

　　三、應用

　　寫了一個小小的 Demo （GitHub：https://github.com/ZhangGaoxing/xamarin-forms-demo/tree/master/GestureRecognizersDemo）

　　1. 超鏈接

　　Forms 里是沒有超鏈接的，有時候就很頭疼。我順便看了一下 Xaml Standard 的第一版草稿，里面還是沒有超鏈接。可以用 TapGestureRecognizer 去仿制一個。這里就以 Label 跳轉郵件鏈接和 Image 跳轉網頁鏈接舉例。

　　Xaml 代碼

<Label Text="Hyperlinks" FontSize="20" TextColor="Black" />
<StackLayout Orientation="Horizontal">
    <Label Text="Text : " VerticalTextAlignment="Center" />
    <Label x:Name="Email" Text="zhangyuexin121@live.cn" VerticalTextAlignment="Center" TextColor="DodgerBlue"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
    <Label Text="Image : " VerticalTextAlignment="Center" />
    <Image x:Name="Weibo" Source="weibo.png" HeightRequest="35" WidthRequest="35" VerticalOptions="Center" />
</StackLayout>

　　C# 代碼

var tapGestureRecognizer = new TapGestureRecognizer();
// 設置觸發點擊數
tapGestureRecognizer.NumberOfTapsRequired = 1;
tapGestureRecognizer.Tapped += (s, e) =>
{
    if (s is Label)
    {
        Device.OpenUri(new Uri("mailto:zhangyuexin121@live.cn"));
    }
    else if (s is Image)
    {
        Device.OpenUri(new Uri("http://www.weibo.com/279639933"));
    }
};

Email.GestureRecognizers.Add(tapGestureRecognizer);
Weibo.GestureRecognizers.Add(tapGestureRecognizer);

　　2. 為沒有 Clicked 事件的控件添加假的 Clicked 事件

　　換句大白話來說，就是點擊一個控件觸發一個事件。這里以 Label 舉例，點擊 Label 以“0”和“1”變化。

　　Xaml 代碼

<Label Text="Fake Click Event" FontSize="20" TextColor="Black" />
<Label Text="0" FontSize="18" FontAttributes="Bold" TextColor="Black">
    <Label.GestureRecognizers>
        <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped" />
    </Label.GestureRecognizers>
</Label>

　　C# 代碼

private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
    Label label = sender as Label;

    string val = label.Text;
    switch (val)
    {
        case "0":
            label.Text = "1";
            label.TextColor = Color.FromHex("#2196F3");
            break;
        case "1":
            label.Text = "0";
            label.TextColor = Color.Black;
            break;
        default:
            break;
    }
}