Як вимкнути свайп вгору, коли телефон увімкнено. Сенсорні жести

Припустимо, ви стали власником нового смартфона. Попереду на вас чекає захоплююча «подорож» по розділах меню, в якому можна знайти масу всього цікавого. Крім цього, користувачів також цікавлять терміни, так чи інакше пов'язані з сенсорними пристроями. Наприклад, що таке свайп? Знають не всі, а тим часом стикаються з цим чи не щодня, а то й щогодини.

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

Приклад на базі клавіатури Gboard:

Зверніть увагу, що система здатна автоматично вибирати слова (автопідбір).

Цей спосіб введення можна увімкнути/вимкнути за допомогою клавіатури. На прикладі того ж додатку Gboard - «Безперервне введення»:

Цікаво, що творцем способу написання тексту є та сама людина, яка колись придумала систему введення тексту T9.

Однак вище - лише одне значення слова "свайп", адже є ще одне від англ. swipe - проводити не відриваючи. Що це означає? Значить, що свайп провести пальцем по екрану смартфона. Наприклад, якщо вам потрібно відкрити панель швидкого доступуабо так звану шторку, ви повинні зробити свайп від верхньої частини екрана до нижньої, тобто провести пальцем зверху донизу:

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

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

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

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

Термін 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 в деяких ситуаціях потрібні різні підходи.

Послідовність дій:

Останній пункт може бути замінений перевіркою жесту на-льоту всередині події намішеві.

Якщо ти використовуєш роботу 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; ;this.onswipeup = null; this.onswipedown = null; onclick = function() (void(0)); var mousedown = function(event)( // Finger press event.preventDefault(); pageX: event.pageX; _this._originalY = (event.touches) ? event.pageY; event.pageY; = false; // Cancel gesture on multiple touch)); var mousemove = function(event) ( // Finger moving event.preventDefault(); var delta = 0; // Get coordinates using iPhone або standard technique var currentX = (event.touches) ? event.touches.pageX: event.pageX ; var currentY = (event.touches) ? event.touches.pageY: event.pageY; 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 ather axis _this.inGesture = false; 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;) if (handler!=null) ( // Call callback with optional delta handler(delta); ) _this.inGesture = false; )))); // iPhone і Android" events this.element.addEventListener("touchstart", mousedown, false); this.element.addEventListener("touchmove", mousemove, false); this.element.addEventListener("touchcancel", function( ) ( _this.inGesture = false; ), false);

Ось простий приклад використання нашої бібілотеки swipe.js з горизонтальним виявленням swipe та іншим з вертикальним виявленням:

Swipe Gesture Detection window.onload = function() ( var swipev = new MobiSwipe("vertical"); swipev.direction = swipev.VERTICAL; swipev.onswipedown = function() ( alert("down"); ); = function() ( alert("up"); ); var swipeh = new MobiSwipe("horizontal"); swipeh.onswipeleft = function() ( alert("left"); );

В багатьох сенсорних пристрояхжест "перетягнути" (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 2 decimals event.target.innerHTML = "Rotation: " + Math.round(event.rotation*100)/100 + " Scale: " + Math.round(event .scale*100)/100; // We apply transform functions to 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; function gestureend(event) ( rotation = event.rotation+rotation; scale = event.scale*scale; )Переважна більшість сучасних мобільних пристроївмають сенсорний екран, за допомогою якого можна керувати пристроєм. Тобто. замість натискання на механічні кнопкиСенсорних мобільних пристроїв, спочатку такий спосіб взаємодії з його гаджетом буде незвичним. Однак освоювання жестів відбувається практично відразу й надалі не викликає труднощів.

Дотик має другу назву - тап. Це найчастіша дія, що застосовується в сенсорне управління. Тапом можна включати якісь функції, запускати програми, вибрати пункти меню, активувати параметр тощо. Торкання нагадує клік миші у комп'ютері. Якщо по відношенню до комп'ютера говорять - клікнути мишею, то в Android можна почути - тапнути або двічі тапнути.

Виконати цю дію, як ви здогадалися, дуже просто. Потрібно торкнутися кінчиком пальця у потрібному місці екрана. Наприклад, для запуску програми достатньо тапнути за його іконкою. Якщо потрібно ввести текст, достатньо торкнутися в полі введення для появи , на якій можна набирати текст торканням символів.

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

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

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

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

Торкання з переміщення в Android OS - це аналог перетягування об'єкта мишею з її лівою кнопкою. Як і в комп'ютерних операційні системи, в сенсорних пристроях під керуванням мобільних ОС перетягування дозволяє переміщати об'єкти (папки, файли, іконки тощо) з одного місця до іншого.

Для виконання цієї дії торкніться потрібного об'єкта на екрані та не відпускайте палець. Коли об'єкт виділитися, його можна перетягнути у потрібне місце.

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

Всі жести в Android інтуїтивно зрозумілі та не складні. Після невеликого тренування ви будете впевнено керувати вашим смартфоном або планшетом, навіть не замислюючись про свої дії.

Розповідаючи про різні можливості пристроїв на базі ОС Android, ми часто вживаємо таке незвичайне слово як «свайп». Виявилося, що багато користувачів не знають його значення. Відновимо цю прогалину.

Слово свайп має одразу два значення. У першому випадку свайп - це спеціальний жест, коли ви кладете палець на екран смартфона або планшета і ведете його в потрібному напрямку екраном. Наприклад, щоб відкрити шторку на смартфоні, потрібно зробити свайп від верхньої рамки пристрою до нижньої:

Важливо при цьому відзначити, що слово «свайп» в даному сенсі можна вживати стосовно будь-якого девайсу, який підтримує такі рухи пальцем по екрану, а не тільки на ОС Android. Так, рухи по екрану на пристроях Apple(iPhone, iPad) також називаються свайпом.

Друге значення - назва клавіатури Swype, яка дозволяє вводити текст на екрані смартфона або планшета без відриву пальця. Творцем клавіатури Swype (від англ. swipe – проводити не відриваючи, ковзати і type – друкувати текст) є Cliff Kushler.

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

Ні для кого не секрет, що утримання кнопки «Додому» або свайп від неї нагору домашньому екранівикликають у 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. Хто знає, яка статистика може стати в нагоді в житті.