Леденец из мороженого, или как привнести в ваше приложение немного Material

Леденец из мороженого, или как привнести в ваше приложение немного Material

457
ПОДЕЛИТЬСЯ

5-ая версия Android была выпущена практически полгода назад. Невзирая на это , большая часть приложений в маркете до сих пор упорствуют в стиле Holo. То ли новейший Material-стиль пока не по зубам среднему разрабу, то ли Android L еще не успел крепко войти в повседневность.

Как бы там ни было, новенькая парадигма дизайна активно пропагандируется «корпорацией добра», да и смотрится довольно хорошо, невзирая на некую непоследовательность. И все больше возникает хороших волшебников, помогающих нам, обычным разрабам, оставаться «в струе» изменчивого мира мобильного UI.

Раз вы, как я не так давно, твердо решили обернуть своё, издавна не обновлявшееся, приложение в новейшую «шкурку», этот обзор инструментов и библиотек может сэкономить для вас N часов времени.

Думаю, настало время внести свою лепту. Чуток больше времени прошло с тех пор, как я в первый раз скачал и установил Android Development Kit. Уже больше 3,5 лет я приобщаюсь к коллективному разуму Хабра.

Тому есть несколько главных обстоятельств: Отдавая для себя отчет, что подобные обзоры достаточно быстро теряют актуальность, не написать его я не мог.

работая над новеньким дизайном для собственного приложения, я за два месяца перелопатил тонны гуглостраниц, по частицам собирая ссылки на Github, которые в конце концов оказывались полностью бесполезными;
скоро лето, пора отпусков, а я отлично для себя представляю, чем конкретно занимаются в отпуске (на больничном, etc) создатели. Потому на данный момент, думаю, самое время;
на данный момент на просторах веба уже можно отыскать стилизации раз не для всех, то для большинства частей дизайна.

Может быть, пока я это писал, Google выпустил общую библиотеку сопоставимости для всех частей интерфейса. ДисклеймерКонечно же, данный обзор не претендует на законченность, абсолютность и призыв к действию.
Также может быть, что кому-то удобнее написать очередной велик, зато собственный, с «Манчкином» и эльфийками…
Точно так же я не могу советовать непременно применять выставленные инструменты: практически все они распространяются с пометкой AS IS, и включать их в собственный проект вы сможете лишь на собственный ужас и риск.
С Eclipse все и проще, и труднее сразу, и я буду считать, что разраб знает, как подключить проект библиотеки в данной IDE. Я все-таки (не без баттхёрта) перебежал на Android Studio около полугода назад. И влюбился в эту среду разработки. Потому все методы включения библиотек в проект будут относиться к gradle. Ну и крайнее.

Перечень частей дизайна, подлежащих «ребрендингу», достаточно длиннющий.
Так как много частей (такие, к примеру, как CheckBox и EditText) меняют стили автоматом при использовании AppCompat-темы, тут мы разглядим последующие, не включенные в библиотеку сопоставимости, виджеты:

NavigationDrawer
FloatingActionButton
AlertDialog
ProgressBar
SeekBar

NavigationDrawer

Не считая того, он уже успел стать обычным для Android, как и иконка-«гамбургер». Не знаю, как кому, а мне чрезвычайно нравится этот элемент. Правда, тут у Google не обошлось без косяков:

возник Drawer совместно с ActionBarDrawerToggle в виде съезжающих вбок 3-х полосочек;
поменялась ActionBarDrawerToggle («гамбургер», превращающийся в стрелочку, почти всем пришелся по душе);
правила для Drawer поменялись совместно с концепцией Toolbar: сейчас NavigationDrawer перекрывает заголовок приложения. Это привело к двум странноватым, на мой взор, последствиям — анимация ActionBarDrawerToggle сейчас не видна (и вообщем непонятно, для чего она), и закрыть меню мы можем лишь свайпом либо системной клавишей «назад».

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

Сам Drawer врубается в приложение просто, в особенности, раз проект создаётся с нуля. Просто выберите соответственный вид приложения в мастере — и получите шаблон с активити, фрагментом и классом самого Drawer. Думаю, этот момент можно опустить — операция обычная. Раз же вы пытаетесь реорганизовать старенькое приложение, имейте в виду, что для вас пригодится библиотека сопоставимости android-support-v4.

Привести ActionBarDrawerToggle в новейший вид для вас поможет библиотека appcompat-v7 (её, как и предыдущую, можно отыскать в директории extras вашего SDK).

Включить эти библиотеки в сборку собственного модуля можно одной строчкой в блоке dependencies файла build.gradle:

dependencies {
compile ‘com.android.support:appcompat-v7:22.0.0’
}
22.0.0 — номер текущей версии библиотеки (можно подсмотреть в SDK-менеджере, а можно поставить "+", и среда разработки будет применять последнюю доступную версию, настойчиво предлагая для вас все-таки проставить номер текущей версии, во избежание, так огласить…).

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

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

Еще одна кастомизация NavigationDrawerИнтересная библиотека встретилась мне, когда заказчик захотел размывать слой под меню во время открытия, заместо затемнения.

Из замеченных сложностей — раз у вас в контенте прокручивающийся перечень, библиотека нередко бывает неспособна отследить его состояние, и при открытии меню указывает размытие «старого» контента, в то время как реально перечень уже иной. Но внимания, точно, стоит.

FloatingActionButton

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

Решение от уважаемого John Hogan, описанное на Хабре. Выделю два попавшихся неловких момента:
необходимо включать код в собственный проект, что усугубит читаемость;
обработку исчезновения/возникновения разраб оставил нам;
В целом же — можно просто брать и применять.
Данная библиотека. Само собой, нет и «слушателя», позволяющего автоматом убрать/показать клавишу при, к примеру, прокрутке ListView. Хорошо реализованы «вложенные» клавиши, но имеет «фатальный недостаток»: чрезвычайно ограничена работа с самой клавишей, фактически — лишь клики.
Есть два размера (напомню, что мини-клавиша употребляется, как вспомогательное действие при просмотре контента), достаточно оригинально «пристыковывается» к прокручиваемым элементам для автоскрытия, имеет гибкие опции через файл разметки. Единственная неувязка, на которую я наткнулся — невозможность подружить эту клавишу с иным кастомным OnTouchListener. Чрезвычайно хорошая, как по мне, реализация. Для меня это было критично, так как я использую swipe-to-dismiss в собственных ListView. Вот это решение.
Обычная, настраиваемая, не конфликтует с OnTouch, встраивается в два клика. Избранная мной для собственного проекта.
Раз кто-то может отдать по ней информацию — пожалуйста, пишите в комментах, и я добавлю её в статью. Эта библиотека найдена уже в процессе подготовки статьи, потому не тестировалась мною.

Как видите, выбирать есть из чего же.

AlertDialog

Мне лично чрезвычайно не нравился стиль диалогов в 4-х версиях Android, как и сам код, который приходилось писать для AlertDialog-ов. Каждый разраб когда-или воспользовался сиим виджетом.

AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);
alertDialogBuilder.setTitle("Alert title");
alertDialogBuilder.setMessage("Alert message");
alertDialogBuilder.setPositiveButton("Ok",
new DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface arg0, int arg1) {
}
});
alertDialogBuilder.setNegativeButton("Cancel",
new DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface arg0, int arg1) {

}
});
AlertDialog alertDialog = alertDialogBuilder.create();
alertDialog.show();
Но код все равно остается, с вашего позволения, незначительно неаккуратен. Естественно, с помощью Retrolambda и цепочки вызовов это можно незначительно «причесать» и уменьшить.

Библиотек, реализующих данный виджет в Material-стиле, достаточно много, и они довольно похожи:

github.com/drakeet/MaterialDialog
github.com/lewisjdeane/L-Dialogs
github.com/fengdai/AlertDialogPro
github.com/avast/android-styled-dialogs
даже вот такое
Она показалась мне более стильной, при этом довольно просто настраиваемой. Избранная мной библиотека.

.title("Title")
.message("Message")
.positiveText(R.string.ok)
.negativeText(R.string.cancel)
.callback(someCallback)
.show(); Ничего лишнегоnew MaterialDialog.Builder(this).

ProgressBar

Чрезвычайно прекрасными стали и прогресс-бары в новейшей версии Android.
Потому к выбору ProgressBar я подступал долго и упрямо. Но находил я обыденный Circular виджет, без излишеств — все-таки это стилизация, а не на сто процентов новенькая парадигма. Так уж вышло, что в моем приложении этот элемент употребляется нередко — много работы с фото, много томных сетевых запросов. И оказалось, что обыденных круговых указателей прогресса как-то не достаточно…
Для себя я избрал две библиотеки. Первую отсеял из-за не совершенно корректной инициализации из кода. Вторую использую и на данный момент.

github.com/rahatarmanahmed/CircularProgressView
github.com/pnikosis/materialish-progress

SeekBar

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

Так вот, раз для Holo-тем я такие виджеты отыскал, то для Material и обыденных-то незначительно. Но, в конце концов, это натолкнуло меня на маленькую перекомпоновку экрана, так что я даже благодарен SeekBar-у за это.

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

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

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

Вот они, скриншоты

На сладкое
В поисках библиотек для SeekBar я наткнулся на вот этот репозиторий. И совершенно было поразмыслил, что мне не необходимы все вышеописанные украшательства — хватит одной данной библиотеки. Серьезно, там есть все, что мне необходимо (да и подавляющему большинству разрабов, быстрее всего).

Проект чрезвычайно юный, и всё ещё в разработке (к примеру, для SeekBar пока даже не реализован onSeekChangeListener). Сам собираюсь. Это может чрезвычайно сильно облегчить жизнь как начинающим программерам, так и тем, кто уже заматерел так, что писать свои велики влом. А вот что рекомендовал бы, так это посильную помощь данной библиотеке — багрепортами, фича-реквестами и кодом. Но все не так радужно. Потому воспользоваться им на данный момент я бы не рекомендовал.

В общем, подключайтесь!

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

Найдется [практически] все. Awesome Android — огромный сборник библиотек.
Смотрится чрезвычайно круто. Polymer project — проект полной кастомизации интерфейса.
Дозволит для вас «пощупать» их вживую. Libraries for developers — приложение на Google Play, сделанное для разрабов, этакий справочник по библиотекам.
(Обновлено) Еще один сборник различных украшательств и библиотек — спасибо afeozzz

habrahabr.ru Гораздо меньше для вас велосипедов в программировании!