Вступление
Во время Google I / O 2015 Google представил библиотеку поддержки дизайна для разработчиков Android. Эта библиотека позволяет разработчикам легко внедрять больше концепций Material Design в свои приложения, поскольку многие ключевые элементы изначально не были доступны сразу после установки. Помимо простоты использования, библиотека поддержки проектирования обратно совместима с API 7. Библиотека поддержки проектирования может быть включена в ваши проекты Android путем импорта зависимости Gradle.
1
|
compile ‘com.android.support:design:22.2.0’
|
1. Визуальные компоненты
В библиотеке поддержки проектирования есть две основные категории инструментов:
- визуальные компоненты
- компоненты движения
Мы начнем с того, что посмотрим, какие новые визуальные компоненты доступны для добавления блеска в ваши приложения.
Ввод текста материала
EditText
были в Android с самого начала, и хотя они просты в использовании , они не сильно изменились. С помощью библиотеки поддержки проектирования Google представила новый контейнерный вид с именем TextInputLayout
. Это новое представление добавляет функциональность к стандартному EditText
, такую как поддержка сообщений об ошибках и анимированных подсказок, чтобы сделать ваш пользовательский интерфейс всплывающим.
Как показано во фрагменте ниже, TextInputLayout
может быть включен в ваш файл макета в качестве оболочки для стандартного EditText
.
01
02
03
04
05
06
07
08
09
10
11
12
|
<android.support.design.widget.TextInputLayout
android:id=»@+id/textinput»
android:layout_width=»match_parent»
android:layout_height=»wrap_content»>
<EditText
android:id=»@+id/edittext»
android:layout_width=»match_parent»
android:layout_height=»wrap_content»
android:hint=»What is your name?»
</android.support.design.widget.TextInputLayout>
|
Джанлука Сегато более подробно рассмотрит компонент TextInputLayout
в следующем уроке.
Кнопки с плавающим действием
Одним из наиболее распространенных компонентов пользовательского интерфейса в приложениях Material Design является кнопка с плавающим действием. С момента их появления разработчикам приходилось либо создавать эти кнопки с нуля, либо выбирать одну из множества сторонних библиотек, разработанных специально для этих кнопок.
С помощью библиотеки поддержки проектирования можно размещать плавающие кнопки действий в макете и привязывать их к части экрана с помощью нескольких простых строк XML. Каждая кнопка легко настраивается с помощью значков и цветов. Доступны два размера: стандартный (56 дп) и мини (40 дп). Одним из самых больших преимуществ является то, что эти кнопки теперь будут поддерживаться Google по мере развития их дизайна.
1
2
3
4
5
6
7
|
<android.support.design.widget.FloatingActionButton
android:id=»@+id/fab»
android:layout_width=»wrap_content»
android:layout_height=»wrap_content»
android:layout_gravity=»end|bottom»
android:layout_margin=»16dp»
android:src=»@drawable/ic_fab» />
|
Хотя компоненты ViewPager
и DrawerLayout
некоторое время были доступны через библиотеку поддержки v4 , Google расширил их, предоставив два новых связанных виджета. Первая — официальная версия широко используемой библиотеки ViewPagerIndicator от Джейка Уортона под названием TabLayout
. Вторым является NavigationView
, который обеспечивает поддержку представлений заголовка ящика.
TabLayout
Компоненты TabLayout
могут иметь контент, добавляемый к ним вручную в коде, используя один из методов addTab
. Посмотрите на следующий пример.
1
2
3
|
tabLayout.addTab(tabLayout.newTab().setText(«Tab 1»));
tabLayout.addTab(tabLayout.newTab().setText(«Tab 2»));
tabLayout.addTab(tabLayout.newTab().setText(«Tab 3»));
|
Кроме того, вы можете связать компоненты TabLayout
с ViewPager
. Это достигается путем вызова setupWithViewPager()
, передавая ViewPager
в качестве первого и единственного аргумента. Это еще один способ изменить разделы в ViewPager
. Следует отметить, что getPageTitle()
необходимо переопределить при использовании TabLayout
с ViewPager
чтобы дать каждой вкладке правильное имя.
NavigationView
NavigationView
— это новый виджет, который расширяет функциональность DrawerLayout
. Разработчики теперь могут добавлять макеты заголовков в блок и отмечать выбранные разделы с помощью этого простого в использовании компонента.
В дополнение к этому теперь очень просто создавать разделы и подразделы в ящике с помощью файлов ресурсов меню. Для начала необходимо просто связать DrawerLayout
с DrawerLayout
в XML.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<android.support.v4.widget.DrawerLayout xmlns:android=»http://schemas.android.com/apk/res/android»
xmlns:app=»http://schemas.android.com/apk/res-auto»
android:id=»@+id/drawer_layout»
android:layout_height=»match_parent»
android:layout_width=»match_parent»
android:fitsSystemWindows=»true»>
<include layout=»@layout/content»/>
<android.support.design.widget.NavigationView
android:id=»@+id/nav_view»
android:layout_height=»match_parent»
android:layout_width=»wrap_content»
android:layout_gravity=»start»
android:fitsSystemWindows=»true»
app:headerLayout=»@layout/nav_header»
app:menu=»@menu/drawer_view»/>
</android.support.v4.widget.DrawerLayout>
|
Улучшенные тосты
Хотя сообщение Toast
уже многие годы является одним из основных продуктов Android, доступен новый виджет пользовательского интерфейса Snackbar
, обеспечивающий аналогичные функциональные возможности и улучшенный внешний вид. Snackbar
не только предоставляет информацию пользователю в течение короткого периода времени, он также поддерживает одно действие для добавления функциональности на основе контекста в ваши приложения и может быть отклонен жестом смахивания.
Snackbar
реализован аналогично Toast
, хотя следует отметить, что для его создания требуется представление, которое можно использовать для поиска нижней части экрана приложения.
1
2
3
4
5
6
7
8
|
Snackbar.make( view, «Action», Snackbar.LENGTH_LONG )
.setAction(«Action!», new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.e(«App», «Action!»);
}
} )
.show();
|
2. Компоненты движения
Поведение и анимация пользовательского интерфейса очень важны в Material Design. Чтобы облегчить это, Google выпустил несколько компонентов в Библиотеке поддержки проектирования, которые помогают в общих случаях использования. Керри Перес-Уанка (Kerry Perez-Huanca) рассмотрит этот аспект Библиотеки поддержки проектирования в следующем учебном пособии.
Реактивные виды
Вы, возможно, заметили в предыдущем примере, что FloatingActionButton
переместился вверх, когда Snackbar
представление Snackbar
. Это делается с помощью нового виджета CoordinatorLayout
, который оборачивает представления, которые должны быть смещены, чтобы освободить место для других представлений.
Улучшенный быстрый возврат и панели инструментов
Многие разработчики просят более простой способ отображения изображения параллакса, который работает с шаблоном быстрого возврата, исчезая или появляясь вновь по мере прокрутки пользователем. Вы можете увидеть это поведение в магазине Play для списков приложений. Чтобы позволить разработчикам реализовать это, не AppBarLayout
много времени на написание избыточного кода, Google выпустила представления CollapsingToolBarLayout
и AppBarLayout
. Используя различные параметры в этих виджетах, разработчики могут закрепить представления в верхней части экрана или указать, когда эти представления должны стать видимыми при прокрутке пользователя.
Вывод
Библиотека поддержки проектирования принесла в Android множество долгожданных инструментов. В сочетании с библиотекой AppCompat становится намного проще добавлять Material Design в приложения, сохраняя обратную совместимость.
Многие примеры того, как работать с этими новыми компонентами, можно найти в официальном справочном приложении Google, CheeseSquare , и Tuts + продолжит предоставлять подробные руководства о том, как реализовать эти новые функции.