Статьи

Обзор библиотеки поддержки дизайна Android

Во время Google I / O 2015 Google представил библиотеку поддержки дизайна для разработчиков Android. Эта библиотека позволяет разработчикам легко внедрять больше концепций Material Design в свои приложения, поскольку многие ключевые элементы изначально не были доступны сразу после установки. Помимо простоты использования, библиотека поддержки проектирования обратно совместима с API 7. Библиотека поддержки проектирования может быть включена в ваши проекты Android путем импорта зависимости Gradle.

1
compile ‘com.android.support:design:22.2.0’

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

  • визуальные компоненты
  • компоненты движения

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

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 могут иметь контент, добавляемый к ним вручную в коде, используя один из методов 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 — это новый виджет, который расширяет функциональность 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();

Поведение и анимация пользовательского интерфейса очень важны в Material Design. Чтобы облегчить это, Google выпустил несколько компонентов в Библиотеке поддержки проектирования, которые помогают в общих случаях использования. Керри Перес-Уанка (Kerry Perez-Huanca) рассмотрит этот аспект Библиотеки поддержки проектирования в следующем учебном пособии.

Вы, возможно, заметили в предыдущем примере, что FloatingActionButton переместился вверх, когда Snackbar представление Snackbar . Это делается с помощью нового виджета CoordinatorLayout , который оборачивает представления, которые должны быть смещены, чтобы освободить место для других представлений.

Многие разработчики просят более простой способ отображения изображения параллакса, который работает с шаблоном быстрого возврата, исчезая или появляясь вновь по мере прокрутки пользователем. Вы можете увидеть это поведение в магазине Play для списков приложений. Чтобы позволить разработчикам реализовать это, не AppBarLayout много времени на написание избыточного кода, Google выпустила представления CollapsingToolBarLayout и AppBarLayout . Используя различные параметры в этих виджетах, разработчики могут закрепить представления в верхней части экрана или указать, когда эти представления должны стать видимыми при прокрутке пользователя.

Библиотека поддержки проектирования принесла в Android множество долгожданных инструментов. В сочетании с библиотекой AppCompat становится намного проще добавлять Material Design в приложения, сохраняя обратную совместимость.

Многие примеры того, как работать с этими новыми компонентами, можно найти в официальном справочном приложении Google, CheeseSquare , и Tuts + продолжит предоставлять подробные руководства о том, как реализовать эти новые функции.