Интерфейс в стиле material design на андроид. Зачем нужен материальный дизайн. Изучаем Material Design
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 ₽ в месяц!
Android-роботы версий 5 и 6 продолжают гордо шагать по смартфонам и планшетам радостных пользователей, сверкая красотами Material Design. При этом, надо отдать должное Google, старые девайсы никто не забывал, они тоже примерили шкурки материального дизайна, пусть и не в полном объеме. О том, как все это работает на устройствах с Android версий со второй по четвертую, мы сегодня и поговорим. Если же ты разрабатываешь приложения исключительно для Android 6, то информация, приведенная ниже, тоже будет тебе полезна.
Модный приговор
Material Design - дизайн программного обеспечения и приложений операционной системы Android от компании Google, впервые представленный на конференции Google I/O в 2014 году. Идея дизайна заключается в создании приложений, которые открываются и сворачиваются как физические (то есть материальные) карточки. Как и все физические объекты, они должны отбрасывать тень и иметь некоторую инерционность. По идее дизайнеров Google, у приложений не должно быть острых углов, карточки должны переключаться между собой плавно и практически незаметно (рис. 1).
Вообще, эффект тени позволяет визуально расположить все элементы на разной высоте, то есть получается некоторая совокупность слоев (рис. 2).
Не менее значима концепция плавающей кнопки (Floating Action Button), отражающей главное действие во фрагменте или активности. Например, в Gmail данный виджет позволяет создать новое письмо. Плавающей эта кнопка названа потому, что ее положение не фиксировано (да, не только правый нижний угол) и может меняться. Причем это изменение должно быть плавно и осмысленно анимировано, то есть, например, при скроллинге компонента ListView или переключении фрагмента FAB кнопка может «уезжать» за экран или «растворяться».
Формат журнальной статьи не позволяет описать все нюансы Material Design (в пересчете на бумажный формат ты нафигачил целых полторы статьи:). - Прим. ред. ), тем более что не все из них можно реализовать библиотеками совместимости в преLollipop версиях Андроида. Наиболее тяжело в этом плане дела обстоят с анимацией. Например, у нас не получится увидеть Ripple-эффект (расходящиеся круги при нажатии на кнопку), так как данная анимация реализуется аппаратно и недоступна для старых устройств. Разумеется, это решается сторонними библиотеками, но об этом мы поговорим в следующий раз.
Ознакомиться с гайдами по Material Design можно (даже нужно!) на официальном сайте Google, а по адресу доступен перевод на русский язык.
Android AppCompat vs. Design Support Library
После выхода в свет Android 5 в SDK от Google произошло существенное обновление библиотеки AppCompat (в девичестве ActionBarCompat), получившее седьмую версию aka v7. Самой вкусной в этой версии стала возможность использования элементов Material Design в ранних версиях Андроида - начиная с 2.1 (API Level 7). Один из таких элементов - виджет Toolbar, пришедший на замену скучному ActionBar - панели, расположенной в верхней части активности (той самой, где висит «гамбургер», открывающий боковое меню). Кроме того, новое Material-оформление коснулось и других стандартных элементов: EditText, Spinner, CheckBox, RadioButton, Switch, CheckedTextView.
Помимо этого, были добавлены новые библиотеки - RecyclerView (крутейшая замена ListView), CardView (карточка) и Palette (динамическая палитра). К слову, в декабрьском Хакере эти элементы уже были рассмотрены - срочно ищи и , повторяться не будем.
Казалось бы, мы у цели, вот оно - счастье, но, взглянув, например, на почтовый клиент Gmail в том же Android 4, потихоньку начинаешь понимать, что с одной лишь AppCompat такое приложение не накодишь. Ведь по какой-то космической причине в библиотеке AppCompat нет даже плавающей кнопки - едва ли не главного элемента Material Design.
К счастью, в Google рассуждали точно так же, но, правда, почему-то не стали дополнять AppCompat, а представили совершенно новую библиотеку совместимости - Design Support Library . Здесь уже все по-взрослому: удобное боковое меню (Navigation View), плавающая кнопка (Floating Action Button), всплывающее сообщение (Snackbar), анимационный Toolbar и многое другое. Далее мы зарядим все библиотеки в обойму знаний и познакомимся поближе с этими прекрасными нововведениями.
Хочу только заметить, что библиотеки и виджеты можно использовать как по отдельности, так и все вместе.
Итак, обновляем SDK, запускаем Android Studio и начинаем кодить…
Импорт библиотек
Так как мы используем Android Studio, импорт модулей необходимо выполнять в секции dependencies файла build.gradle проекта:
Dependencies { compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:22.2.1" compile "com.android.support:design:22.2.1" compile "com.android.support:recyclerview-v7:22.2.1" compile "com.android.support:palette-v7:22.2.1" compile "com.android.support:cardview-v7:22.2.1" }
На момент выхода журнала уже будет доступна версия библиотек под номером 23.1.1, но для нас это не принципиально. Кстати, IDE любезно подскажет номер последней версии, а также автоматически скачает ее из репозитория, если она отсутствует.
CoordinatorLayout, Toolbar и все-все-все
Начнем с весьма эффектного компонента - CoordinatorLayout, позволяющего связывать (координировать) виджеты, помещенные в него (по сути, CoordinatorLayout является продвинутым FrameLayout). Чтобы было понятно, на рис. 3 приведено исходное состояние фрагмента приложения. Стоит только начать перелистывать список, как размер заголовка плавно вернется к традиционному размеру (уменьшится), освобождая место для полезной информации (рис. 4). И это все, что называется, прямо из коробки, без всяких костылей.
Разметка фрагмента приведена ниже (несмотря на размер, код достаточно тривиален):
Видно, что у CoordinatorLayout два дочерних элемента: AppBarLayout и контейнер FrameLayout. Последний может содержать любые прокручиваемые элементы интерфейса: например, RecyclerView или ListView. В приведенном на рис. 3 приложении в этом контейнере находятся RecyclerView и кнопка (FAB). Теперь AppBarLayout и FrameLayout будут зависеть друг от друга при скроллинге, но только в том случае, если у последнего указать специальный флаг layout_behavior="@string/appbar_scrolling_view_behavior" , который инициирует передачу прикосновений в AppBarLayout.
Идеологически AppBarLayout в чем-то напоминает вертикальный LinearLayout, элементы которого могут вести себя по-разному (в зависимости от флагов) при прокручивании содержимого. В приведенном примере используется виджет CollapsingToolbarLayout, являющийся удобной оберткой для компонента Toolbar. Собственно, CollapsingToolbarLayout специально спроектирован для использования внутри AppBarLayout. Размер самого AppBarLayout в развернутом виде определяется параметром layout_height, и в листинге он равен 192dp.
Флаг layout_scrollFlags определяет поведение компонента при прокручивании. Если не указать scroll, AppBarLayout останется на месте, а контент уплывет (забавный эффект). Второй флаг, exitUntilCollapsed , определяет, как именно будет прокручиваться Toolbar и остальной контент. К сожалению, описывать на словах отличие флагов друг от друга бесполезно, поэтому отсылаю тебя по адресу , где наглядно (с анимацией) расписаны все варианты. Как говорится, лучше один раз увидеть…
Параметр contentScrim="?attr/colorPrimary" задает цвет фона, в который переходит фоновое изображение при свертывании CollapsingToolbarLayout. Внимательный читатель заметит, что на рис. 4 Toolbar вовсе не окрашен в какой-либо цвет, а немного затененное изображение осталось на месте. Чтобы получить такой эффект, нужно указать константу @android:color/transparent .
Наконец, виджеты, непосредственно определяющие внешний вид фрагмента (активности), - Toolbar («гамбургер», заголовок, кнопки меню) и ImageView (фон) завернуты в CollapsingToolbarLayout. Флаг layout_collapseMode="parallax" у ImageView обеспечивает плавное затенение фонового изображения при сворачивании Toolbar’a. По опыту использования могу сказать, что «параллакс» работает не на всех устройствах.
Все вышесказанное может показаться сложным и неочевидным, но огромный плюс данного подхода в том, что вся логика совместной работы виджетов определена в файле разметки, а не в коде. Кстати, о последнем:
Public class MainActivity extends AppCompatActivity { private Toolbar mToolbar; private CollapsingToolbarLayout mCollapsingToolbar; private ImageView im; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mToolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(mToolbar); mCollapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); mCollapsingToolbar.setTitle("Меню"); ImageView im = (ImageView) findViewById(R.id.toolbarImage); Picasso.with(this).load(R.drawable.back).into(im); } }
Вот, собственно, и весь код! SetSupportActionBar переключает ActionBar на Toolbar с сохранением почти всех свойств и методов первого. В частности, устанавливается заголовок с помощью setTitle. Полное описание виджета Toolbar доступно на официальном сайте Android Developers .
Далее находим ImageView фона и с помощью сторонней библиотеки Picasso устанавливаем соответствующее изображение. Обычно я не склонен к критике Google, но тут не могу удержаться. Неужели за столько времени существования Android нельзя было написать нормальную стандартную библиотеку для загрузки изображений? Чтобы метод setImageResource не вызывал Out of Memory для изображений в нормальном разрешении? Гайдлайны призывают делать яркие и стильные приложения со множеством графики, а такая вещь, как загрузка картинки, реализована спустя рукава. Нет, конечно, можно использовать BitmapFactory, придумывать кеширование, но это решение так и просится в отдельную библиотеку, что, собственно, сделано и в Picasso, и в UniversalImageLoader . Одним словом, непонятно…
Snackbar
Snackbar представляет собой небольшое информационное окно, расположенное в нижней части активности (рис. 5). Помимо информационного сообщения, имеется небольшая плоская кнопка (так называемый Action), позволяющая взаимодействовать с пользователем (например, отменить удаление сообщения). После тайм-аута Snackbar автоматически закрывается (как и традиционный компонент Toast).
Продолжение доступно только подписчикам
Вариант 1. Оформи подписку на «Хакер», чтобы читать все материалы на сайте
Подписка позволит тебе в течение указанного срока читать ВСЕ платные материалы сайта. Мы принимаем оплату банковскими картами, электронными деньгами и переводами со счетов мобильных операторов.
В данном курсе вы познакомитесь с Material Design – единой системой, которая объединяет теорию, ресурсы и инструменты для создания качественного UI/UX.
Material Design (Материальный дизайн) - дизайн программного обеспечения и приложений операционной системы Android от компании Google. Впервые представлен на конференции Google I/O 25 июня 2014 года. Идея дизайна заключается в приложениях, которые открываются и сворачиваются как карточки, используя эффекты теней. По идее дизайнеров Google, у приложений не должно быть острых углов, карточки должны переключаться между собой плавно и практически незаметно.
Изначально внутри компании его называли кодовым именем «квантовая бумага» (quantum paper). Основная метафора материального дизайна - плоская бумага, находящаяся в трехмерном пространстве.
Зачем нужен материальный дизайн
Он служит двум целям: унификации многочисленных продуктов компании и унификации интерфейсов приложений для Android. После засилья скеоморфизма веб и интерфейсы шатнулись в сторону радикального уплощения, но это оказалось просто ещё одной крайностью. В Google решили, что чтобы быть понятными и интернациональными, объекты интерфейса должны иметь аналог, метафору в реальном мире. Такой метафорой стала бумага. Тонкая, плоская, но расположенная в трехмерном пространстве и имеющая тень, скорость движения, ускорение. Но бумага «квантовая», не настоящая. Она подчиняется физическим законам, но имеет и волшебные свойства. Это помогает показать пользователю принципы работы ПО, как происходит переход от одного к другому состоянию. Анимации тут не просто оживляют интерфейс, но показывают пользователю, что происходит.
На конференции I/O. Это серьёзное изменение визуального стиля и расширение инструментария, первые звоночки которого появились ещё в марте .
Визуально Android P продолжил сближение с iOS (различия между платформами стираются с обеих сторон):
Можно назвать это вкусовщиной, но первая версия Material Design имела своё лицо и можно было говорить о характере бренда, выраженном в интерфейсе. Кто-то жаловался, что гайдлайны слишком жёсткие и делают приложения однояйцевыми. Но для многих компаний это был сильный ориентир - как можно создать ощущение единства продуктов без использования логотипа. Хотя поддерживать две платформы станет проще.
И самое главное - теперь это полноценная дизайн-система с компонентами в коде , а не просто масштабные гайдлайны и шаблоны к ним с какими-то разрозненными примерами. Эти компоненты также поддерживают тематизацию, так что система выглядит целостной (сами компоненты начали появляться год назад). Новый сайт Material Design сделал фокус на две составляющие - дизайн и разработка - более явным. Они также запустили давно обещанный инструмент Gallery , аналог Zeplin и Wake. Но это как-то вяло на фоне обещаний, данных после покупки Pixate (основатель ушёл в Figma) и Form (Гугл подтверждает репутацию сгнаивателя купленных компаний).
Из других интересных деталей анонса:
Бета-версию уже можно поставить на некоторые телефоны. Финальная версия появится осенью. Засучиваем рукава, работы будет много.