Приложения в стиле material design. Material Design
Шестеренки логические пазлы - интересная андроид игра, где необходимо выставлять шестеренки таким образом, чтобы они активировали все подвижные элементы красного цвета. Это бесплатное приложение отлично тренирует мышление и логику, благодаря которым прохождение всех уровней дело времени. Каждое последующее задание будет включать в себя все больше и больше компонентов, которые необходимо задействовать в общем решении. Интерфейс достаточно просто, понятный, поэтому взаимодействие со всеми вещами происходит очень удобно и легко.
Сюжет и суть игры:
- Пользователь должен правильно подставлять вращающиеся элементы в этой андроид игре, чтобы привести в действие детали красного цвета. Для этого необходимо использовать вспомогательные объекты, которые будут менять ход движения, а также задавать скорость. Вас ждет более 1000 увлекательных уровней, где нужно показать свое знание, и мастерство как можно лучше. При желании можно воспользоваться редактором заданий, что позволит придумать новые испытания для самого себя и других пользователей. Можно скачивать уже готовые уровни, созданные другими игроками и попробовать их преодолеть.
Управление:
- Взаимодействие с шестеренками в этом андроид приложении осуществляется путем нажатия на них и перетягивании на нужную позицию. Зеленый объект является ведущим, поэтому от него и приходит все движение. Задача геймера создать цепь, при которой красные элементы будут вращаться в нужном направлении. Это позволяет лучше понять, как они должны себя вести при тех или иных условиях. Сини объект требуют непосредственного вмешательства пользователя в процесс, заставляя его вручную вращать деталь. Нужно учитывать множество факторов, таких как гравитация, направление поворота, скорость вращения и многие другие. Действуйте согласно заданию, добиваясь поставленных целей. Также используйте вспомогательные предметы, если они присутствуют в доступных деталях.
Динамика:
- Шестеренки логические пазлы
- интересное приложение, в котором каждый желающий может проверить свое логическое мышление и то, как работают сложные механизмы. Каждый уровень представляет собой сочетание нескольких частей, взаимодействующих между собой. Большое количество заданий различной сложности, позволяет хорошо отточить свои навыки.
Графика и звук:
- Приятно оформление, где компоненты расположены на какой-либо поверхности. Части разделены по цветам и функциональности, что благодаря оттенкам позволяет понять, как с ними взаимодействовать. Приятные, реалистичные звуки делают игровой процесс интереснее, приковывая внимание к решению проблемы.
Особенности игры:
Масса заданий
Возможность создавать свои уровни
Понятное управление
Хороший дизайн
Вывод:
- Шестеренки логические пазлы
- увлекательная, развивающая android головоломка, где каждое неправильно действие повлечет за собой множество последствий, после которых ничего работать не будет, поэтому важно все делать грамотно и четко.
На конференции для разработчиков Google I/O 2018, кроме обновленного Android и более глубокой интеграции искусственного интеллекта в свои сервисы, компания Google представила новый стандарт в дизайне системы и мобильных приложений - Material Design 2.0. Что нового?
Белое пространство и полупрозрачность
Одним из самых заметных изменений в новом материальном дизайне является минимальное количество насыщенных цветов и серых подложек, только сплошное белое пространство и полупрозрачность. На мой взгляд это смотрится очень свежо, тем самым выводит операционную систему и софт на новый уровень визуального восприятия. Отныне стоковый Android P, без графических надстроек от сторонних производителей, я по праву считаю самым красивым решением среди интерфейсов. ИМХО.Новые инструменты для разработчиков:
Material Theme
Плагин Material Theme для Sketch, представляет собой по сути библиотеку шрифтов, иконок и фирменных цветов предусмотренных новыми гайдлайнам Google в Android P. Также при разработке с его помощью вы в пару кликов можете отредактировать форму компонентов и типографику в вашем проекте.
Больше скруглений и минимализма
Как многие отметили, внешний вид стал очень схож с Apple iOS 10 и 11, но определенно такой шаг был предпринят компанией специально для производителей и владельцев безрамочных смартфонов, количество которых с каждым годом неумолимо становится все больше, ведь такой внешний вид системы и софта куда лучше сочетается с их закругленными дисплеями.
Новые шрифты
В новом оформлении логотипов и фирменных сервисов разработчики и дизайнеры Google использовали шрифтовую гарнитуру Product Sans. Для них создано специальное ответвление Google Sans. Оно базируется на вышеупомянутом шрифте, пришедшему на смену стандартному Roboto.
Так что в скором времени мы можем ждать масштабный редизайн всех веб и мобильных сервисов Google. На данный момент в магазине приложений одними их таких первенцев являются Google Play Игры, Google Tasks и приложение для участников конференции Google I/O 2018.
- Обновленный стиль фирменных иллюстраций
- Использование четырех основных цветов логотипа в качестве визуального языка
Пример, новая версия Gmail:
Концепты Material Design 2.0
Само собой сообщество дизайнеров отреагировало на предстоящие перемены в дизайне от Google, и ровно месяц назад пользователь Reddit под ником Morphicsn0w представил свое видение площадки Google Play.
Кроме визуальных изменений в виде закругленных карточек презентующих приложения, автор отказался от ненужных, на его взгляд, разделов вроде недавно загруженных приложений, сделав тем самым интерфейс магазина более простым и информативным.
На экранах с описанием приложений Morphicsn0w сфокусировал внимание на описании приложений, сместив акцент с информации о количестве загрузок и оценках пользователей.
Также дизайнер переработал систему поиска в Google Play, добавив сортировку найденных результатов по цене, дате обновления, рейтингу и количеству загрузок. Наличие такой сортировки, значительно упростило бы поиск нужного софта на просторах магазина, жду и надеюсь на реализацию таковой от Google.
Не обошли стороной и любимый многими YouTube, автор портала 9to5Google, а по совместительству неплохой дизайнер Алекс Брукс (Alex Brooks) пофантазировал над тем, что можно было бы изменить в существующем клиенте видеохостинга. Реузльтат лично меня очень и очень воодушевил.
Первое, что переделал Алекс, это навигационную панель главного экрана, окрасив её в яркие, жизнерадостные цвета. Вслед за первым пунктом идет переработанная поисковая строка, теперь она вынесена не отдельной кнопкой, а занимает всю полезную площадь верхней части приложения, тем самым упрощая доступ к ней. А плашка с количеством подписчиков, кнопкой оформления подписки на канал и возврата на предыдущий уровень в представлении автора располагается снизу, что тоже является полезным с точки зрения удобства использования решением.
Раздел библиотеки (история просмотренных видео, управление загруженными роликами, понравившиеся видео и т.д.) дизайнер совместил с разделом настроек пользовательского профиля, теперь доступ к обоим параметрам можно получить по нажатию на юзерпик. По моему мнению это хоть и спорное, но все же в некоторой степени правильное решение, так как оно упрощает взаимодействие пользователя с сервисом и делает приложение более понятным для новых пользователей, которые только знакомятся с миром мобильных технологий.
Более подробную информацию про концепт YouTube от Алекса читайте в оригинальной статье .
Концепт Google Play Music в Material Design 2.0
Вдохновившись презентацией и десятками работ других дизайнеров, я решил попробовать и сделать что-то свое, взяв за основу один из нынешних сервисов Google, мой выбор пал на Play Music. Ранее с этим сервисом, именно как со стриминговой платформой я никогда не работал, но по долгу службы пришлось. Впечатления сервис вызвал исключительно положительные хотя бы потому, что само приложение работает адекватно и не вылетает, в отличие от Apple Music, которым я пользуюсь с самого момента его релиза на Android.
В целом, сервисы похожи, и оба выполняют свою первостепенную задачу - воспроизведение музыки. И к обоим есть претензии по части интерфейса, но так как сегодня мы говорим о Google, то и рассматривать соответственно будем их сервис.
Главный экран
Первая претензия к главному экрану – мне не нравится что такое огромное пространство, занято исключительно поисковой строкой и обложками плейлистов с подборками. Собственно, в первую очередь я и решил это исправить.
В моем концепте главный экран представляет собой всю ту же, но немного переосмысленную ленту с подборками альбомов, песен, плейлистов на основе вкусов пользователя, только теперь чтобы посмотреть содержимое и перейти к воспроизведению нужного трека, вам не надо делать лишний клик и покидать главный экран, это же касается перехода между разделами (главная, недавние, хит-парад и т.д), которое теперь можно осуществить с помощью свайпов по экрану.
Плеер
Второй неудачный в оформлении, на мой взгляд пункт - это плеер. В официальном приложении Google Play Music обложки песен растягиваются по всей диагонали экрана смартфона, из-за чего на устройствах с высоким разрешением дисплея они выглядят очень неаккуратно и размазано, решение проблемы я представил так:
Теперь обложки аккуратно располагаются по середине, а по левому и правому краю показывается превью предыдущего и следующего трека, как бы намекая на возможность переключения их свайпом.
Медиатека
Третье, что мне не нравится в Play Music - это расположение и убранство медиатеки. На мой взгляд её устройство слишком сложное. Например, чтобы получить доступ к данному разделу с главного экрана, требуется совершить целых четыре действия: сделать свайп, чтобы вызвать боковое меню; клик для выбора раздела «Фонотека»; свайпнуть по списку чтобы выбрать требуемую вкладку (плейлисты, радиостанции, исполнители, альбомы).
Поэтому я переместил кнопку с доступом к добавленным трекам в нижний док, а при его открытии по умолчанию будет выставлена вкладка альбомов с возможность их сортировки по дате релиза, добавления и алфавиту.
Меню/Side Bar
В соответствии с новыми принципами дизайна приложений Google, привычное меню с доступом к настройкам я переместил в верхний правый угол.
Презентация концепта Google Play Music на Behance
Заключение
Подводя итоги, хочу сказать то, что меня очень радует путь по которому старается идти Google. Кроме серьезного скачка в развитии и удобстве своих сервисов компания двигает вперед дизайн-код. Писав полгода назад статью про опыт использования iOS 6 в 2018 году, я поймал себя на мысли, что на протяжении многих лет мобильные операционные системы Android и iOS в плане визуального и концептуального исполнения интерфейса не особо эволюционировали, но теперь же я полностью разубедился в своей позиции, по крайней мере в отношении к Android.
Спасибо за внимание!
Material Design
Material Design был представлен вместе с Android 5 в 2014 году.
С релизом Material Design Android наконец-то получил не только гайдлайны по дизайну приложений, но и философию дизайна. До его релиза в Android использовался Holo , и не было полноценных гайдов по дизайну. Кроме того, Holo был достаточно некрасив, и разработчикам, которые хотели выпустить симпатичное приложение приходилось нанимать дизайнера.
С выходом же Material Design любой разработчик может создать приложение, которое будет прекрасно выглядеть, не привлекая никого "со стороны".
Так что же такое Material Design? Google называет его "визуальным языком", с помощью которого можно представить на экране физические объекты, при этом не используется так называемый скевоморфизм, типичный для iOS до версии 7.
Вместо этого используется Flat , при этом объекты расположены по трём осям, и "высота" (по оси Z) выделяется при помощи теней.
Взгляните на эту картинку:
На ней вы видите, что элементы расположены "слоями" друг над другом, и это подчёркивается тенями. Такой подход даёт пользователю ощущение, что он взаимодействует с реальными объектами, но при этом не отходит от общего тренда на флэт-дизайн.
Основные принципы Material Design
- Тактильные поверхности. Как вы видели выше, интерфейс в Material Design строится из слоёв, находящихся на разной высоте друг над другом, и помогают пользователю лучше понимать структуру интерфейса. При этом эти слои выглядят, как листы бумаги, поэтому пользователь как бы взаимодействует с реальной "бумагой".
- Полиграфический дизайн. Поскольку слои интерфейса - это "бумага", типографика невероятно важна. Современный дизайн строится на принципе "Content First", то есть самое главное в интерфейсе - это контент. А поскольку основным контентом в большинстве приложений является текст, очень важно, чтобы текст читался максимально хорошо.
- Осмысленная анимация. В настоящем мире предметы не возникают из ниоткуда (и не исчезают в никуда), поэтому важно, чтобы все анимации были похожи на поведение объектов в реальности.
- Адаптивный дизайн. Дизайн должен адаптироваться под различные устройства, соблюдая при этом принципы, изложенные выше.
Изучаем Material Design
Самое крутое, что есть в Material Design - это документация. На официальном сайте вы найдёте подробнейшие гайды, используя которые можно построить идеальный интерфейс, в том числе примеры, как нужно поступать, а как не стоит.
Обратите внимание: обязательно полностью прочитайте гайды на сайте, и регулярно обращайтесь к ним при разработке.
Я видел очень много хороших Android-разработчиков и отличных приложений, и заметил один факт: большинство разработчиков - очень плохие дизайнеры.
Гайдов по Material Design вполне достаточно, чтобы делать очень неплохие интерфейсы.
Поскольку наш ресурс - не документация, а проводник в мир Android-разработки, я не буду разбирать дизайн во всех подробностях, а лишь объясню основные принципы и паттерны в достаточном объёме.
Давайте рассмотрим на конкретных примерах, как использовать Material Design в своих проектах.
Toolbar
Toolbar - специальный View , который обычно отображается в верхней части экрана.
Обычно в нём находятся заголовок экрана и различные иконки действий (меню).
До Android 5.0 те же функции выполнял ActionBar , и хотя визуально в общем случае Toolbar не отличается от ActionBar , технически это совершенно разные вещи.
Тогда как ActionBar - часть окна, в котором расположена Activity , Toolbar - это View внутри иерархии View в Activity , и такой подход позволяет достичь невероятной гибкости при создании интерфейсов.
Toolbar поддерживается начиная с Android 5. К счастью, в отличие от ActionBar , Toolbar был портирован Google для версий Android ниже Lollipop, и для его использования достаточно лишь подключить библиотеку appcompat-v7 , которая, кстати, подключена по умолчанию в нашем проекте:
Dependencies { // ... implementation "com.android.support:appcompat-v7:26.1.0" // ...
Поскольку мы работаем с эмулятором, версия которого выше Lollipop, Toolbar отображается без каких-либо телодвижений. Тем не менее, в реалиях Android нужно поддерживать и более ранние версии Android.
В первую очередь нам нужно изменить тему приложения. Android позволяет кастомизировать интерфейс приложений, и мы можем сделать это, в том числе, используя темы. Откройте файл res/values/styles.xml:
В нём вы увидите такой код:
Как вы видите, в нём задана дефолтная тема оформления, подразумевающая использование тёмного ActionBar .
Эта тема наследуется от системной Theme.AppCompat.Light.DarkActionBar . Чтобы использовать Toolbar, нужно добавить тему, убирающую ActionBar и создать тему для Toolbar . Давайте сделаем это:
Так же нужно установить новую тему в AndroidManifest.xml:
Теперь у нас установлена светлая тема (т.е. темный контент на светлом фоне) без ActionBar .
Поскольку Toolbar является обычным View , давайте создадим лэйаут для него. Создайте новый файл toolbar.xml в директории res/layout со следующим содержимым:
Нам понадобится лэйаут под названием CoordinatorLayout , находящийся в библиотеке AppCompat Design , поэтому подключите эту библиотеку в build.gradle:
Implementation "com.android.support:design:26.1.0"
Всегда старайтесь использовать актуальную версию Support-библиотек. На момент создания этого урока актуальной является 26.1.0, но к тому моменту, когда вы будете читать этот урок, скорее всего уже выйдет несколько обновлений для неё. Android Studio сообщит вам об этом - главное, чтобы у всех Support-библиотек была одна версия.
Теперь мы можем включить этот файл в разметку activity_main.xml , и она станет выглядеть так:
Что изменилось?
- Мы заменили FrameLayout на CoordinatorLayout . CoordinatorLayout - это серьёзно изменённый FrameLayout , наделённый дополнительными возможностями. В современных приложениях, использующих Material Design он почти всегда является дефолтным лэйаутом.
- Мы добавили AppBarLayout , и включили в него Toolbar .
AppBarLayout наследуется от LinearLayout и предназначен для размещения в нём Toolbar .
Тег
Преимущество такого подхода в том, что мы можем задать вёрстку элемента один раз и использовать её неограниченное количество раз в других частях проекта.
Обратите внимание на атрибут app:layout_behaviour . Понятие Behaviour - достаточно обширная тема. Как можно догадаться по названию, атрибут отвечает за поведение элемента в лэйауте.
Конкретно в данном случае мы говорим, что наш RecyclerView должен скроллиться. Задав дополнительные атрибуты, мы можем, например, заставить Toolbar автоматически скрываться при скролле (пока что мы не будем этого делать).
Помимо этого, благодаря этому атрибуту RecyclerView не будет уезжать под Toolbar (попробуйте удалить его, и увидите, что первый элемент списка скрыт под тулбаром).
Осталось лишь установить Toolbar в MainActivity:
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); // ...
Запустите приложение, и вы увидите…
… что ничего не поменялось. Но это лишь внешне. На самом деле, приложение теперь использует Toolbar , в том числе на Android ниже пятой версии!
Если вы откроете файл res/values/colors.xml , то увидите там такой код:
Он, как не трудно догадаться, отвечает за цвета, используемые приложением.
Что это за цвета такие?
- colorPrimary - основной цвет приложения. В него окрашивается, например, Toolbar .
- colorPrimaryDark - затемнённый основной цвет приложения. В него окрашивается StatusBar , расположенный чуть выше Toolbar .
- colorAccent - в него окрашиваются такие элементы интерфейса, как кнопки, переключатели и т.д. Как правило, используется цвет, отличный от colorPrimary .
Для цвета текста используются следующие правила (при условии использования светлого фона):
Продолжение доступно на платных тарифах
А вместе с ним - проверка домашних заданий нашими менторами.
Это совсем недорого - всего от 832 ₽ в месяц!
В данном курсе вы познакомитесь с Material Design – единой системой, которая объединяет теорию, ресурсы и инструменты для создания качественного UI/UX.
Material Design (Материальный дизайн) - дизайн программного обеспечения и приложений операционной системы Android от компании Google. Впервые представлен на конференции Google I/O 25 июня 2014 года. Идея дизайна заключается в приложениях, которые открываются и сворачиваются как карточки, используя эффекты теней. По идее дизайнеров Google, у приложений не должно быть острых углов, карточки должны переключаться между собой плавно и практически незаметно.
Изначально внутри компании его называли кодовым именем «квантовая бумага» (quantum paper). Основная метафора материального дизайна - плоская бумага, находящаяся в трехмерном пространстве.
Зачем нужен материальный дизайн
Он служит двум целям: унификации многочисленных продуктов компании и унификации интерфейсов приложений для Android. После засилья скеоморфизма веб и интерфейсы шатнулись в сторону радикального уплощения, но это оказалось просто ещё одной крайностью. В Google решили, что чтобы быть понятными и интернациональными, объекты интерфейса должны иметь аналог, метафору в реальном мире. Такой метафорой стала бумага. Тонкая, плоская, но расположенная в трехмерном пространстве и имеющая тень, скорость движения, ускорение. Но бумага «квантовая», не настоящая. Она подчиняется физическим законам, но имеет и волшебные свойства. Это помогает показать пользователю принципы работы ПО, как происходит переход от одного к другому состоянию. Анимации тут не просто оживляют интерфейс, но показывают пользователю, что происходит.
Несколько лет назад я писал статью на Хабр о приложении-справочнике по математике для Android, которое стало моим первым опытом в разработке для GooglePlay. Сегодня, оглядываясь назад на свой прошлый хабрапост и прошлую версию приложения, мне становится страшно (чтобы содрогнуться достаточно взглянуть на первый скриншот ниже). За прошедшие несколько лет многое поменялось: AndroidMarket стал называться GooglePlay с новыми правилами и прочим, выходили новые версии ОС, появилась некая общая google-концепция к дизайну приложений material-design, появились новые среды разработки, да и Хабр изменился.В этом посте речь пойдёт о том, как сделать свое приложение материальным, добавить в него поиск, а также некоторые размышления о том какую рекламу использовать.
Вообще, приложение претерпело несколько серьёзных изменений дизайна за время своего существования. Краткая история о том как оно менялось приведена на скриншотах:
Material Design
Разумеется material design. Куда же без него сейчас в разработке под android? Пришлось избавиться от многих графических ресурсов, которые в своё время так тщательно рисовались, но ничего не поделать, в концепцию материального дизайна они не вписывались - слишком неминималистичны. К примеру, иконки бокового меню:
В работе с ресурсами иконок для разных экранов хорошо помогает asset studio , в котором, помимо прочего, ещё и имеются неплохие эффекты long shadow и dog-ear. В общем, asset studio - замечательный конструктор, который сэкономит много времени при работе с ресурсами. Также при помощи asset studio были сделаны новые material-иконки для покупки пива и социального взаимодействия:
Если пиво приобретено, то в правом нижнем углу будет появляться sold out:
Иконка приложения также претерпела некоторые изменения, здесь уже пришлось открыть Photoshop и порисовать:
Самое трудное позади, о графических ресурсах больше говорить не будем.
Теперь сделаем несколько тем оформления для нашего приложения и добавим FloatingActionButton. В папке values/ проекта в файле themes.xml опишем две темы оформления для нашего приложения Light и Dark:
themes.xml
О том, что такое colorPrimary, colorPrimaryDark, colorAccent хорошо написано и . А вот как выглядят эти темы в приложении:
Расскажу теперь, как сделать так, чтобы применять тему сразу ко всем Activity вашего приложения. Для этого необходимо сделать BaseActivity унаследованную от ActionBarActivity (её не нужно объявлять в манифесте и создавать для неё xml-файл разметки). В методе onCreate() данной деятельности вызываем setTheme() в зависимости от выбора пользователя в настройках приложения:
BaseActivity.java
public class BaseActivity extends ActionBarActivity {
public static final String NAME_PREFERENCES = "mysetting";
public static final String THEME_SWITCHER = "thmswtch";
public static final int THM_SWTCHR_DFLT = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
SharedPreferences mSet = getSharedPreferences(NAME_PREFERENCES, Context.MODE_PRIVATE);
/** применяем темную тему, если в настройках был осуществлён её выбор (по умолчанию в приложении LightTheme) */
if(mSet.getInt(THEME_SWITCHER, THM_SWTCHR_DFLT) == 1){
/** если устройство c LOLLIPOP и выше - раскрашиваем статус-бар */
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().setStatusBarColor(getResources().getColor(R.color.greyPrmrDark1));
}
setTheme(R.style.DarkTheme);
}
}
}
Ну а все остальные Activity нашего приложения, будем наследовать от BaseActivity:
При подборе сочетаний цветов для темы в стиле material может здорово помочь ресурс materialpalette.com , на котором предлагается полная цветовая палитра для темы по двум выбранным вами основным оттенкам.
Для добавления слева круглых иконок с текстом в каждом элементе списка отлично подходит библиотека TextDrawable , которая легка в использовании и позволяет создавать не только круглые однотипные иконки (как на скриншотах), но и иконки разных форм, цветов, шрифтов и даже добавлять анимацию для них.
Пример использования TextDrawable в адаптере основного списка приложения
TextDrawable drawable = null;
if(position==0) drawable = TextDrawable.builder().beginConfig().bold().endConfig().buildRound("dx", context.getResources().getColor((curr_theme==1) ? R.color.mn_dvdr_dark: R.color.mn_dvdr_lght));
if(position==1) drawable = TextDrawable.builder().beginConfig().bold().endConfig().buildRound("lim",context.getResources().getColor((curr_theme==1) ? R.color.mn_dvdr_dark: R.color.mn_dvdr_lght));
Floating Action Button (далее будем нызывать её fab) должна нести в себе основную функцию приложения. В приложении-справочнике это разумеется поиск. Т.о. при клике по кнопке будет выпадать SearchView. Для того, чтобы fab при скроллинге списка вниз/вверх красиво исчезала/появлялась рекомендую использовать библиотеку FloatingActionButton .
Пример использования FloatingActionButton
FloatingActionButton fab;
ListView MainListView;
LinearLayout searchLayout;
SearchView searchView;
...
searchLayout = (LinearLayout) findViewById(R.id.search_view);
searchView = (SearchView) findViewById(R.id.search);
MainListView = (ListView) findViewById(android.R.id.list);
fab = (FloatingActionButton) findViewById(R.id.fab);
// Прикрепляем fab к MainListView.
// Теперь при скроллинге списка вниз fab будет исчезать, а при скроллинге вверх - появляться
fab.attachToListView(MainListView);
fab.setShadow(true);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation openSearch = AnimationUtils.loadAnimation(context, R.anim.search_down);
searchLayout.startAnimation(openSearch);
searchLayout.setVisibility(View.VISIBLE);
Animation hideFab = AnimationUtils.loadAnimation(context, R.anim.s_down);
fab.startAnimation(hideFab);
fab.setVisibility(View.GONE);
// открываем клавиатуру и активируем searchView
searchView.requestFocus();
openKeyboard();
}
});
...
На этом работа по materialизации интерфейсов приложения заканчивается.
Поиск
Так как содержимое справочника хранится в разных html-файлах, то для того, чтобы сделать быстрый поиск по ним необходимо:- Поработать с самими html-файлами - добавить в каждый якоря в те места, в которые будет переходить пользователь при вводе того или иного запроса.
- Использовать виртуальную FTS-таблицу (что это такое можно почитать и . Если говорить кратко, то FTS позволяют пользователям выполнять полнотекстовый поиск на множестве документов).
Таблица содержит два столбца. Первый столбец (KEY_INPUT) представляет собой список всех названий разделов и терминов, содержащихся в справочнике, иначе говоря - это список возможных запросов пользователей. Второй столбец (KEY_ANKER) - список html-файлов с якорями (т.е. файлов и позиций в этих файлах), соответствующий этим запросам. Как и для всех других таблиц SQLite, как виртуальных, так и обычных, данные из таблиц FTS получаются с помощью запросов SELECT:
String query = "SELECT docid as _id," + KEY_INPUT + "," + KEY_ANKER + " FROM " + FTS_VIRTUAL_TABLE + " WHERE " + KEY_INPUT + " MATCH "" + inputText + "";";
При вводе текстового запроса осуществляется поиск по FTS-таблице и пользователю в выпадающем списке предоставляются варианты. При выборе осуществляется переход к нужному разделу по соответствующему якорю. Принцип показан на рисунке ниже:
SearchDbAdapter.java
public class SearchDbAdapter {
private static final String DATABASE_NAME = "mhdb";
private static final String FTS_VIRTUAL_TABLE = "srcht";
private static final int DATABASE_VERSION = 1;
public static final String KEY_INPUT = "rqst";
public static final String KEY_ANKER = "ankr";
private static final String DATABASE_CREATE = "CREATE VIRTUAL TABLE " + FTS_VIRTUAL_TABLE + " USING fts3(" + KEY_INPUT + "," + KEY_ANKER + ");";
private final Context mCtx;
// Массив с поисковыми запросами (темами и разделами, содержащимися в файлах)
public static final String search_arr = {"data1 request 1","data1 request 2","data2 request 3","data2 request 4"};
// Массив с соответствующими им html-файлами с якорями (файлы хранятся в папке assets проекта)
public static final String ankers_arr = {"file1.html#an1","file2.html#an2","file1.html#an3","file1.html#an4"};
private static class DatabaseHelper extends SQLiteOpenHelper {
DatabaseHelper(Context context) {
super(context, DATABASE_NAME, null, DATABASE_VERSION);
}
@Override
public void onCreate(SQLiteDatabase db) {
db.execSQL(DATABASE_CREATE);
int LNGTH = search_arr.length;
ContentValues initValues = new ContentValues();
for(int i=0; i
1 . Пользователь вводит в SearchView поисковый запрос «data2». Слушатель SearchView вызывает метод searchAnker() класса SearchDbAdapter, который возвращает курсор (mCursor), содержащий запросы похожие на введенный текст и соответствующие этим запросам html-файлы с якорями:
data2 request 3 - file1.html#an3
data2 request 4 - file2.html#an4
2 . Содержащиеся в mCursor похожие запросы отображаются в выпадающем списке: data2 request 3, data2 request 4.
3 . При клике по элементам выпадающего списка осуществляется запуск ViewActivity, в которую с интентом передаётся соответствующее имя html-файла с якорем из mCursor: file1.html#an3
Реклама и скрытые возможности приложения
Да нужна ли она, реклама? Она портит интерфейс, а столько времени и сил потрачено, чтобы он стал красивым. Сейчас что-то заработать на рекламе можно либо, имея миллионы активных пользователей, либо на агрессивной баннерной рекламе, которая работает так:- пользователь скачивает обновление, в которое интегрирована рекламная библиотека;
- стадия выжидания, чтобы пользователь в момент начала самого интересного не сразу понял из-за чего это происходит;
- самое интересное: у пользователя поверх всех интерфейсов в других приложениях выскакивают огромные рекламные баннеры на весь экран, не кликнуть по которым - трудная задача.
Покупка пива легко реализуется при помощи