Xamarin.Forms
몸짓

TapGestureRecognizer를 추가하여 이미지를 태핑 가능하게 만들기

Xamarin.Forms에는 몇 가지 기본 인식기가 있으며, 그 중 하나는 TapGestureRecognizer 입니다.

거의 모든 시각적 요소에 추가 할 수 있습니다. Image 바인딩하는 간단한 구현을 살펴보십시오. 다음은 코드에서 수행하는 방법입니다.

var tappedCommand = new Command(() =>
{
    //handle the tap
});

var tapGestureRecognizer = new TapGestureRecognizer { Command = tappedCommand };
image.GestureRecognizers.Add(tapGestureRecognizer);

또는 XAML :

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

이 명령은 데이터 바인딩을 사용하여 설정됩니다. 볼 수 있듯이 NumberOfTapsRequired 를 설정하여 조치를 취하기 전에 더 많은 도청이 가능하도록 설정할 수 있습니다. 기본값은 1 탭입니다.

다른 제스처는 핀치와 팬입니다.

핀치 제스처로 이미지 확대 / 축소

Image (또는 다른 시각적 요소)를 확대 / PinchGestureRecognizer 할 수 PinchGestureRecognizer 하려면 PinchGestureRecognizer 를 추가해야합니다. 다음은 코드에서 수행하는 방법입니다.

var pinchGesture = new PinchGestureRecognizer();
pinchGesture.PinchUpdated += (s, e) => {
// Handle the pinch
};
    
image.GestureRecognizers.Add(pinchGesture);

그러나 XAML에서도이 작업을 수행 할 수 있습니다.

<Image Source="waterfront.jpg">
  <Image.GestureRecognizers>
    <PinchGestureRecognizer PinchUpdated="OnPinchUpdated" />
  </Image.GestureRecognizers>
</Image>

동반 이벤트 처리기에서 이미지를 확대 / 축소하는 코드를 제공해야합니다. 물론 다른 용도로도 사용할 수 있습니다.

void OnPinchUpdated (object sender, PinchGestureUpdatedEventArgs e)
{
    // ... code here
}

다른 제스처는 탭 및 팬입니다.

PanGestureRecognizer로 확대 된 모든 이미지 컨텐츠를 보여줍니다.

확대 된 Image (또는 다른 컨텐트)가있는 경우 확대 된 상태의 모든 컨텐트를 표시하려면 Image 를 드래그 할 수 있습니다.

PanGestureRecognizer를 구현하면이 작업을 수행 할 수 있습니다. 코드에서 이것은 이렇게 보입니다 :

var panGesture = new PanGestureRecognizer();
panGesture.PanUpdated += (s, e) => {
  // Handle the pan
};

image.GestureRecognizers.Add(panGesture);

XAML에서도이 작업을 수행 할 수 있습니다.

<Image Source="MonoMonkey.jpg">
  <Image.GestureRecognizers>
    <PanGestureRecognizer PanUpdated="OnPanUpdated" />
  </Image.GestureRecognizers>
</Image>

코드 숨김 이벤트에서 이에 따라 패닝을 처리 할 수 ​​있습니다. 이 메서드 시그니처를 사용하여 처리합니다.

void OnPanUpdated (object sender, PanUpdatedEventArgs e)
{
  // Handle the pan
}

사용자가 MR.Gestures를 사용하여 화면을 터치 한 곳에 핀 배치

제스처 인식기에 내장 된 Xamarins는 매우 기본적인 터치 처리 만 제공합니다. 예를 들어 감동적인 손가락의 위치를 ​​잡을 방법이 없습니다. MR.Gestures는 14 가지 터치 처리 이벤트를 추가하는 구성 요소입니다. 감동 손가락의 위치는 모든 MR.Gestures 이벤트에 전달되는 EventArgs 일부입니다.

화면의 아무 곳에 나 핀을 배치하려면 가장 쉬운 방법은 Tapping 이벤트를 처리하는 MR.Gestures.AbsoluteLayout 을 사용하는 MR.Gestures.AbsoluteLayout 입니다.

<mr:AbsoluteLayout x:Name="MainLayout" Tapping="OnTapping">
    ...
</mr:AbsoluteLayout>

보시다시피 Tapping="OnTapping" 은 중첩 된 GestureRecognizers 가있는 Xamarins 구문보다 .NET과 비슷하다고 느낍니다. 이 구문은 iOS에서 복사되었으며 .NET 개발자에게는 약간의 냄새가 난다.

코드 뒤에 다음과 같은 OnTapping 핸들러를 추가 할 수 있습니다.

private void OnTapping(object sender, MR.Gestures.TapEventArgs e)
{
    if (e.Touches?.Length > 0)
    {
        Point touch = e.Touches[0];
        var image = new Image() { Source = "pin" };
        MainLayout.Children.Add(image, touch);
    }
}

Tapping 이벤트 대신 TappingCommand 사용하여 ViewModel에 바인딩 할 수도 있지만이 간단한 예제에서는 복잡합니다.

MR.Gestures에 대한 더 많은 샘플은 GitHub 의 GestureSample 앱 과 MR.Gestures 웹 사이트 에서 찾을 수 있습니다. 이들은 또한 이벤트 처리기, 명령, MVVM, 다른 모든 터치 이벤트를 사용하는 방법을 보여줍니다 ...