Эксперименты с Android. Приложение 4

В двух предыдущих статьях цикла (Приложение 2, Приложение 3) рассматривались способы приема и передачи со­общений через ВТ-канал планшета. Сообщения формировались произвольно, любым текстом, «а- ля вообще». Но на практике информация переда­ется и принимается избирательно. Например, приложение должно уметь генерировать вполне определенный набор команд, а на приеме должно уметь выделять из общего потока данных лишь нужную часть. О том, как организовать двухсторон­нюю связь через «синий зуб», пойдет речь дальше.

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

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

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

Для ОС Android в простейшем случае приложе­ние может иметь абсолютно спартанский вид, без каких-либо «архитектурных» излишеств. Цвет фо­на — черный или белый, кнопки и надписи — од­нотипные, шрифт и размеры — по умолчанию.

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

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

Базовым гайдлайном для профессиональных дизайнеров андроидных приложений считается <http://developer.android.com/design/>. К сожалению, сайт англоязычный, правда, с достаточ­но понятными картинками. На русском языке до­полнительную информацию можно почерпнуть из ресурсов: <http://zaisl.conn/tagged/android>, <http://stfalcon.com/blog/post/android-material-design>

Дизайн: равнение на лучших

В течение многих лет продукты Apple iOS уста­навливали высокую планку в дизайнерских идеях, наделяя свои приложения изысканным и привле­кательным внешним видом. Если отвлечься от проблем авторского права, то здесь Андроиду есть что позаимствовать.

Первые два года Android сильно уступал iOS по дизайну, но после версии 3.0 положение дел стало улучшаться. Более того, в свежей версии ОС Android-5.0 Lollipop применяется оригинальная кон­цепция интерфейса под названием «Material Design». Новый «материальный дизайн» подразуме­вает поддержку как плоских, так и ЗО-элементов с тенями. В облике платформы преобладают белые и яркие тона, а также контрастная графика. Характер­ны скругленные системные иконки и плавная анима­ция с накладывающимися друг на друга слоями.

С другой стороны, желание создать особую «экосистему», приводит к тому, что андроидные гу­ру не рекомендуют слепо копировать кнопки, по­ля ввода и другие элементы от Apple (iOS) и Microsoft (Windows Mobile). Например, на рис.28 показаны стандартные для Андроида элементы дизайна, которые отличаются от iOS отсутствием характерной окантовки [5].

Дизайн: общие рекомендации

Полезные заметки по организации пользова­тельского интерфейса даны в трех частях вольно­го перевода статьи Якуба Линовски «А Good User Interface» <http://habrahabr.ru/company/adv/blog/186846/>, <http://www.uxfox.ru/goodui1/>, <http://habrahabr.ru/company/UXDepot/blog/217455/>.

Некоторые из тезисов:

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

Классика жанра — перевод статьи Ника Карсо­на «50 советов для разработки безупречного ди­зайна iOS приложения» <http://habrahabr.ru/post/137342/>

Один из советов: «…Палец менее точен, чем мышь, поэтому область нажатия на сенсорном эк­ране имеет значительную погрешность. Чтобы уп­ростить задачу, никогда не располагайте слишком много элементов управления в одной области эк­рана или слишком близко друг к другу, и убедитесь, что кнопки достаточно велики для точного на­жатия. Apple рекомендует размер не менее 44×44 пиксела».

Дизайн: стандартизация размеров

Пиксельных разрешений у Андроид-экранов ог­ромное множество. Здесь имеется в виду, что под ОС пишутся программы, как для мелких мобиль­ных телефонов, так и для 7… 11-дюймовых план­шетов. Для каждого из них при разработке дизай­на составляется предварительный макет экрана, на котором размещаются органы управления, ин­дикации, фоновый рисунок. Разумеется, между ними должны соблюдаться определенные геоме­трические пропорции.

Чтобы элементы интерфейса имели одинако­вый физический размер на экранах с разной диа­гональю, фирма Google ввела в обиход абстракт­ную единицу измерения «DP» или более конкретно «dpi» (Dots Per Inch) — это количество точек на дюйм в экране. Для справки, в мире Андроидов су­ществуют 4 основных диапазона размеров экра­на: small, normal, large, xlarge, а также несколько вариантов плотностей: от Idpi (Low density) до xxxhdpi (3*eXtra High density).

В табл.3 показана статистика за март 2015 го­да — процент количества устройств, которые имеют определенную конфигурацию экрана в со­четании с размером и плотностью «dpi» http://developer.android.com/about/dashboards/index.html#Screens.

Как видно, для планшетов чаще используется размер xlarge и плотность mdpi, для мобильных те­лефонов, соответственно, normal и hdpi. При этом надо помнить, что речь идет об одном линейном дюйме, но только в одном случае на него прихо­дится 120 точек, а в другом — 480.

Дизайн: разбивка на мелкие изображения

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

Если радиолюбитель пишет приложение под конкретно имеющееся у него мобильное устрой­ство, то размер экрана в пикселях известен, сле­довательно, можно подобрать фоновую картинку, которая идеально впишется в пропорции 16:9 или 4:3. Объем файла в байтах не критичен, посколь­ку конструктор AI2 самостоятельно адаптирует фо­новое изображение к нужному размеру.

При создании небольших картинок, которые «наклеиваются» сверху на сенсорные кнопки и таскбары, пользуются способом, применяемым при создании иконок. Главное, чтобы формат ри­сунка был PNG. Задача облегчается, если восполь­зоваться онлайн-сервисом «Android Asset Studio» <http://romannurik.github.io/AndroidAssetStudio/>.

Технология следующая. Зайти на сайт сервиса, выбрать раздел «Launcher icons», загрузить с ком­пьютера кнопкой «Image» приготовленный заранее

Таблица 3

= 2015 год =	Idpi,        %	mdpi,      %	hdpi,       %	xhdpi,     %	xxhdpi,   %
Small (2″-3,5″)	4,6	—	—	—	—
Normal (3″-4″)	—	8,4	38,7	18,9	15,8
Large (4//-7//)	0,5	5,1	0,6	0,6
Xlarge (7″-11″)	—	3,5	0,3	0,6	—
	120 dpi	160 dpi	240 dpi	320 dpi	480 dpi

PNG-рисунок, при необходимости увеличить про­зрачность окантовки (Trim), закруглить края (Shape— Square или Circle), указать цвет фона (Background), добавить градиент или трансформировать квадрат в «собачье ухо» (Effect—Score или Dog-Ear).

После этого скачать архив из облака в память компьютера (Download.ZIP) и наблюдать несколь­ко папок с масштабированными PNG-картинками разного разрешения от 48×48 до 192×192 пиксе­лей (рис.29). Далее выбрать нужную картинку, оп­тимизировать ее по объему на сайте <https://tiny- png.com/> и использовать для компоновки в конструкторе AI2.

Практическая часть

Полученные теоретические знания важно за­крепить на практике. В качестве примера предла­гается разработать «секретное» приложение «KeypadBT», содержащую головоломку, как эле­мент дизайна.

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

Во время тряски сработает датчик акселероме­тра планшета, после чего установится ВТ-соединение и на экране появится изображение тастатуры круглых управляющих кнопок, созданных сер­висом «Android Asset Studio» (рис.30).

Далее программа в бесконечном цикле опра­шивает кнопки. При нажатии на любую из них бу­дет передаваться на удаленное BT-устройство (компьютер) команда «1»…«3». В компьютере за­пускается терминальная программа TeraTerm-4.86, которая через COM-порт общается с BT-адаптером. Она автоматически «отбивает» входящие со­общения, возвращая их в том же виде обратно в планшет.

Чтобы это происходило, надо в меню програм­мы «Настройка—Терминал» отключить локальное эхо, а в меню «Управление—Макросы» запустить макрос «LoopBT.ttl» согласно листингу 1 (подроб­нее о макросах см. [6]). Редактировать и запускать макросы удобно специальной утилитой TTLEditor- 1.5.1 <http://ttleditor.software.informer.com/>.

Планшет после получения от компьютера сим­вола «1 »…«3» проводит его опознание и «живым» голосом сообщает порядковый номер цифры. То есть, если при нажатии на кнопку голосовое под­тверждение имеется, значит, заворот данных про­шел успешно, и наоборот.

На рис.31 показан внешний вид редактора блоков приложения «KeypadBT», в табл.4 — изме­нения в свойствах компонентов AI2.

Таблица 4

Компонент	Функция	Изменяемые свойства (остальное по умолчанию)
Screen 1	Активность	AlignHorizontal “Center», AppName и Title “KeypadBT”, Backgroundlmage “файл фона”, Icon “файл иконки”
TableArrangement1	Контейнер	Columns “3”, Rows “1”
Button1…3	Кнопки	Text “удалить”, Visible “удалить”, Image “файлы кнопок”
Clock1	Таймер	TimerEnable “удалить”
Sound1…3	Звуки	Source “файлы звуков 1, 2, 3”

Пояснения к мозаикам.

Строка 1. Акселерометр имеется практически в каждом планшете. Чтобы узнать, активирован ли он, надо повернуть корпус на 180 градусов, при этом должна соответствующим образом повер­нуться и картинка на экране. Если не получается, то следует поставить галочку в настройках Android в меню: «Система—Специальные возможности— Автоповорот экрана».

Строки 2, 3. Сопряжение с удаленным ВТ-устройством выполняется упрощенным методом, по прямому идентификатору, состоящему из 12 цифр, разделенных двоеточиями. Этот MAC-адрес будет уникальным для разных ВТ-адаптеров. Он указывается в закладке свойств Bluetooth Suite.

Строки 11, 12. В каждой из двух строк «спрята­ны» три строки, аналогичные 8-10, но для кнопок 2 и 3. Это стандартный прием сокращения места и повышения читабельности программы. Активи­зируется/деактивируется правой кнопкой мыши «Collapse Block» или «Expand Block».

Строка 15. В переменную «пате» помещается принятый байт информации. Имя переменной выбирается произвольно. Главное, чтобы оно бы­ло одинаковым при проверке содержимого пере­менной в строках 17, 20, 23.

Строки 19, 22, 25. Звуки «живых» голосов Sound1…Sound3 хранятся в МР3-файлах. Синте­зировать их можно несколькими способами — по­дробности ниже.

Компьютерные голоса

Озвучивание андроидных приложений через AI2 не вызывает особых затруднений. Действи­тельно, любое действие в программе можно со-

проводить проигры­ванием звукового файла с расширени­ем *.трЗ средствами ОС Android. Именно та­кой подход применял­ся в «Приложении 1», когда на­жатие на кнопку сопро­вождалось мяуканьем кота.

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

• <http://imtranslator.net/translate-and- speak/speak/russian/>;
• <http://www.oddcast.com/home/demos/tts/tts_example.php> (рис.32);
• <https://voicefabric.ru/>;
• <http://translate.google.com/>.

Качество синтезированной речи получа­ется довольно высокое, но, чтобы слова и предложения звучали безупречно, надо экс­периментально подобрать лучший голосовой движок, темп, женский или мужской голос. Интересные эффекты получаются при выбо­ре опций: «Pitch», «Echo», «Bullhorn» в серви­се Text-To-Speech и т.д.

Прослушать фразу — это полдела. Чтобы полу­чить реальный MPЗ-файл, нужно осуществить за­хват звукового потока из Интернета. Сделать это можно, например, бесплатной программой «Free Audio Recorder-6.6.0» <http://www.freeaudiorecorder.net/> (рис.33), которая сохраняет на диск все аудиоданные, воспроизводимые звуковой картой компьютера.

Далее придется немного поработать с аудио­редактором, чтобы «нарезать» нужные звуковые треки и освободить их от лишнего шума. Из сво­бодно распространяемых программ хорошие ре­зультаты получаются с Audacity-2.0.6 <http://audacity.sourceforge.net/>.

Авторские права

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

Например, на сайте <https://voicefabric.ru/> чет­ко указано: «Созданные в демо-режиме звуковые файлы нельзя использовать в публичных целях».

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

фильтрацию помех и шумоподавление провести аудиоредактором.

Литература

5. Ларин, А. Ошибки в дизайне Android прило­жений с примерами из России / <http://www.cms-magazine.ru/library/items/moblile/oshibki-v-dizaine-android-prilozhenii/>.
6. Рюмик, С. SIM900-EVB Kit, или GSM-модули четыре года спустя / Сергей Рюмик — Радиоаматор — 2013. — № 8. — С.42-45.

Автор: Сергей Рюмик, г. Чернигов

Источник: Радиоаматор №4, 2015