Жесты в .NET MAUI. Касание (Tap)

Жесты используются для управления приложением на мобильных устройствах. Сейчас уже трудно себе представить любое, даже самое простое мобильное приложение, например, в Android, которое бы не использовало в работе хотя бы один жест — касание (англ. Tap) или, как этот жест часто называют пользователи, — тап. В этой главе мы рассмотрим основные жесты, которые можно применять в приложениях .NET MAUI, а также компоненты XAML, реализующие те или иные возможности работы с жестами в наших приложениях.

Жесты в мобильных приложениях

Можно выделить следующие виды жестов, которые могут использоваться в мобильных приложениях:

1. Tap (тап, касание) — касание или нажатие на сенсорный экран.  Например, чтобы открыть приложение, нужно «тапнуть» на его иконку
2. Double tap (двойной тап). Два коротких касания. Может использоваться для каких-то дополнительных действий в приложении и, как дополнительная защита от непреднамеренного нажатия.
3. Multi tap (мультитап, многократное касание). Три и более тапа подряд по одному элементу
4. Long Tap (лонгтап). Нажатие с удержанием на несколько секунд. Используется для того, чтобы открыть дополнительные опции там, где они есть. Например, чтобы открыть действия приложения.
5. Scroll (скролл). Вертикальное пролистывание содержимого скольжением пальца по экрану сверху вниз или снизу вверх
6. Swipe (свайп). Смахивание вниз, вверх, вправо или влево. Одна из функций этого жеста — показать или скрыть спрятанные панели, например, в списке писем, чтобы удалить письмо или ответить на него.
7. Pull to refresh.  Жест используется для обновления элементов интерфейса. Например, этот жест используется для обновления списков чего-либо (писем, покупок и т.д.) Дословный перевод: «потяни для обновления».
8. Drag&Drop. Изменение положения элементов интерфейса с помощью перетягивания.
9. Pinch. Жест, используемый для изменения масштаба картинки (увеличения или уменьшения). Для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны

Распознавание жестов в .NET MAUI

Некоторые элементы управления в .NET MAUI уже распознают жесты по умолчанию. Например, кнопки Button или ImageButton распознают жест Tap (иначе, мы не смогли бы «кликать» по кнопкам в мобильном приложении). Однако, при разработке приложений .NET MAUI нам можем потребоваться распознавание жестов для других компонентов, например, для текстовых меток (Label) или рамок (Border). В этом случае нам придется самостоятельно определять поведение элемента управления и настраивать распознавание жестов.

Каждый элемент, являющийся наследником View, содержит свойство:

public IList<IGestureRecognizer> GestureRecognizers { get; }

В свою очередь, .NET MAUI содержит ряд классов, реализующих интерфейс IGestureRecognizer и предназначенных для работы с конкретным видом жестов в приложении.

Чтобы продемонстрировать работу со свойством GestureRecognizers, создадим новое шаблонное приложение .NET MAUI. И изменим код главной страницы приложения следующим образом:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp24.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a hovercraft number nine" />

            <Label
                Text="Hello, World!"
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" >
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
                </Label.GestureRecognizers>
            </Label>

            <Button
                x:Name="CounterBtn"
                Text="Click me" 
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Обратите внимание на код метки — здесь мы использовали свойство GestureRecognizers и добавили в список распознаваемых жестов TapGestureRecognizer у которого определили событие Tapped, которое генерируется при касании элемента.  Обработчик события TapGestureRecognizer_Tapped будет выглядеть следующим образом:

private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

}

Теперь запустите приложение и убедитесь, что клик по метке срабатывает и текст кнопки изменяется так же, как если бы вы просто тапали по ней. Аналогичным образом вы можете добавить распознавание жеста «касание» и для других элементов управления, которые по умолчанию такой жест не распознают.

Свойства и события класса TapGestureRecognizer

Ниже в таблице представлены свойства, которые предоставляет нам класс TapGestureRecognizer :

Как только распознается жест «касание», генерируется следующее событие:

public event EventHandler<TappedEventArgs>? Tapped;

Например, перепишем наше приложение таким образом, чтобы касание по метке «засчитывалось» по двойному тапу. Изменим код метки следующим образом:

<Label
    Text="Hello, World!"
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1" >
    <Label.GestureRecognizers>
        <TapGestureRecognizer NumberOfTapsRequired="2" Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
    </Label.GestureRecognizers>
</Label>

Теперь запустите приложение и убедитесь, что счётчик увеличивается на 1 только после того, как вы сделаете двойной тап по метке или, как обычно, тапните по кнопке.

Итого

Для распознавания жестов в .NET MAUI используется специальное свойство элементов управления — GestureRecognizers, которое содержит список объектов, каждый из которых отвечает за распознавание определенного жеста. Самый простой жест — касание, распознается с использованием объекта TapGestureRecognizer .