Эта новая библиотека вводит несколько новых компонентов, которые ранее были не доступны. Здесь мы кратко рассмотрим их, что они из себя представляют, что они делают, и как мы можем их реализовать.
Я любитель Material Design. Он дает сильное согласованности между приложениями и в целом делает их проще. На Google I/O 2015 была представлена новая библиотека от Google — Design Support Library.После ее введения нет никакого оправдания, чтобы не следовать гайдлайнам от Google.
Давайте взглянем на новые компоненты, которые мы имеем в наличии.
Snackbar
Методы и атрибуты немного похожи на Toast. Snackbar является новый компонентом, который позволяет нам показать быстрое сообщение пользователю внизу экрана. Также пользователь может взаимодействовать с ним.
Для разработчиков это очень легко реализовать с помощью нескольких строк кода.
Snackbar.make(mDrawerLayout, "Your message", Snackbar.LENGTH_SHORT)
.setAction(getString(R.string.text_undo), this)
.show();
Примечание: Хотя вы можете отобразить только один Snackbar в любой момент времени, можно делать «очереди» из нескольких Snackbar’ов, которые будут показаны в том порядке, в котором вызывается метод show() у каждого экземпляра.
Floating Action Button
Floating Action Button (FAB) является стандартным компонентом для побуждения к конкретному действию, например, добавлению элемента в избранное. Теперь FAB можно реализовать во всем приложении, без использования сторонних библиотек.
Кнопка может быть одного из двух размеров:
1) Нормальный (56dp)
2) Мини (40dp)
Нормальная (слева) и Mini (справа) FAB кнопки
По умолчанию кнопка использует в качестве фона accentColor из темы.Мы можем изменить его, а также другие атрибуты кнопки:
- fabSize — используется для установки размера кнопки («нормальный» или «мини»)
- backgroundTint — используется для установки цвета фона
- borderWidth -используется для установки рамки
- rippleColor — используется для установки цвета ripple-эффекта при нажатии
- src— используется для установки иконки FAB
Опять же, это супер легко добавить к layout-файл:
<android.support.design.widget.FloatingActionButton
android:id=”@+id/fab_normal”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/ic_plus”
app:fabSize=”normal” />
EditText с плавающей надписью
Новый TextInputLayout позволяет обернуть EditText для отображения плавающей надписи над EditText. Когда EditText в фокусе, надпись-подсказка медленно переходит наверх.
Для реализации этого мы просто должны обернуть наш EditText в TextInputLayout:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_text_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="@string/hint_email" />
</android.support.design.widget.TextInputLayout>
Также поддерживаются сообщения об ошибках, которые могут быть показаны, просто вызвав два метода:
setErrorEnabled(true); setError(getString(R.string.text_error_message));
Navigation View
Navigation Drawer широко используется во многих современных приложениях, и до недавнего времени его реализация была не очень простой. Новый NavigationView может быть просто помещен в наш DrawerLayout (см. пример кода ниже) и отображать наши навигационные элементы из ресурса меню.
<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_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<FrameLayout
android:id="@+id/main_content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>
Этот View поддерживает два ключевых атрибута:
Header Layout
Дополнительный атрибут headerLayout используется, чтобы указать на layout, который будет использоваться как заголовок Drawer’а. Он показывается над элементами нашего Drawer’а.
Menu
Атрибут меню используется для объявить ресурс меню, который будет использоваться для навигации элементов в ящике. Это также можно назвать inflateMenu (), чтобы раздуть меню программно.
Меню навигации могут быть использованы с подзаголовком или без него
Как было показано выше, существует два подхода при добавления пунктов меню в NavigationView.
Первый подход достигается с помощью стандартного набора сгруппированных записей:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<group android:checkableBehavior="single">
<item
android:id="@+id/navigation_item_1"
android:checked="true"
android:icon="@drawable/ic_android"
android:title="@string/navigation_item_1" />
<item
android:id="@+id/navigation_item_2"
android:icon="@drawable/ic_android"
android:title="@string/navigation_item_2" />
</group>
</menu>
Здесь элементы просто показаны в виде вертикального списке, подзаголовки не отображаются и все элементы принадлежат одной группе.
Второй подход — использовать подзаголовки для элементов навигации:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<group android:checkableBehavior="single">
<item
android:id="@+id/navigation_subheader"
android:title="@string/nav_header">
<menu>
<!-- Здесь пункты меню -->
</menu>
</item>
</group>
</menu>
Это позволяет нам отделить наши пункты меню с помощью подзаголовков.
Есть несколько других важных атрибутов, которые мы можем легко изменить, а именно:
- itemBackground — используется для установки фона пунктов меню
- itemIconTint — используется для применения оттенка к иконкам
- itemTextColor — используется для установки цвета текста пунктов меню
Для того, чтобы перехватить нажатие на пункт меню нам просто нужно установить OnNavigationItemSelectedListener, это позволит нам оперативно реагировать на любые прикосновения, которые происходят в нашем меню.
Примечание : Начиная с API21+, NavigationView автоматически подсвечивает статусбар.
Добавьте библиотеку в ваши зависимости и принимайтесь за работу!
compile 'com.android.support:design:22.2.0'
