Подробнее о библиотеке компонентов дизайна материалов Google

1. Подождите, что это за «Библиотека компонентов материалов»?
2. Разве библиотека поддержки поддержки и Material Design Lite уже не делали этого?
3. Android
5. стриж
6. Objective-C
8. Полезные ссылки

Чуть более двух недель назад Google объявил о запуске «Библиотеки компонентов материалов», централизованного репозитория компонентов Material Design, который значительное количество людей восприняло как «вставку копий библиотеки поддержки проектирования».

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

Подождите, что это за «Библиотека компонентов материалов»?

Material Components - это инициатива Google по объединению структур реализации Material Design на разных платформах в одном централизованном репозитории с разработкой, осуществляемой основной командой инженеров и дизайнеров UX в Google. Эти компоненты являются официальными и обрабатываются специальной группой, что обеспечивает надежный рабочий процесс, который позволяет разработчикам использовать их в качестве строительных блоков, на которых они могут продолжать создавать красивые и функциональные пользовательские интерфейсы в парадигме бумаги и чернил. Библиотека включает большинство компонентов Material Design из своей спецификации, таких как флажки, стили текста, карточки, кнопки и т. Д., И ее модульность позволяет разработчикам либо включать весь набор, либо выбирать и выбирать только те компоненты, которые им необходимы.

Компоненты материалов для Android, iOS и веб-разработчиков помогают выполнить Материал Дизайн с модульными и настраиваемыми компонентами пользовательского интерфейса.

Разве библиотека поддержки поддержки и Material Design Lite уже не делали этого?

На этом этапе разработчики Android и интерфейсных приложений наверняка подумают, подождите, я использовал компоненты Material Design, используя библиотеку поддержки проектирования на Android или Material Design Lite в Интернете, зачем мне эта новая библиотека? ? Итак, оба эти варианта перешли в Компоненты конструирования материалов с улучшенной кодовой базой, эффективной модульностью, согласованными кроссплатформенными реализациями и, что наиболее важно, выделенной командой разработчиков и дизайнеров UX в Google, которая следит за ее разработкой, в отличие от ранее фрагментированных подход.

Android

С момента запуска Библиотеки поддержки дизайна в Material Design наблюдается резкий скачок, который в последнее время стал стандартом де-факто для Google, включая библиотеку, а также для предварительной настройки множества конфигураций, ориентированных на Material Design, при создании новый проект в Android Studio. За время, прошедшее с момента его выпуска, DSL значительно вырос, добавив множество компонентов по популярному запросу, а также добавив новые функции и функции для существующих компонентов.

Действует Библиотека компонентов дизайна материалов для Android, DSL перешел на GitHub по новым централизованным шаблонам и в специальную команду Google, сохранив даже прежние операторы импорта Gradle. В нынешнем выпуске ничего не изменилось перед разработчиками, но потенциал для будущего остается безграничным. Использование библиотеки MDC-Android ничем не отличается от использования DSL, добавления его в Gradle и последующего использования представлений в XML.

скомпилировать 'com.android.support:design:25.1.0' <android.support.design.widget.FloatingActionButton android: id = "@ + id / fab" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android : layout_gravity = "bottom | end" android: layout_margin = "@ dimension / fab_margin" android: src = "@ android: drawable / ic_dialog_email" />

IOS

Material Design заметно замедлил рост на мобильной платформе Apple, в первую очередь потому, что он рассматривается как язык дизайна Android, а также из-за отсутствия официальных библиотек поддержки компонентов Material Design, аналогично тому, что делала Библиотека поддержки дизайна на Android уже более двух лет. Компоненты Material Design Components для iOS, или MDC-iOS, как называет это Google, стремятся исправить это, предоставляя набор надежных, простых в использовании и официальных компонентов Material Design, которые написаны на Objective C, но также поддерживают более новый Swift. язык, и Интерфейсный Разработчик XCode.

Google собрал удобный руководство о том, как начать настройку нового проекта с MDC-iOS, но большинство из нас будет лучше относиться к пошаговому руководству для существующих проектов, и в официальном репозитории это тоже есть. Самый простой способ начать работу - использовать CocoaPods, Objective C и менеджер зависимостей Swifts. Если вы еще не используете его, CocoaPods можно установить с помощью простой команды:

sudo gem установить cocoapods cd ваш-проект-каталог pod init

Затем в ваш Podfile необходимо добавить модуль MDC-iOS:

target "MyApp" do ... pod 'MaterialComponents' end

И, наконец, вы готовы установить модуль и начать работу с рабочей областью, созданной для вас CocoaPods:

pod install откройте ваш-проект.xcworkspace

Использование компонентов должно быть вполне естественным для опытных разработчиков iOS, поскольку библиотека построена на знакомых классах UIKit и может быть добавлена ​​в представление несколькими строками после импорта соответствующего заголовка.

стриж

import MaterialComponents.MaterialButtons class ViewController: UIViewController {переопределить func viewDidLoad () {super.viewDidLoad () let liftButton = MDCRaisedButton.init (); riseButton.setTitle ("Поднятая кнопка", forState: .Normal); raiseButton.sizeToFit (); RaEBBTTON.ADDTarget (self, action: #selector (tapped), forControlEvents: .TouchUpInside); self.view.addSubview (raiseButton); } func tapped (отправитель: UIButton!) {NSLog («Кнопка была нажата!»); }}

Objective-C

#import "MaterialButtons.h" @implementation ViewController - (void) viewDidLoad {[super viewDidLoad]; MDCRaisedButton * поднялButton = [MDCRaisedButton новый]; [поднял кнопку setTitle: @ "Поднятая кнопка" forState: UIControlStateNormal]; [поднял размер кнопки ToFit]; [поднялButton addTarget: собственное действие: @selector (tapped :) forControlEvents: UIControlEventTouchUpInside]; [self.view addSubview :gedButton]; } - (void) постучал: (id) sender {NSLog (@ "Кнопка была нажата!"); } @конец

Web

Путешествие Material Design в Интернете началось с запуска Project Polymer, библиотеки веб-компонентов и полифиллов Google, которая включала в себя набор «бумажных компонентов», перенося все от любимой кнопки «Плавающее действие» до захватывающих дух волн, которые все так полюбили. В Интернете мы знаем и любим. Тем не менее, Polymer столкнулся с удручающей скоростью принятия решений из-за широко распространенного колебания веб-разработчиков в отношении принятия всей структуры веб-компонентов, исключительно для того, чтобы придать дизайну Material Design внешний вид, при этом многие вместо этого выбирают самостоятельно реализованные альтернативы CSS. Чтобы устранить эту проблему, Google запустил Material Design Lite, независимый от фреймворка продукт, который позволяет разработчикам реализовывать компоненты Material, просто импортируя несколько скриптов и таблиц стилей через CDN или загружая их и включая в HTML.

Material Design Components для Web стремится стать преемником Material Design Lite, предлагая простую для импорта структуру и легкую площадь, а также опираясь на нее, привнося модульность в картину. Компоненты MDC-Web можно установить с помощью Node Package Manager, либо в виде полного набора, либо в виде отдельных компонентов.

npm install - сохранить материал-компоненты-web npm install - сохранить @ материал / кнопка @ материал / карта

После установки компоненты довольно просто импортировать и использовать, так как пакет обеспечивает встроенную поддержку популярных загрузчиков модулей JavaScript, таких как Webpack или SystemJS, а при импорте модули используются точно так же, как стандартные теги HTML, хотя и с несколькими дополнительными классами CSS.

импортировать {checkbox as mdcCheckbox} из 'material-components-web'; <h2 class = "mdc-typography - display2"> Здравствуйте, компоненты материала! </ h2>

Это оно! Это самый простой способ начать работу с библиотекой MDC-Web. Для более глубокого введения Google собрал Начиная руководство, которое должно оказаться полезным для разработчиков, уже знакомых с импортом и использованием таких платформ.

Полезные ссылки

Хотите, чтобы больше подобных сообщений доставлялось на ваш почтовый ящик? Введите адрес электронной почты, чтобы подписаться на нашу рассылку.

Похожие

Комментарии