Модели материалов для android

Material 2.0 для разработчиков. Краткий обзор новых компонентов

В мае на Google I/O мы впервые увидели Material Design 2.0. Команда Google провела крупный рефакторинг и выпустила обновленную библиотеку дизайна. В ней появились новые компоненты и анимации. Мы следим за развитием Material Components с самого начала. Сейчас все находится на стадии RC1, и уже скоро выйдет в релиз. Под катом обзор новых и обновленных UI-компонентов для тех, кто еще не пробовал их в работе, но интересуется.

Android X вместо Support library

«Как это уже задеприкейтили? Я даже попробовать ее толком не успел», – сказал один мой знакомый, когда узнал о переезде Material Components в новый пакет. Действительно, поддержки support.design больше не будет, а на ее место придет com.google.android.material.
В рамках проекта Android X Google устроили рефакторинг всей библиотеки поддержки и архитектурных компонентов. Подробнее можно почитать в их блоге. Вот пример некоторых пакетов:

старый пакет

новый пакет

androidx.@
androidx.databinding.@
com.google.android.material.@

К счастью, для «мягкого» переезда на новую библиотеку, в студии появится инструмент, позволяющий автоматически обновить все зависимости. Сейчас это доступно уже в Android Studio Canary 3.3. Он призван автоматически находить все зависимости в импортах, в gradle файлах, в XML и в Proguard.

Material library

Все старые UI-компоненты из Support Library переехали в Material library, а ещё появились новые компоненты. Добавим в проект новую зависимость:

Обратной совместимости с Support не предполагается. Придется избавиться от всех остальных зависимостей, где встречается слово support, и заменить их на соответствующие из Android X. Иначе проект просто не соберется из-за множества конфликтов. Для тестовой сборки мне пришлось даже заменить Glide на Picasso, потому что первый тянет за собой android-support. На большом проекте вручную это делать будет неудобно.

Однако для тестирования Material Components можем воспользоваться support:design версии 28-beta, куда Google любезно продублировала все актуальные компоненты. Несмотря на это, 28 версия Support library будет последней, и в дальнейшем ее поддержка прекратится. А теперь давайте посмотрим на новые компоненты, и измененные старые.

BottomAppbar

BottomAppbar – это что-то похожее на Appbar, только с возможностью прикрепления Floating Action Button и вырезом под него. Предназначен для работы внутри CoordinatorLayout.
Вот некоторые параметры, которые мы можем кастомизировать:

• app:backgroundTint — цвет заполненного пространства
• app:fabAlignmentMode — положение FAB
• app:fabCradleMargin — отступ между FAB и BottomAppbar
• app:fabCradleRoundedCornerRadius — закругление на углах выреза для FAB
• app:fabCradleVerticalOffset
• app:hideOnScroll

На момент написания статьи, BottomAppBar доделан не до конца. Например, нельзя разместить NavigationIcon в центре по вертикали, но, наверное, это скоро допилят.

Chips

Chip – еще одна новая View в библиотеке. С её помощью можно удобно показывать перечисление небольших объектов. Например, фильтры или какие-нибудь подсказки для пользователя. По гайдлайнам Chip обладает следующими свойствами:

• Может иметь иконку контента (слева).
• Может иметь иконку для удаления (справа).
• Содержит текст.
• Может находится в двух состояниях, как CheckBox.

Реализация в Material library представляет из себя расширенную версию AppCompatCheckBox, и может порадовать нас такими кастомизируемыми параметрами:

• app:chipCornerRadius
• app:chipMinHeight
• app:chipBackgroundColor
• app:chipStrokeColor
• app:chipStrokeWidth
• app:rippleColor
• android:text
• android:textAppearance
• app:chipIconVisible
• app:chipIcon
• app:chipIconTint
• app:chipIconSize
• app:closeIconVisible
• app:closeIcon
• app:closeIconSize
• app:closeIconTint
• app:checkable
• app:checkedIconVisible
• app:checkedIcon
• app:showMotionSpec
• app:hideMotionSpec

Приятно удивило наличие ChipGroup, являющегося наследником FlexboxLayout, которого наконец-то включили в библиотеку дизайна.

BackDrop

BackDrop – новый для Android паттерн навигации. Есть основной контент, который расположен на переднем плане, и дополнительная область, лежащая позади (обычно это меню навигации). Если нужно добраться до контента сзади, то передний план съезжает вниз до нужного уровня.
Состоит Backdrop из трех элементов:

На момент написания статьи он еще не реализован в библиотеке, и в соответствующем репозитории пока пусто. Поэтому пришлось делать свою реализацию, обернув ее в библиотеку:

Просто прикрепляем BackdropBehavior на нужный Front Container и передаем ему Toolbar и Back Container.

XML

Kotlin

Это просто один из вариантов реализации. Но для моего кейса получилось удобно. Думаю, решение Google будет несколько отличаться. Если вдруг есть предложения, то с радостью готов обсудить их в комментариях под статьей.

MaterialButtons

MaterialButtons – обновленные более кастомизируемые кнопки. У них есть следующие параметры для кастомизации:

• android:inset (Left, Top, Right, Bottom) — отступ кнопки от края View
• app:backgroundTint — цвет заполнения кнопки
• app:backgroundTintMode
• app:icon — можно добавить иконку, по умолчанию слева от текста
• app:iconPadding
• app:iconTint
• app:iconTintMode
• app:strokeColor — для создания кнопок с обводкой
• app:strokeWidth
• app:cornerRadius
• app:rippleColor

Конечно, эти стили для кнопок всегда можно сделать самостоятельно. Но теперь кастомизация кнопок хорошо работает «из коробки», и это очень удобно.

Например, чтобы сделать кнопку с крестиком, раньше пришлось бы писать два XML файла:

Layout:

bg_button.xml

Теперь описать кнопку можно сразу на месте:

Text Fields

Text Fields – тоже претерпел изменения. Теперь текстовому полю «из коробки» можно добавить обводку по контуру, сделать его залитым каким-то цветом, или закруглить отдельные углы.

Как и раньше, можно использовать конструкцию из InputLayout с дочерним EditText, для более удобного для отображения подсказок, ошибок и прочего выделения текста.

• app:boxCornerRadiusTopLeft
• app:boxCornerRadiusTopRight
• app:boxCornerRadiusBottomLeft
• app:boxCornerRadiusBottomRight
• android:hint
• app:hintEnabled
• app:errorEnabled
• app:setError
• app:helperTextEnabled
• app:helperText
• app:passwordToggleEnabled
• app:passwordToggleDrawable
• app:counterEnabled
• app:counterMaxLength

Изменения тоже не очень существенные, но кастомные решения можно разрабатывать теперь намного быстрее. С точки зрения бизнеса, скорость разработки имеет значение, и тут Google постарались неплохо.

MaterialCardView

MaterialCardView – это все старая CardView, но теперь с обводкой по контуру, как у кнопок.

Итого

Существенных изменений не так много. Новые механизмы кастомизации просто позволяют сделать чуточку проще то, что мы все делали и раньше. Зато появилась проблема совместимости с Support library. Разработчикам библиотек придется переезжать на Android X, что отнимет много времени и нервов. Особенно, если учесть, какая кодовая база сейчас support-ориентированна. Несмотря на то, что Google предоставляет инструмент для автоматизации переезда с заменой всех импортов, работает он не идеально. Подобные переезды на своих проектах все-таки придется пережить с некоторыми трудностями.

На данный момент не все заявленные Material-компоненты реализованы корректно, а некоторые не реализованы совсем. Будем смотреть, будем пробовать.

Источник

Android Material Design для начинающих

Инструкторы

Александр Барчук

В данном курсе вы познакомитесь с Material Design – единой системой, которая объединяет теорию, ресурсы и инструменты для создания качественного UI/UX.

Material Design (Материальный дизайн) — дизайн программного обеспечения и приложений операционной системы Android от компании Google. Впервые представлен на конференции Google I/O 25 июня 2014 года. Идея дизайна заключается в приложениях, которые открываются и сворачиваются как карточки, используя эффекты теней. По идее дизайнеров Google, у приложений не должно быть острых углов, карточки должны переключаться между собой плавно и практически незаметно.

Изначально внутри компании его называли кодовым именем «квантовая бумага» (quantum paper). Основная метафора материального дизайна — плоская бумага, находящаяся в трехмерном пространстве.

Зачем нужен материальный дизайн

Он служит двум целям: унификации многочисленных продуктов компании и унификации интерфейсов приложений для Android. После засилья скеоморфизма веб и интерфейсы шатнулись в сторону радикального уплощения, но это оказалось просто ещё одной крайностью. В Google решили, что чтобы быть понятными и интернациональными, объекты интерфейса должны иметь аналог, метафору в реальном мире. Такой метафорой стала бумага. Тонкая, плоская, но расположенная в трехмерном пространстве и имеющая тень, скорость движения, ускорение. Но бумага «квантовая», не настоящая. Она подчиняется физическим законам, но имеет и волшебные свойства. Это помогает показать пользователю принципы работы ПО, как происходит переход от одного к другому состоянию. Анимации тут не просто оживляют интерфейс, но показывают пользователю, что происходит.

Также рекомендуем вам для дальнейшего погружения в мир UI курс, который познакомит вас с принципами построения UI в Sketch.

Источник

Советы по текстурированию и моделированию для мобильных игр

Мацей Гёрники поделился тем, как он моделировал и текстурировал персонажа для мобильной игры и рассказал об инструментах MODO .

Введение

Меня зовут Мацей Гёрники, я родился в Польше и именно здесь начал карьеру в индустрии видеоигр. В данный момент я живу в Хельсинки, Финляндия и работаю арт-директором в MindTrust Labs .

Все это началось с университета, я встретил коллегу, который был членом клуба о науке CG. Он пригласил меня в клуб и с тех пор я увлекаюсь искусством. Я начал с изучение компьютерной графики и улучшал свои навыки, пока однажды не попробовал Unity и вот тут-то и началась моя карьера. Вскоре после этого я со своей девушкой решил начать делать игры.

На протяжении карьеры я работал над множеством различных игр для PC, Linux, Mac, VR, AR и конечно же мобильных платформ, которые и стали моим основным родом деятельности. Я работал над такими тайтлами как Leisure Suit Larry , Farmville 3 и Zombs Royale .

Чем занимаются арт-директоры

Моя основная работа в качестве арт-директора — удостоверяться в том, что все двигаются в одном направлении. Помимо этого я занимаюсь и самим проектом в целом, UX, UI, читабельность и общее ощущение от игры. Я пытаюсь задаваться такими вопросами как: Понимают ли игроки то, что происходит на экране? Эта информация читаема? Всё ли хорошо выглядит? Все это очень важные вопросы и я ищу на них ответ. Мобильные игры играются совершенно в разных условиях, ситуациях, так что мы хотим, чтобы они всегда были веселыми и увлекательными.

Самая сложная часть всего этого, понять кто наши игроки и что они от нас ожидают.

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

Процессы

Я всегда стараюсь работать с умом. Игры это время-затратные проекты. Если мы сможем что-то где-то упростить и оптимизировать процессы, то я как правило иду этой дорогой. Попытка упрощения некоторых вещей помогает поддерживать общие цели проекта. Эта философия отлично работает с 3D, все художники должны иметь козыри в рукаве. Моими основными инструментами для моделирования являются: ZBrush для скульптурирования, 3ds Max для моделирования, RizomUV для развертки и Octane Render для рендеров.

Заранее отрендеренные спрайты всё делают лучше, даже простейшую геометрию. Преимущество этого в том, что затем можно добавить желаемые эффекты — цветокоррекцию, сложные материалы, анимации. Просто нужно подходить к этому с умом.

Даже простая геометрия может выглядеть хорошо в правильном масштабе и ракурсе:

Простые анимации пре-рендеренных спрайтов в Unity :

Моделирование в MODO

В начале я изучал моделирование в Blender , а затем на стажировке начал использовать 3ds Max . Подход был простой — я просто прочитал всю инструкцию. Вообще на данный момент до сих пор есть некоторые функции 3ds Max , которые я еще не применял. Затем в некоторый период времени я интенсивно изучал программирование компьютерной графики и начал оптимизировать мой рабочий процесс, так как хотел работать быстрее. Тогда то я и нашел MODO , у него есть множество преимуществ и лишь несколько недостатков из 3ds Max . По моему опыту, в MODO процесс идет гораздо быстрее, чем в 3ds Max . Создатели MODO очень много времени уделили UX . Все нужные функции в легком доступе и к тому же кастомизируемы.

MODO в целом быстрее. Очень быстрый отклик интерфейса в сравнении с другими программами для работы с 3D. Особенно мне нравятся меню быстрого доступа и инструменты ретопологии.

Я кастомизировал MODO , чтобы ускорить свою работу. Многие скрипты, которые я использую, сделал Хеннинг Санден . И я модифицировал всплывающее меню под свои нужды.

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

И последнее меню с функциями, ускоряющими ретопологию при создании лоу-поли модели. Последнее меню соединено с другим набором инструментов, которые мне очень нравятся в MODO и все они для ретопологии. Эта часть процесса занимает очень много времени. Она полностью делается вручную, и если можно ее как-то автоматизировать, я это делаю. MODO очень помогает сделать ее быстрее с помощью набора умных функций вроде:

Источник