Android studio демонстрации распознавания стандартных жестов

GestureOverlayView

Данный компонент присутствовал в Eclipse и в ранних версиях студии. Сейчас на панели инструментов его нет, но класс не объявлен устаревшим. Статья была написана ещё во времена использования Eclipse много лет назад.

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

Подготовительные работы — приложение Gestures Builder

Найдите на эмуляторе программу Gestures Builder. Запустите её. Нажмите на кнопку Add gesture (Добавить жест). Введите имя для нового жеста, например, Slide to left (Жест влево) и проведите мышкой по экрану справа налево. Нажмите на кнопку Done, чтобы завершить создание жеста. Появится сообщение, что жест был сохранён по адресу /mnt/sdcard/gestures.

Аналогично добавьте жесты Slide to right (Жест вправо) и Kitty — Жест, напоминающий кота (просто жесть!).

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

В Eclipse откройте перспективу DDMS и найдите вкладку File Explorer. Перейдите по указанному адресу /mnt/sdcard/, где были сохранены жесты, и найдите файл gestures без расширения. Скопируйте его на свой рабочий компьютер при помощи кнопки Pull a file from the device. На этом подготовительная часть завершена.

Создаём приложение с распознаванием жестов

Создайте новый проект. Далее создайте новую папку res/raw и скопируйте в него файл gestures, сохранённый вами ранее.

Разместим компонент GestureOverlayView на экране:

Далее пишем код по распознаванию жестов:

Как видите, мы подключаем жесты через ресурсы:

Запускаем приложение и пытаемся повторить жесты, которые мы создавали в Gesture Builder. Если приложение распознает созданные вами жесты, то появится всплывающее сообщение.

Слайд-шоу на основе жестов

Перейдём к более практичному примеру на основе предыдущего примера.

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

Теперь нам нужно распознать жест по его имени и выполнить нужную операцию:

Конечно, жесты вправо-влево слишком примитивны и реализовать слайд-шоу можно и более стандартными способами. Здесь они показаны только для демонстрации. Но можно придумать и более замысловатые жесты. В нашем примере есть сложный жест, напоминающий фигурку кота и программа прекрасно распознаёт его. Также можно придумать жесты в виде отдельных буквы. Скажем, жест в виде буквы S может сохранять документ (Save) и т.д.

Цвета для жестов

По умолчанию, когда мы делаем жесты в приложении, то рисуются жирные жёлтые линии. Вы можете настроить цвет через XML, установив у GestureOverlayView необходимые атрибуты:

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

Источник

Android studio демонстрации распознавания стандартных жестов

Полный текст статьи и исходники программы доступны только зарегистрированным участникам сайта.

Прочитайте внимательно условия! В начале каждой статьи указывается, к какому курсу относится данная статья. Например, если статья из 4 курса, значит нужно заплатить за все курсы по четвёртый включительно.

Стоимость регистрации — символические 350 рублей. После регистрации у вас будет доступ ко второму курсу.

Для регистрации сначала необходимо пополнить ЮMoney(бывший Яндекс.Кошелек) 410011383280263 на указанную сумму (или Webmoney-кошелек P894989790291 (старый R390884954122) или QIWI (перевод по никнейму), а затем прислать письмо на адрес alexander.klimoff@gmail.com с указанием, на какой кошелёк вы делали оплату и реквизиты, по которым можно вас определить (не прикрепляйте к письму картинки или файлы). Учитывайте комиссию при переводах.

Не присылайте в письме мои номера кошельков — поверьте, я их знаю и без вас.

В ответном письме вы получите учётные данные для чтения статей из закрытой зоны за второй курс.

Доступ к третьему курсу обучения доступен только после оплаты второго курса и составляет 350 руб.

Доступ к четвёртому курсу обучения доступен после оплаты третьего курса и составляет 350 руб. и т.д.

При оплате сразу всех курсов одновременно (2-9) цена составит 2800 руб.

Доступ даётся как минимум на один год. Для тех, кто оплатил третий и другие курсы, сроки доступа увеличиваются.

Также возможен приём на PayPal (только для зарубежных пользователей). Обратите внимание, что в этом случае стоимость одного курса составляет 7$.

Источник

Android studio демонстрации распознавания стандартных жестов

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

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

Сразу начнем с работы в основном layout файле activity_main.xml. Добавим туда следующие элементы:

Важным моментом здесь является определение элемента FrameLayout. Именно в нем будет происходить основная работа приложения.

Теперь перейдем к файлу MainActivity.java и немного изменим метод onCreate:

Мы объявили здесь класс под названием PlayAreaView и Android Studio на него ругается, но не пугайтесь, мы это исправим.

А сейчас мы выполним довольно интересную часть нашей работы — создадим холст для рисования жестов. Легкий способ это сделать заключается в том, чтобы создать объект для рисования Canvas (холст) с помощью метода onDraw. Это довольно просто и удобно, так как этот метод имеет всего один параметр: объект Canvas. Рисование в Canvas происходит с помощью вызова метода drawBitmap. Создаем в приложении новый класс по имени PlayAreaView.java и добавляем туда следующий код:

В нашем случае выполнение метода onDraw довольно простое. Как это обычно делается, определите еще и переменную DEBUG_TAG. Основная работа в этой части кода происходит при вызове команды drawBitmap, где первым параметром является изображение для рисования, второй параметр задает матричный объект под названием translate, который, как подсказывает его имя, будет показывать, где именно на экране будет происходить рисование. Этот матричный объект будет связывать все действия пользователя, все его прикосновения к экрану, с холстом.

Классу PlayAreaView нужно создать конструктор, выполняющий его самые базовые, начальные настройки. Так, как приложения будет реагировать на жесты, нам необходимо задать GestureDetector (определитель жестов). GestureDetector это класс, способный опознавать события типа жестов (прикасания пользователя к дисплею), проделывать над полученной от датчиков информацией о жестах математические операции, а потом, с помощью объекта GestureListener, создавать определенную обратную реакцию. О бъект GestureListener обрабатывает входящую в него информацию и выдает ответ, который мы можем видеть и реагировать не него (в нашем случае это будет перемещение изображения по экрану). В GestureDetector существует множество возможностей, но мы ограничимся только самыми необходимыми. Добавим этот метод в код файла PlayAreaView.java:

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

Теперь давайте создадим объект GestureDector, который будет принимать данные о жестах и обрабатывать их. Для этого в том же классе PlayAreaView.java добавим следующее:

В процессе работы с определением жестов с помощью GestureDector также нужно реализовать класс GestureListener. Основные жесты, в которых мы заинтересованы, это двойное нажатие по экрану и направленные движения (влево, вправо и т.д.). Для реализации определения этих движений, класс GestureListener должен выполнять интерфейсы OnGestureListener и OnDoubleTapListener:

После добавления этого класса, как подкласса Activity, добавьте все необходимые для них методы, которых жаждет Android Studio. Например, вот один из них:

Выполнение всех этих методов позволит вам изучить самые различные события, которые улавливает объект GestureDetector. Объект MotionEvent связан с самыми разными событиями, которые могут происходить при нажатии пользователем на экран.

Стоит отметить, что существует еще такой удобный метод, как SimpleOnGestureListener, который объединяет в себе функционал сразу двух интерфейсов: OnGestureListener и OnDoubleTapListener. В нем по умолчанию возвращается значение false.

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

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

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

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

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

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

Нам даже не нужно выполнять никаких дополнительных проверок параметров, данные о скорости полностью решают нашу задачу. Скорость будет определяться в пискелях за секунду. Мы также можем использовать данные скорости для решения вопроса о том, где остановить движущийся объект, которым у нас является картинка. В нашем случае, мы используем в своих подсчетах 40% от секунды (то есть 400 мс). Данные о скорости будут передаваться в метод onAnimateMove, где и будет задаваться скорость движения изображения. Почему используется именно 400 мс? Потому, что это значение параметра наиболее качественно подходит к большинству устройств. Используя такое значение, мы будем видеть нормальное, относительно плавное движение, а не скачки или некрасивые замедления. Стоит отметить, что эти настройки скорости и анимации не имеют ничего общего с реальной физикой, просто в данном примере так удобно.

Теперь все жесты, которые нам были интересны, учтены. В методе PlayAreaView.java добавим такой метод:

Он делает две вещи. Во первых, метод переводит (здесь «переводит» означает движение от точки A в B) изображение на расстояние в соответствии с движением пальца, во вторых, аннулирует предыдущее положение изображения. Каждый раз, когда происходит движение, мы будем просто обновлять нашу матрицу, заданную ранее.

Теперь добавим onResetLocation метод:

Этот метод будет просто сбрасывать все настройки на настройки по умолчанию.

При движении картинки в заданном пальцем пользователя направлении нужно настроить анимацию так, чтобы она была плавной, проходила гладко, так сказать. В Android есть встроенные классы для анимации (вспоминаем предыдущие уроки по анимации, вот, вот и вот) но в нашем случае их сложно применить. Создадим для приложения свою собственную анимацию. В Android существуют множество интерполяторов, с помощью которых можно задать различную анимацию. Вот их мы и применим для создания анимации. Давайте создадим метод под названием onAnimateMove :

Здесь мы задали начальное положение, начальное и конечное время. Мы инициализируем анимацию, используя класс OvershootInterpolator, и настраиваем ее основные характеристики. Напоследок для завершения работы над анимацией нужно вызвать еще один метод под названием onAnimateStep:

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

Источник

Распознавание пользовательских жестов

Недавно, при разработке игры под Android, я столкнулся с проблемой реализации работы с пользовательскими жестами. В стандартной комплектации Android SDK имеется класс GestureDetector (тут демонстрация работы с этим классом), однако в нём реализованы не все жесты, что мне были нужны, а также некоторые из них работали не так, как мне надо (onLongPress, например, срабатывал не только по длительному касанию, но и по длительному касанию с ведением пальца по экрану). Кроме игр жесты могут использоваться и в обычных приложениях. Они могут заменить некоторые элементы интерфейса, тем самым сделав его проще. Жесты уже используются в очень многих приложениях для устройств с сенсорным вводом и это даёт нам право предполагать, что пользователь уже знаком с ними. Сегодня мы реализуем в нашем приложении распознавание long press, double touch, pinch open, pinch close и других.

Препродакшн

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

Основа приложения

Для начала создаём Android Application Project в Eclipse. Наш проект не будет использовать каких-либо функций из новых SDK, поэтому в качестве Minimum Required SDK можно поставить API 8 (Android 2.2), например. MainActivity (если его нету, то нужно будет создать) приведём к такому виду:

Соответственно, мы должны создать класс ApplicationView, который будет наследовать от View:

Теперь нам надо разобраться, как мы будем отображать холст. Мы создаём Canvas, передав ему в параметры Bitmap. В данном случае при рисовании чего-либо на нашем Canvas, оно отображается на Bitmap. Так же нам нужна переменная позиции нашего холста и расстояния до него. Добавляем в класс ApplicationView несколько переменных:

В конструкторе класса инициализируем холст и его содержимое, а так же закрашиваем его белым цветом:

В методе onDraw отображаем его:

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

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

А также, для полноэкранности, изменить style-файлы. Для API 10 и ниже (values/styles.xml):

Для API 11 и выше (values-v11/styles.xml):

Для API 14 (values/styles-v14.xml):

Реализация работы с сенсорным экраном

Нам нужно начать начать взаимодействовать с сенсорным экраном с помощью переопределения метода onTouchEvent (подробнее о работе с сенсорным экраном тут):

Мы видим, что при касании пальца, в список fingers мы добавляем объект типа Finger. Когда палец поднимаем, мы удаляем этот объект, а при перемещении пальцев мы обновляем координаты всех объектов. В итоге список fingers содержит в себе все касания с актуальными и предыдущими координатами. Класс Finger:

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

Перемещение холста

Для реализации перемещения холста нам нужно в методе onTouchEvent, в блоке перемещения объекта, вызывать метод checkGestures, который будет работать с касаниями. Вызов этого метода там уже есть, однако под комментарием. Раскомментируем его и пишем сам метод:

Можно запустить и поводить пальцем и если всё сделано правильно, то холст должен таскаться за ним.

Изменение расстояния до холста

Для реализации данного жеста нужно разделить всё содержимое метода на multitouch (когда пальцев более одного) и обычное касание. Если это multitouch, то мы будем постоянно проверять нынешнее расстояние между двумя пальцами и прошлое. Изменим содержимое метода checkGestures:

В этом участке кода был использован метод checkDistance, который нужно добавить в ApplicationView. Вот его код:

Теперь при касании двух пальцев и сведении\разведении их будет изменятся расстояние до холста. Если у вас эмулятор, то ничего не получится.

Изменение режима

Нам нужно создать переменную, которая будет отвечать за режим. Я назвал её drawingMode типа boolean. Для реализации долгого касания нам придётся использовать метод, который будет вызываться через время. Тут есть несколько вариантов развития событий:

1. мы пишем наш код в методе onDraw;
2. мы пишем наш код в onTouchEvent;
3. мы создаём таймер и пишем код в него;
4. мы создаём Handler и с помощью метода postDelayed вызываем наш Runnable;

В методе onDraw, по моему мнению, должно выполняться только отображение графики. В onTouchEvent писать можно только с учётом того, что палец будет перемещаться, тем самым постоянно вызывая этот метод. Таймер работает постоянно и это немного напрягает, поэтому мы будем использовать четвёртый вариант. В классе ApplicationView мы создаём переменную handler типа Handler, а так же добавляем в блок «if(action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_POINTER_DOWN)» метода onTouchEvent строку:

Теперь надо создать Runnable с именем longPress:

Теперь нам в классе Finger надо создать переменную wasDown типа long, которая будет содержать в себе время нажатия (пригодится для двойного касания). В конструкторе этой переменной надо задать значение System.currentTimeMillis(). Ещё нам надо добавить переменную startPoint типа Point, которая будет содержать в себе стартовую позицию пальца. Она должна содержать в себе то значение, что было передано в конструктор, или при первом вызове setNow. Так же нам надо создать переменную enabledLongTouch типа boolean, отображающую пригодность данного касания для реализуемого нами события. Нам надо постоянно проверять, не отошёл ли палец слишком далеко от старта. Этот функционал можно реализовать в setNow. В итоге должно получиться примерно так:

Теперь в методе run нашего Runnable мы можем проверять, длительное ли это касание:

Чтобы сделать длительное касание лучше — надо включить лёгкую вибрацию, когда оно активировалось. Для этого надо просто создать переменную vibrator типа Vibrator и в конструкторе установить ей значение следующим образом:

Важно: для работы с вибрацией в manifest’е должна быть следующая строка:

Тогда в методе run, нашего таймера в конце проверки на длительное касание можно вписать:

Рисование

Сейчас мы реализуем рисование на холсте и изменение размера кисти. Для этого мы каждую часть метода checkGestures разделим ещё на две части: режим рисования и обычный режим. В режиме рисования при касании мы просто будем вести линию, а в режиме рисования при multitouch мы будем изменять размер кисти. Вот так станет выглядеть метод checkGestures:

В последней строке я задаю значение некому cursor. Это переменная типа Point, содержащая координаты курсора. Курсор нужен лишь для того, чтобы ориентироваться в размере кисти. Для отображения курсора в методе onDraw добавляем:

Теперь мы можем перемещать холст, приближать, отдалять его, переходить в режим рисования, рисовать, изменять размер кисти. Осталось лишь реализовать выбор цвета.

Выбор цвета

Выбор цвета происходит после двойного касания по экрану. Для этого в ApplicationView нужно создать переменную, сохраняющую прошлое касание по экрану и переменную, сохраняющую координаты этого касания. Первая пусть будет называться lastTapTime типа long, а вторая — lastTapPosition типа Point. Тогда изменим метод onTouchEvent:

Нам осталось лишь реализовать диалог выбора цвета. Там, где происходит касание (помечено комментарием), пишем:

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

Заключение

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

Источник