Swipeup Utility — сделай свайп вверх полезным. Что такое свайп на Android и как он делается? Как отключить свайп вверх при включении телефона

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

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

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

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

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

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

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

Касание с перемещение в Android OS – это аналог перетаскивания объекта мышью с ее зажатой левой кнопкой. Как и в компьютерных операционных системах, в сенсорных устройствах под управлением мобильных ОС перетаскивание позволяет перемещать объекты (папки, файлы, иконки и т.п.) из одного места в другое.

Для выполнения этого действия коснитесь нужного объекта на экране и не отпускайте палец. Когда объект выделиться, то его можно перетащить в нужное место.

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

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

Термин gesture — способ объединить движения пальцем по экрану для запуска какого-то действия; движение пальцем в таком случае используется вместо просто касания или клика. Полное касание (complete touch) или mouse — move-capturing функция — нужна для того, чтобы жесты регистрировались и были абсолютно правильными. Сегодня хорошая поддержка этой функции есть только в браузерах Safari и Android.

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

Рис. 8.5. Google Fast Flip новый просмотрищик, использующий жесты на iPhone и Android устройств. Слева вы увидите предупреждающий диалог с инструкциями о том, как его использовать. Вы увидите инструкции только один раз.

Жест swipe (также известен как flip) — технология для тач-браузеров, обычно используется для перемещения контента вперед-назад. Этот жест используется, например, во многих фото-галереях для смены выведенного на экран изображения и в презентациях для перелистывания слайдов. Суть жеста — простое движение пальцем по оси Х слева направо (горизонтальный swipe) или по оси Y сверху вниз (вертикальный swipe). swipe-жест поддерживается практически в каждом сенсорном устройстве, так как осуществляется одним пальцем.

Для перехвата swipe-действия нет специального стандартного события, поэтому будем эмулировать его, используя имеющиеся стандартные события

В устройствах Symbian 5-го поколения если вместо курсора использовать палец, то для событий mouse down, move и up получаются довольно странные результаты. Событие генерируется только один раз во время действия пальцем «перетащить» (drag), а событие вообще не срабатывает, если палец перемещен из точки начальных mouse-down координат. Поэтому, для обнаружения swipe в некоторых ситуациях нужны разные подходы.

Последовательность действий:

Последний пункт может быть заменен проверкой жеста на-лету внутри события onmousemove.

Если ты используешь в работе jQuery, можно для обнаружения горизонтального жеста swipe на устройствах iPhone использовать бесплатный плагин отсюда http://plugins.jquery.com/project/swipe .

При помощи следующего кода мы можем создать объектно-ориентированную библиотеку для обнаружения swipe (совместимо iPhone, Android и другими устройствами):

/** Creates a swipe gesture event handler */ function MobiSwipe(id) { // Constants this.HORIZONTAL = 1; this.VERTICAL = 2; this.AXIS_THRESHOLD = 30; // The user will not define a perfect line this.GESTURE_DELTA = 60; // The min delta in the axis to fire the gesture // Public members this.direction = this.HORIZONTAL; this.element = document.getElementById(id); this.onswiperight = null; this.onswipeleft = null; this.onswipeup = null; this.onswipedown = null; this.inGesture = false; // Private members this._originalX = 0 this._originalY = 0 var _this = this; // Makes the element clickable on iPhone this.element.onclick = function() {void(0)}; var mousedown = function(event) { // Finger press event.preventDefault(); _this.inGesture = true; _this._originalX = (event.touches) ? event.touches.pageX: event.pageX; _this._originalY = (event.touches) ? event.touches.pageY: event.pageY; // Only for iPhone if (event.touches && event.touches.length!=1) { _this.inGesture = false; // Cancel gesture on multiple touch } }; var mousemove = function(event) { // Finger moving event.preventDefault(); var delta = 0; // Get coordinates using iPhone or standard technique var currentX = (event.touches) ? event.touches.pageX: event.pageX; var currentY = (event.touches) ? event.touches.pageY: event.pageY; // Check if the user is still in line with the axis if (_this.inGesture) { if ((_this.direction==_this.HORIZONTAL)) { delta = Math.abs(currentY-_this._originalY); } else { delta = Math.abs(currentX-_this._originalX); } if (delta >_this.AXIS_THRESHOLD) { // Cancel the gesture, the user is moving in the other axis _this.inGesture = false; } } // Check if we can consider it a swipe if (_this.inGesture) { if (_this.direction==_this.HORIZONTAL) { delta = Math.abs(currentX-_this._originalX); if (currentX>_this._originalX) { direction = 0; } else { direction = 1; } } else { delta = Math.abs(currentY-_this._originalY); if (currentY>_this._originalY) { direction = 2; } else { direction = 3; } } if (delta >= _this.GESTURE_DELTA) { // Gesture detected! var handler = null; switch(direction) { case 0: handler = _this.onswiperight; break; case 1: handler = _this.onswipeleft; break; case 2: handler = _this.onswipedown; break; case 3: handler = _this.onswipeup; break; } if (handler!=null) { // Call to the callback with the optional delta handler(delta); } _this.inGesture = false; } } }; // iPhone and Android"s events this.element.addEventListener("touchstart", mousedown, false); this.element.addEventListener("touchmove", mousemove, false); this.element.addEventListener("touchcancel", function() { _this.inGesture = false; }, false); // We should also assign our mousedown and mousemove functions to // standard events on compatible devices }

Вот простой пример использования нашей бибилотеки swipe.js с с горизонтальным обнаружением swipe и другим с вертикальным обнаружением:

Swipe Gesture Detection window.onload = function() { var swipev = new MobiSwipe("vertical"); swipev.direction = swipev.VERTICAL; swipev.onswipedown = function() { alert("down"); }; swipev.onswipeup = function() { alert("up"); }; var swipeh = new MobiSwipe("horizontal"); swipeh.direction = swipeh.HORIZONTAL; swipeh.onswiperight = function() { alert("right"); }; swipeh.onswipeleft = function() { alert("left"); }; } Vertical Swipe Horizontal Swipe

Во многих сенсорных устройствах жест «перетащить» (drag) используется для прокрутки содержимого страницы и, при этом, не поддерживается функция preventDefault (о функции предотвращения поведения по умолчанию мы говорили чуть ранее в этой главе). Именно поэтому мы должны помимо жеста swipe рассмотреть и другие доступные способы навигации.

Когда iPhone только появился, самыми крутыми функциями в нем были именно жесты изменения масштаба и поворота. Используя жест pinching (сдвигая и раздвигая два пальца в щепотке) пользователь мог увеличить или уменьшить масштаб контента — это, как правило, изображение — на странице, а поворачивая два пальца по кругу изображение можно повернуть.

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

К счастью, начиная с iOS 2.0 эти жесты можно обнаружить не прибегая с низкоуровневой математике в тач-событиях. В таблице 8.35 перечислены три расширения WebKit, которые доступны в качестве событий. В браузере Android также добавлена поддержка этих событий.

Для масштабирования и поворота используются эти же события. Все три получают параметр GestureEvent. У этого параметра есть типичные для события свойства, а также дополнительные свойства scale и rotation.

Свойство scale определяет расстояние между двумя пальцами как множитель с плавающей точкой от начала дистанции, где было начало жеста. Если значение больше 1.0, значит это открытый pinch (увеличение), а если значение 1.0 — pinch закрытия (уменьшение).

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

Я знаю, что ты сейчас думаешь: «Вращение и изменение масштаба — это отлично, но какой нам от них толк, если мы работаем с HTML?». Здесь нам приходят на помощь CSS расширения для Safari на iOS (и в других браузеров с соответствующей поддержкой) с одним свойством и двумя функциями для управлением его значением: rotate и scale.

Функция rotate получает параметр в градусах и нам нужно определить deg unit после числа (например, rotate(90deg)). Узнать это мы можем из скрипта при помощи element.style.webkitTransform.

Давай рассмотри простой пример:

Gesture Management function gesture(event) { // We round values with two decimals event.target.innerHTML = "Rotation: " + Math.round(event.rotation*100)/100 + " Scale: " + Math.round(event.scale*100)/100; // We apply the transform functions to the element event.target.style.webkitTransform = "rotate(" + event.rotation%360 + "deg)" + " scale(" + event.scale + ")"; }

Как работает пример можешь увидеть на Рисунке 8-6. На совместимых устройствах ты можешь двумя пальцами поворачивать и масштабировать (вместе со всем содержимым). Только вот в чем проблема? Стиль преобразования всегда применяется к исходному элементу. Так, если мы применим к элементу масштаб 2.0, а потом еще раз увеличим на 0.5, то новое значение будет 0.5, а не 1.0, как можно было бы ожидать.

Рис. 8.6. Сочетая сенсорные события с CSS трансформациями, можно вращать и масштабировать элементы на своем сайте.

Для типичного zoom-rotate поведения мы должны заменить функцию на следующее:

var rotation = 0; var scale = 1; function gesture(event) { event.target.innerHTML = "Rotation: " + Math.round((event.rotation+rotation)*100)/100 + " Scale: " + Math.round((event.scale*scale)*100)/100; event.target.style.webkitTransform = "rotate(" + (event.rotation+rotation)%360 + "deg)" + " scale(" + event.scale*scale + ")"; } function gestureend(event) { rotation = event.rotation+rotation; scale = event.scale*scale; }

Ни для кого не секрет, что удержание кнопки «Домой» или свайп от неё вверх на домашнем экране вызывают в Android сервис индивидуальных подсказок Google Now. Однако не каждый может находить его полезным. А те, кто ценит старания Google услужить пользователю, чаще всего уже имеют в своём распоряжении Google Now на крайнем левом экране благодаря чистому Android или лаунчеру Google Старт. Фактически из-за этого очень удобная функция остаётся бесполезной. Но, как и всегда, на выручку приходят сторонние разработчики и их приложение Swipeup Utility !

Конечно, опытные пользователи сразу отметят, что таких приложений в Google Play наверняка не один десяток. Однако у Swipe Up Utility на поверку может оказаться несколько преимуществ.

Во-первых, не будем забывать, что Android давным-давно оставил позади версию 2.0 и больше не заставляет пользователей плакать кровавыми слезами. Напротив, с приходом Lollipop и распространением канонов среди разработчиков мобильная ОС от Google стала истинным пристанищем интерфейс-эстетов. Swipeup Utility, несмотря на то что его интерфейс, по сути, создан для единоразовой настройки приложения, выполнен вполне в духе времени. В нем, конечно, нет плавающей кнопки или выдвигающейся шторки с завораживающей анимацией стрелочки, но они тут и ни к чему. Зато у него симпатичная иконка и значки предлагаемых функций.

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

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

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

Руки являются прекрасным инструментом для коммуникаций с людьми и окружающей средой.

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

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

Использование жестов для управления мобильными устройствами стало повсеместным. Мобильные устройства без сенсорных экранов уходят в прошлое. Теперь вся сила коммуникаций лишь в ваших двух руках .

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

В этом справочнике мы рассмотрим все основные жесты, которые используются на мобильных устройствах: Tap (Тап), Swipe (Свайп), Long Press (Долгое нажатие), Long Press и Drag (Нажал и потянул), Pinch и Spread (Стягивание и растягивание), Double Tap (Двойное нажатие), Force Touch (Сильное нажатие).

Тап – это клик в мире мобильных устройств. Однократное непродолжительное нажатие на элемент. Позволяет взаимодействовать с любыми доступными обьектами на экране.

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

Свайп – это второй по распространённости жест после тапа. Он знаком каждому, кто когда-либо заходил в интернет с мобильного устройства.

Его использование интуитивно и достаточно ограничено: свайп для того, чтобы прокрутить страницу вверх/вниз (скролл), или, чтобы перемещаться между экранами (главный экран на iOS, свайп влево / вправо позволяет перемещаться между страницами главного экрана).

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

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

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

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

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

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

Данный жест является анлогом функции drag and drop, которая знакома всем на стационарных компьютерах. Долгое нажатие на перемещаемом обьекте активирует возможность перемещать его путём перетаскивания.

Периодически встречается на всех платформах (например для смены расположения иконки на рабочем столе, смены порядка и расположения элементов и т.п.).

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

Данный жест позволяет сразу видеть результат взаимодействия с обьектом.

Также, в iOS данные жесты позволяют открывать/закрывать фотографии и выходить из альбома.

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

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

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

Детально данная технология рассмотрена в .

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

Самым основным минусом жестов является их неинтуитивность . Вы можете рассчитывать, что люди знакомы с 7 перечисленными выше жестами, но они совершенно не знакомы с остальными жестами.

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

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

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

Поэтому, если вы планируете дополнить приложение своими жестами, необходимо решить следующее:

• Насколько востребованы дополнительные жесты вашим пользователям
• Не конфликтуют ли они с жестами операционной системы
• Как вы будете обучать новым жестам пользователей

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

Допустим, вы стали обладателем новенького смартфона. Впереди вас ждет увлекательное «путешествие» по разделам меню, в котором можно найти массу всего интересного. Помимо этого пользователей также интересуют термины, так или иначе связанные с сенсорными устройствами. К примеру, что такое свайп? Знают не все, а между тем, сталкиваются с этим чуть ли не ежедневно, а то и ежечасно.

Swype (от англ. swipe - проводить не отрывая + type - набирать текст) — торговая марка, которая используется компанией Swype Inc. для обозначения способа ввода текста таким образом, при котором палец не отрывается от клавиатуры. Считается, что в этом случае пользователь способен набрать куда больше слов за тот же промежуток времени по сравнению с клавиатурой, которая не использует указанный способ ввода текста.

Пример на базе клавиатуры Gboard:

Обратите внимание, что система способна автоматически подбирать слова (автоподбор).

Этот способ ввода можно включить/отключить через настройки клавиатуры. На примере того же приложения Gboard — «Непрерывный ввод»:

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

Однако выше — лишь одно значения слова «свайп», ведь имеется еще одно от англ. swipe — проводить не отрывая. Что это значит? Значит, что свайп — провести пальцем по экрану смартфона. К примеру, если вам необходимо открыть панель быстрого доступа или так называемую шторку, вы должны сделать свайп от верхней части экрана к нижней, то есть провести пальцем сверху вниз:

• Свайп влево — провести пальцем по экрану влево.

• Свайп вправо — провести пальцем по экрану вправо.

• Свайп вниз — провести пальцем по экрану вниз.

• Свайп вверх — провести пальцем по экрану вверх.