Исследуем новую Android Design Support Library. Часть 1

Эта новая библиотека вводит несколько новых компонентов, которые ранее были не доступны. Здесь мы кратко рассмотрим их, что они из себя представляют, что они делают, и как мы можем их реализовать.

Я любитель Material Design. Он дает сильное согласованности между приложениями и в целом делает их проще. На Google I/O 2015 была представлена новая библиотека от Google — Design Support Library.После ее введения нет никакого оправдания, чтобы не следовать гайдлайнам от Google.

Давайте взглянем на новые компоненты, которые мы имеем в наличии.

Snackbar

 

Методы и атрибуты немного похожи на Toast. Snackbar является новый компонентом, который позволяет нам показать быстрое сообщение пользователю внизу экрана. Также пользователь может взаимодействовать с ним.

 

1-O3WtW1Xi7SpMS2tk9ihzHQ

 

Для разработчиков это очень легко реализовать с помощью нескольких строк кода.

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)

1-htO3x82bq7HWSZab-70v4A

Нормальная (слева) и 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 в фокусе, надпись-подсказка медленно переходит наверх.

1-cHpl5ROayZZjEh_7ZExEPw

 

 

 

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

1-AsV0mMvJ21ni3aoSQqQ5LA

<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 (), чтобы раздуть меню программно.

1-mBoN5QvKq6mZE5tLNo0Khg

Меню навигации могут быть использованы с подзаголовком или без него

Как было показано выше, существует два подхода при добавления пунктов меню в 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'

Источник: Exploring the new Android Design Support Library.

Комментарии:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *