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

Жесты для iPhone и Android, о которых вы наверняка не знали

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

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

Содержание

Содержание

Управление с помощью отдельных кнопок не всегда удобно, особенно когда речь идет о мобильных устройствах с сенсорными экранами. Размеры дисплеев таких девайсов весьма ограничены даже с учетом того, что диагональ экранов сильно увеличилась за последние годы. В этой ситуации трудно переоценить пользу наэкранных жестов. В качестве одного из самых ярких примеров можно привести жест увеличения масштаба, когда содержимое экрана следует растянуть/развести двумя пальцами. Он полюбился многим еще со времен появления первого iPhone. С тех пор было создано множество других жестов, но некоторые из них доступны только в единичных приложениях, оболочках или даже в отдельно взятых девайсах, поэтому о них мало кто знает. Мы рассмотрим как раз такие полезные, но малоизвестные жесты, способные упростить использование софта и операционной системы в целом.

Жесты для операционной системы Android:

Перелистывание вкладок в браузере Google Chrome

В отличие от аналогичных действий на ПК, переключение вкладок на смартфонах реализовано не самым удобным способом, требующим совершить несколько действий. Однако если открыто малое количество вкладок, то быстрое перемещение между ними в Google Chrome возможно за счет свайпов влево и вправо в адресной строке. Это переход к предыдущей и следующей вкладке соответственно. При большом количестве вкладок найти нужную легче «по старинке»: зажать отдельную кнопку для вкладок, находящуюся чуть правее адресной строки.

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

Открытие вкладок в Google Chrome

Для моментального открытия вкладок в Google Chrome предусмотрена отдельная кнопка. Но не все знают, что открыть вкладки можно и с помощью жеста. Достаточно потянуть вниз от адресной строки, либо от кнопки открытия вкладок, либо от кнопки «домой». Единственное, что свайп не будет работать, если нажать на символ с тремя точками. В этом случае будет открываться окошко с настройками браузера, что вполне логично.

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

Увеличение масштаба интерфейса операционной системы

Этот жест чаще всего востребован пользователями со слабым зрением, но иногда может быть полезен, например, когда нужно разглядеть мелкий объект в любом софте или в интерфейсе операционной системы. Для активации жеста нужно зайти в настройки устройства, а затем выбрать пункты «Система» / «Специальные возможности» / «Увеличение» / «Увеличение по тройному нажатию» (путь к настройке может отличаться в зависимости от особенностей девайса).

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

После активации увеличение будет доступно через быстрое тройное нажатие любой части экрана. Оно работает практически в любом месте, кроме клавиатуры и нижней панели с кнопками навигации.

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

Быстрое полное открытие шторки с настройками

Про открытие шторки с уведомлениями должна знать большая часть пользователей смартфонов, так как именно в ней находятся кнопки для быстрого включения / отключения функций, отображаются уведомления из различных приложений и игр, а также встречается такой функционал, который больше нигде не активируешь.

Особенность в том, что при обычном открытии, то есть при свайпе одним пальцем из верхней части экрана в нижнюю, на большинстве современных девайсов открываются в первую очередь уведомления. Зато если проделать то же самое, но двумя пальцами, появится окошко со всеми иконками настроек.

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

Управление курсором с помощью клавиатуры (работает и на iPhone)

Вне зависимости от того, какой используется софт, все периодически допускают ошибки при вводе текста. Для того, чтобы их исправить, приходится пальцем наводить курсор на нужный символ, что не всегда удается сделать с первого раза. Удалять слова и предложения полностью — не самый оптимальный вариант, но не все пользователи знают, что существует свайп для более точного наведения курсора.

Этот свайп предусмотрен в клавиатуре от Google (работа в других клавиатурах не гарантируется). Для перемещения курсора достаточно лишь зажать кнопку пробела и двигать пальцем влево или вправо. Чем ниже скорость скольжения пальцем, тем точнее удастся перемещаться между символами.

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

Быстрое переключение и возврат к предыдущей раскладке в клавиатуре Google

Когда требуется другая раскладка, чаще всего пользователи переключают ее нажатием кнопки на клавиатуре, а затем таким же образом возвращаются к исходной раскладке. Это отнимает время, и оно того явно не стоит, если в иной раскладке требуется набрать только один символ или единственную букву.

Для упрощения ввода придуман свайп, который активируется, если зажать левую нижнюю кнопку. При этом появляется полоска синего цвета, которая следует за пальцем. Смысл жеста довольно прост: после появления полоски наводим палец на нужный символ, после чего отпускаем палец, и клавиатура автоматически возвращается к первоначальной раскладке.

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

Увеличение масштаба с помощью двойного касания в Google Maps

Жест предназначен больше для тех случаев, когда нет возможности использовать обе руки, но и в других ситуациях он наверняка будет полезен. Суть в том, что увеличить масштаб карты можно двойным быстрым нажатием, хотя перемещение в этом случае будет между строго фиксированными позициями. Для более точного масштабирования сразу после двойного тапа, не отпуская палец с экрана, стоит переместить его вверх или вниз. Это делается для увеличения и уменьшения объектов на карте соответственно.

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

Наклон карты в Google Maps

Просматривать карты в Google Maps возможно не только сверху, но и сбоку. Для изменения угла наклона карты необходимо нажать на экран одновременно двумя пальцами, а затем быстро провести ими вниз. Возврат к стандартному виду осуществляется почти также, только пальцами нужно будет провести уже вверх.

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

Переход в безопасный режим

Этой возможностью, скажем прямо, пользуются лишь единицы даже из числа тех, кто о ней знает, но есть вероятность, что когда-нибудь и вам понадобится так называемый безопасный режим. Его суть в том, чтобы проверить, как работает смартфон без стороннего софта. Если в этом режиме никаких проблем не наблюдается, а в обычном режиме работы смартфон функционирует как-то иначе (к примеру, работает гораздо медленнее, либо быстро разряжается), имеет смысл удалить некоторые приложения и игры, начиная с последнего установленного вами софта.

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

Для перехода в безопасный режим потребуется зажать кнопку включения на корпусе устройства, а затем на экране зажать кнопку перезагрузки, после чего появится диалоговое окно, в котором нужно подтвердить действие. Для выхода из безопасного режима достаточно перезагрузить девайс. Нужно отметить, что на некоторых Android-устройствах, в зависимости от используемой оболочки, вход в безопасный режим недоступен или совершается совсем иной последовательностью действий, о чем более подробно рассказано в этой статье.

Перемещение между задачами

Если в вашем мобильном устройстве выбрано управление жестами, то у вас появляется возможность быстро перемещаться между открытыми приложениями, не открывая диспетчер задач. Для этого на любом экране, кроме рабочего стола, нажмите в самый низ дисплея, и, не отпуская палец, переместите его в левую или правую сторону. Так происходит перемещение к предыдущей или следующей задаче, но если в оперативной памяти накопилось много задач, то будет удобнее все-таки открыть диспетчер, потянув от левого нижнего края дисплея вверх. Как и предыдущий жест, он может отсутствовать в смартфонах и планшетах некоторых производителей.

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

Перемотка на 10 секунд и более в приложении Youtube

Как выясняется, перемотка видеороликов в популярном видеохостинге допустима не только через наэкранные кнопки, которые появляются после нажатия на экран. Достаточно дважды быстро нажать на левую часть видео, чтобы перейти на десять секунд назад, при нажатии с правой стороны перемотка, наоборот, идет на 10 секунд вперед. Интересно, что если нажать более двух раз, видео перемотает на 20 и более секунд (в соответствии с количеством нажатий) с шагом, равным 10 секундам.

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

Жесты для операционной системы iOS:

Исправление ошибок в калькуляторе

Если вы вели в калькуляторе сложные подсчеты, то знаете, как порой бывает непросто исправить ошибку при наборе цифр, особенно если она замечена только после того, как было введено большое количество данных.

Оказывается, вовсе не обязательно удалять все цифры. Если провести пальцем вправо или влево по числовому значению, жест удалит только последнюю введенную цифру, что сэкономит массу времени и нервов. Жест работает как при вертикальной, так и при горизонтальной ориентации экрана.

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

Увеличение масштаба карты в Apple Maps

Как и в случае с Google Maps, в приложении Apple Maps получается одним пальцем увеличить масштаб карты — для этого нужно лишь дважды коснуться экрана в том месте, где хочется увидеть изменения.

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

Перемещение сразу нескольких иконок на рабочем столе

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

Для начала зажимаем иконку, а затем, не отпуская палец, другим пальцем нажимаем на любые другие иконки, которые в итоге объединятся в один сегмент. Перенесите их в выбранное пространство и отпустите палец. Все переместится именно на выбранную строку. Если же места в ней не хватило, остальные иконки автоматом перейдут на строку ниже.

Быстрый ввод символов в стандартной клавиатуре

По аналогии с операционной системой Android (смотрите пункт 6 — Быстрое переключение и возврат к предыдущей раскладке в клавиатуре Google) в предустановленной клавиатуре iOS есть быстрый ввод символов или букв с автоматическим переключением к исходной раскладке. Нужно зажать клавишу в левой нижней части экрана, а затем переместить палец на нужную кнопку, не отрывая его от дисплея.

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

Регулировка яркости фонарика

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

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

Для начала откройте «Пункт управления» (свайп из нижней части экрана в верхнюю), а затем зажмите значок с изображением фонарика и свайпом вверх или вниз увеличивайте или уменьшайте яркость диода соответственно.

Более точная настройка времени в календаре

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

Интересной особенностью календаря в iOS является настройка времени для событий с шагом в 5 минут, чего для большинства случаев бывает достаточно. Но если потребуется точность вплоть до минуты, то изменить шаг настройки поможет быстрое двойное касание колесика установки времени. Повторный двойной тап вернет стандартный интервал в 5 минут.

Источник

Жесты в проектировании и дизайне

С распространением сенсорных дисплеев становится особенно актуальным вопрос комбинаций жестов в компьютерных технологиях. Мультитач позволяет пользователям с помощью простых движений пальцев легко перемещать виртуальные объекты на экране. Большинство ключевых действий на сенсорных устройствах тесно связаны с жестами, они лежат в основе взаимодействия с мобильными устройствами и планшетами. Жесты состоят из тактильной механики (то, что делают пальцы пользователя на его сенсорном экране) и последующей тактильной деятельности (результат тактильной механики).

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

Ниже собрана необходимая информация, раскрывающая основные особенности сенсорных манипуляций на мобильных устройствах. А также представлены бесплатные векторные вариации жестов, которые можно использовать в работе.

Тактильная механика и тактильная деятельность

Существует достаточно много видов тактильной механики. Ниже представлены наиболее распространенные жесты.

жесты в мобильном приложении
Касание сенсорного экрана является наиболее популярным и базовым жестом. Собственно, он осуществляется ежедневно при касании экрана для запуска приложений, электронной почты или любой другого схожего сервиса. Одинарное касание характеризуется простым нажатием на экран одним пальцем.

Двойное касание сенсорного экрана — следующий наиболее распространенный жест. Двойное касание осуществляется с помощью быстрого двойного «клика» пальцем по экрану устройства. Используется, как правило, для увеличения изображения или области текста на экране.

жесты в мобильном приложении
Скольжение также хорошо известно рядовому пользователю. Это действие осуществляется через прикосновение и проведение пальцем по поверхности экрана. Прекрасным примером служит блокировка телефона с помощью соединения пальцем определённых точек на экране для блокировки или разблокировки.

Перетаскивание имеет почти такую же тактильную механику, как и описанное в предыдущем случае действие. Главное отличие заключается в скорости операций.

жесты в мобильном приложенииСмахивание соединяет в себе скольжение и перетаскивание. В данном случае тактильная механика не имеет особых отличий от перетаскивания, кроме как в скорости. Смахивая, палец движется очень быстро, как будто нужно прокрутить экран, чтобы убрать изображение профиля/аватарки/приложения.

Длительное нажатие предполагает прикосновение к элементу экрана и удерживание пальца на нем в течении некоторого времени. Результатом такой тактильной механики может быть открытие окна для копирования участка текста и т.д…

жесты в мобильном приложенииДлительное нажатие и перетаскивание предполагает нажатие с удержанием пальца на экране с последующим движением по его поверхности. Оно используется для изменения порядка расположения значков приложений и т. д.

Двойное касание и перетаскивание — эта комбинация жестов немного более замысловатая. Необходимо нажать на участок экрана, оторвать палец от поверхности и снова нажать с дальнейшим перемещением пальца по поверхности экрана до интересуемого участка. Такая тактильная механика может быть использована, когда надо приблизить содержание в одной области экрана и затем отдалить в другой.

жесты в мобильном приложенииСведение/Разведение включают одновременное нажатие двумя пальцами, расположенными вблизи или на некотором расстоянии друг от друга, с дальнейшим их разведением или сближением. Жест завершается поднятием пальцев над поверхностью экрана. Обычно, результатом такой механики становится уменьшение или увеличение масштаба изображения.

Одинарное касание двумя пальцами — нажатие, которое совершается двумя пальцами одновременно. Затем следует незамедлительное поднятие обоих пальцев. Жест обычно служит уменьшению масштаба изображения.

жесты в мобильном приложенииВедение, перетаскивание или смахивание двумя пальцами — эти жесты требуют использование двух пальцев, когда пользователь прикасается к экрану, «скользит» по нему и поднимает их над экраном. Жесты могут использоваться либо для выбора нескольких элементов, либо для наклона, либо для прокрутки.

Длительное нажатие и перетаскивание двумя пальцами осуществляется с помощью нажатия двумя пальцами на область экрана, с удерживанием их и перемещением в нужную область экрана с дальнейшим поднятием над сенсорной поверхностью. Этот тактильный механизм эффективен при работе с интерфейсом, который нуждается в перестановке элементов списка или порядка иконок, изображений.

жесты в мобильном приложенииДвойной щелчок двумя пальцами осуществляется с помощью двух последовательных коротких нажатий двумя пальцами на экран. В основном данный жест предназначен для уменьшения масштаба изображения.

Поворот или вращение используется в работе с анимацией и изображениями на мобильных устройствах. Необходимо двумя пальцами нажать на экран с разных сторон центрального объекта и, вращая пальцы по орбите вокруг объекта, повернуть его. Завершается жест традиционно – отнятием пальцев от сенсорного экрана. Использование вращения также пригодится при работе с картой Google, когда ее нужно развернуть горизонтально, для большего удобства.

Практически вся концепция работы с интерфейсами на сенсорных устройствах построена на применении жестов. При достаточно лимитированной площади мобильного экрана, дизайнерам и разработчикам приходится наиболее рационально и разумно использовать тактильную механику. Для эффективного взаимодействия с устройством, жесты должны быть интуитивно понятными и ассоциируемыми с привязанной к ним тактильной деятельностью.

Тактильная механика векторе

Ниже представлена бесплатная коллекция векторных наборов жестов. Они подойдут не только для разработки дизайна мультисенсорных интерфейсов устройства и продвижения мобильных приложений, но также могут использоваться в качестве иконок, указателей и т.д.

Источник

Обработка жестов в iOS

В разработке приложений для iOS важно знать как работает система изнутри. По обработке событий много разной интересной инфы, но хотелось бы структурировать и собрать все в одну. Что я и попытаюсь сделать.

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

Структура:

Разбор основных кейсов

UIKit

Начнем с главного. Что такое ваш UIKit? Если посмотреть в официальную доку, то мы увидим такую инфу:

The UIKit framework provides the required infrastructure for your iOS or tvOS apps. It provides the window and view architecture for implementing your interface, the event handling infrastructure for delivering Multi-Touch and other types of input to your app, and the main run loop needed to manage interactions among the user, the system, and your app.

Так. Здесь мы узнали, что этот фреймворк помогает нам создавать архитектуру окон и вьюшек, инфраструктуру обработки событий, а также основной цикл выполнения. Давайте пройдемся по порядку.

Наше приложение стартует с имплементации экземпляра класса для UIApplication. Каждое iOS приложение имеет ровно один экземпляр UIApplication. Он маршрутизирует события пользователя, а также с помощью UIApplicationDelegate информирует о важных событиях (запуске приложения, не хватки памяти, завершении работы приложения).

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

Давайте посмотрим как это выглядит в коде. Если бы мы юзали сториборды, то это происходило автоматически. UIApplicationMain проверяет, использует ли ваше приложение сториборды. Он знает, используете ли вы main storyboard и каково ее имя, просмотрев ключ Info.plist “Main storyboard file base name” (UIMainStoryboard- File)

Но мы попробуем все сделать кодом:

UIApplicationMain создает экземпляр UIApplication и сохраняет этот экземпляр. К которому позже можно обращаться через UIApplication.shared

Затем он создает экземпляр класса делегата приложения. Система знает что это за класс, потому что мы пометили его @main (в ранних версиях @UIApplicationMain)

UIApplicationMain вызывает у делегата приложения метод application(_:didFinish- LaunchingWithOptions:).

Но интерфейс приложения не отображается, пока содержащее его window не станет ключевым окном приложения. Функция makeKeyAndVisible поможет нам

Но начиная с iOS 13, функции AppDelegate были разделены между AppDelegate и SceneDelegate. Это результат новой функции поддержки многооконного режима, представленной в ОС iPad, которая разделяет работу AppDelegate на две части.

UIApplicationMain вызывает у делегата приложения метод application(_:didFinish- LaunchingWithOptions:).

UIApplicationMain создает UISceneSession, UIWindowScene и экземпляр, который будет служить делегатом сцены окна

В Info.plist нужно указать (в виде строки) какой класс будет делегатом

UIApplicationMain проверяет, использует ли ваша начальная сцена сториборды. (В Info.plist нужно указать имя сториборда)

Если сцена имеет сториборд, то UIApplicationMain создает экземпляр UIWindow и назначает его делегатом сцены.

UIApplicationMain вызывает отображение интерфейса путем вызова метода экземпляра UIWindow makeKeyAndVisible.

В делегате сцены вызывается метод scene(_:willConnectTo:options:)

Не ожидайте, что window может быть только одно. Есть такие окна UITextEffectsWindow и UIRemoteKeyboardWindow.

Окей. Мы вроде разобрались как создается главный маршрутизатор всех событий. Но что такое эти события и как они выглядят?

Знакомьтесь. Это UIEvent. Главный объект, который содержит много нужной инфы для обработки событий. Когда обнаруживается системное событие, такое как прикосновение к экрану, UIKit внутри создает экземпляры UIEvent и отправляет их в очередь системных событий (main event loop), вызывая UIApplication.shared.sendEvent().

UITouch

Каждый экземпляр UIEvent содержит одно или несколько объектов UITouch. Для данного объекта UITouch могут произойти только четыре вещи. Они называются фазами касания и описываются свойством var phase: UITouch.Phase:

.began — Палец впервые коснулся экрана; этот экземпляр UITouch только что был создан. Это всегда первая фаза, которая наступает только один раз.

.moved — Палец двигается по экрану.

.stationary — Палец оставался на экране неподвижно. Для чего это нужно? Как только экземпляр UITouch был создан, он должен присутствовать каждый раз, когда прибывает UIEvent для этой последовательности мультитач. Таким образом, если UIEvent прибывает из-за того, что произошло что-то еще (например, новый палец коснулся экрана), UIEvent должен сообщить, что этот палец делал, даже если он ничего не делал

По сути этих 4х фаз достаточно, чтобы описать все действия пальца. Но возможна еще одна фаза:

.cancelled — Система прервала последовательность мультитача, потому что что-то прервало ее. Возможно, пользователь нажал кнопку «Домой» или кнопку блокировки экрана в середине последовательности. Возможно, появилось локальное уведомление.

UITouch также имеет такие свойства:

location(in:), previousLocation(in:) — Текущее и предыдущее местоположение этого касания относительно системы координат view.

timestamp — Когда тач последний раз менялся. Прикосновение получает отметку времени, когда оно создается (.began) и каждый раз, когда оно перемещается (.moved)

tapCount — Если два касания происходят примерно в одном и том же месте в быстрой последовательности, а первое короткое, второе можно охарактеризовать как повторение первого. Это разные сенсорные объекты, но второму будет назначено значение tapCount на единицу больше, чем у предыдущего

view — вьюшка, c которой связано это прикосновение

Когда UITouch впервые появляется (.began), ваше приложение определяет, с каким UIView оно связано. (Позже мы узнаем как это происходит). Затем это же UIView устанавливается как свойство var view сенсорного экрана и остается им. C этого момента этот UITouch всегда связан с этим view (до тех пор, пока этот палец не покинет экран).

Main Event Loop

Когда объект приложения получает событие из очереди событий, он отправляет его в window, в котором произошло пользовательское событие. Window отправляет событие в view, которое является для него наиболее подходящим обработчиком

Сразу после запуска приложение настраивает инфраструктуру для основного цикла событий

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

Когда приложение запускается, оно также устанавливает основную группу объектов, которые отвечают за отрисовку UI и обработку событий. Эти основные объекты включают window и различные виды вьюшек.

Когда объект приложения получает событие из очереди событий, он отправляет его в window, в котором произошло пользовательское событие. Window отправляет событие в view, которое является для него наиболее подходящим обработчиком

Окей. Вроде все понятно. Мы узнали про главный маршрутизатор событий, узнали о самих событиях. Но как события доходят до точки исполнения?

Responder Chain

Экземпляры UIResponder — основные обработчики событий в приложении. Почти все ключевые объекты являются респондерами (UIApplication, UIWindow, UIViewController, UIView).

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

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

Респондеры получают необработанные данные о событии и должны либо обработать событие, либо переслать его другому объекту-респонденту. По связанному списку от репондера к респондеру.

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

Если первый респондер не может обработать сообщение о событии или действии, он пересылает его «следующему респондеру». Если объект в цепочке респондента не может обработать событие или действие, он передает сообщение следующему респондеру в цепочке. Сообщение движется вверх по цепочке к объектам более высокого уровня, пока не будет обработано. Если он не обрабатывается, то приложение отбрасывает его.

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

У респондера есть несколько методов обработки событий:

touchesBegan(_:with:) — во view или window произошло одно или несколько новых касаний.

touchesMoved(_:with:)Сообщает респонденту, когда одно или несколько касаний, связанных с событием, изменились.

touchesEnded(_:with:) — Сообщает респонденту, когда один или несколько пальцев поднимаются из вида или окна.

touchesCancelled(_:with:) — Сообщает респонденту, когда системное событие (например, системное предупреждение) отменяет последовательность касаний.

Аргументы этих методов:

touches: Set — множество прикосновений. Если во множестве только одно касание, то мы получаем его. Если же во множестве много то выполнится first метод (набор неупорядочен, поэтому какой элемент будет первым система выберет произвольно).

event: UIEvent? — сущность объекта UIEvent

Gesture Recognizer

Процесс распознавания жестов довольно сложный механизм. Еще сложней, когда мы хотим обрабатывать разные типы жестов. Решением являются Gesture Recognizers (субкласс UIGestureRecognizer), которые стандартизируют общие жесты и позволяет разделять и инкапсулировать код для разных жестов в разные объекты. Благодаря распознавателям жестов нет необходимости создавать подкласс UIView только для того, чтобы реализовать интерпретацию касания.

Gesture Recognizer — это объект, задача которого обнаруживать, что последовательность мультитач приравнивается к одному конкретному типу жеста. Он прикреплен к UIView. Мы можем добавлять и удалять распознаватели:

UIGestureRecognizer реализует четыре метода касания, но он не является респондером. Поэтому не участвует в responder chain.

По сути это обычный словарь, который хранит все жесты.

В кейсе ниже мы реализуем, используя распознаватель жестов, вьюху, которая позволяет перетаскивать себя в любом направлении одним пальцем.

Window доставляет события касания в словарь распознавания жестов, прежде чем оно доставляет их в hit-testing view

Закрепление доставки событий

Таким образом давайте закрепим доставку тачей от точки прикосновения до точки управления событием:

Когда появляется новое касание, приложение выполняет проверку нажатия, чтобы определить view, к которому прикоснулись. Это view будет навсегда связано с этим касанием и соответственно будет называться hit-test view

Когда происходит другое касание приложение вызывает собственный метод sendEvent(:), который в свою очередь вызывает sendEvent(🙂 окна (window). Window прокладывает путь к прикосновению

Но как этот путь прокладывается?

Hit-Testing

Hit Testing — это рекурсивный поиск среди всей иерархии вьюх к какой прикоснулся пользователь. iOS пытается определить, какой UIView является самой передней вьюшкой под пальцем пользователя, которая должна получить событие касания.

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

На диаграмме выше hit-testing выполняется каждый раз, когда палец касается экрана. И до того, как какое-либо средство распознавания представления или жеста получит объект UIEvent, представляющий событие, которому принадлежит касание. Полученная UIView становится firstResponder.

Метод hitTest(_: with 🙂 реализует логику проверки касания исключительно для этой вьюхи. Если isUserInteractionEnabled представления имеет значение false, или его isHidden имеет значение true, или его alpha близка к 0,0, то hitTest возвращает nil, что означает, что ни эта вьюха, ни другая из её сабвьюх не могут быть вьюхой для следующего вызова hitTest.

Алгоритм начинается с отправки сообщения экземпляру UIApplication путем вызова sendEvent (_ :). а UIApplication, в свою очередь, передает его UIWindow, вызывая его sendEvent (_ :). Затем UIWindow выполняет сложную логику проверки для каждого тача его иерархии вьюшек

Также нашел схему, которая описывает логику hit testing’а:

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

Разбор основных кейсов

1. Кейс с выпирающей вьюхой

Кейс очень распространенный. О нем писал яндекс и много ребят на западных ресурсах.

Задача простая. Что будет, если мы нажмем на выпирающую область вьюхи C?

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

Если вспомнить доку, то ответ будет таким

If a touch location is outside of a view’s bounds, the hitTest(_:with:) method ignores that view and all of its subviews. As a result, when a view’s clipsToBounds property is false, subviews outside of that view’s bounds are not returned even if they happen to contain the touch.

Touch будет проигнорирован вью B. Его координаты не попадают в её область отрисовки. А значит, что самой глубокой вью, которая примет нажатие, будет view A.

В этом случае мы можем переписать вью и написать свой код

Мы определяем, находится ли поинты внутри любых из сабвьюх основной супервьюхи.

Если мы не получаем ни одной, которое включает данную точку, мы проверяем, действительно ли это родительское представление получило обращение

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

2. Кейс с увеличением нажатия области кнопки

Допустим мы решили увеличить область нажатия кнопки «Х». Пришел дизайнер и сказал, что сложно закрыть эту вьюшку. И нужно, не меняя размера, изменить область нажатия. Тач должен произойти в красной области, а UIButton должен это подхватить

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

Решение изменить область при тапе с помощью метода pont(inside:):

3. Решение задачи с вырезанной внутри дыркой

Как сделать так, чтобы при нажатии на контент внутри синей вьюшки обрабатывались события вьюшек, под ней лежащих?

Условие задачи — вызвать событие зеленой или желтой вьюшки, которые находятся в центре синей

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

4. Проход hitTest по слоям

Как мы знаем hitTest работает только с вьюшками. Но это не совсем так.

Допустим у нас есть такой код

Есть 1 вьюшка и в ней 3 слоя.

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

Но допустим я захочу увеличить один из слоев при таче. Для этого мне стоит переопределить hitTest UIWindow, чтобы ни один из слоев не потерялся

теперь при нажатии hitTest UIWindow проверяет условие наших слоев и выполняет трансформацию

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

Итого, в этой статье я попытался собрать общую информацию из статей и док, а ткже разобраться в некоторых аспектах сам. Соглашусь, что многие из кейсов специфичные, но все же знать, мне кажется, полезно.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *