NavigationDrawer в стиле Material

Здравствуйте. В этом уроке я расскажу о библиотеке MaterialDrawer. Библиотека реализует функционал NavigationDrawer в стиле MaterialDesign.

Поддерживается Android начиная с IceCreamSanwich (API 14). Из особенностей можно выделить то, что боковое меню может вылезать как справа, так и слева. Также можно настроить расположение панели меню над или под Toolbar’ом. Как обычно, исходники выложены на GitHub, ссылки на них приведены в конце статьи.

Для работы библиотеки нам нужно подключить AndroidSupportLibrary v7 к проекту.

Подготовка

После создания проекта нам нужно добавить Toolbar в каждое Activity. Как это сделать описано в этой статье.

Найдем Toolbar и установим его в качестве ActionBar’а:

public class MainActivity extends ActionBarActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
		setSupportActionBar(toolbar);

	}

}

Теперь, мы можем подключить NavigationDrawer:

Drawer result = new DrawerBuilder()
.withActivity(this)
.build();

После этого у нас есть пустой NavigationDrawer.

Настраиваем меню

Прежде чем мы начнем добавлять элементы в боковое меню нам надо его настроить.

Чтобы Drawer вылазил под Toolbar’ом нам нужно вызвать метод withDisplayBelowToolbar(boolean):

Drawer result= new DrawerBuilder()
	.withActivity(this)
	.withToolbar(toolbar)
	.withDisplayBelowToolbar(true)
	.build();

Включаем подсветку статусбара:

.withTranslucentStatusBar(true)

Показываем кнопку назад:

result.getActionBarDrawerToggle().setDrawerIndicatorEnabled(false);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Включаем анимацию стрелки:

.withActionBarDrawerToggleAnimated(true)

Открываем Drawer:

result.openDrawer();

Закрываем Drawer:

result.closeDrawer();

Проверяем, открыт Drawer или нет:

result.isDrawerOpen();

Убираем затемнение при открытие меню:

result.getDrawerLayout().setScrimColor(Color.TRANSPARENT);

Отображение под Toolbar’ом:

.withDisplayBelowToolbar(true)

Изменяем фона слайдера

Также мы можем поменять фон у бокового меню. В качестве фона можно установить цвет или Drawable.

Меняем цвет фона:

.withSliderBackgroundColor(Color.DKGRAY)

Берем цвет  фона из ресурсов:

.withSliderBackgroundColorRes(R.color.drawer_bg)

Устанавливаем Drawable в качестве фона:

.withSliderBackgroundDrawable(getResources().getDrawable(R.drawable.drawer_bg))

Берем Drawable из ресурсов.

.withSliderBackgroundDrawableRes(R.drawable.drawer_bg)

Добавляем пункты меню

Элементы в Drawer добавляются через метод  addDrawerItems(IDrawerItem… drawerItems):

DrawerBuilder()
    .withActivity(this)
    .addDrawerItems(
        new PrimaryDrawerItem()
        .withName(R.string.drawer_item_home)
        .withIdentifier(1)
    )
    .build();

Все элементы в MaterialDrawer делятся на 5 типов:

1) BaseDrawerItem
2) DividerDrawerItem
3) PrimaryDrawerItem
4) SecondaryDrawerItem
5) SectionDrawerItem

Мы рассмотрим каждый из них.

BaseDrawerItem

Базовый класс для всех элементов. Не имеет конструктора, поэтому мы не можем добавлять его в меню. Едем дальше.

DividerDrawerItem

Это обычная разделительная линия. Пример:

new DividerDrawerItem()

PrimaryDrawerItem

Пункт меню. Пример:

new PrimaryDrawerItem().withName(R.string.drawer_item_name)

В методе withName мы можем передать как id строки (тогда библиотеки автоматически возьмет строку из ресурсов) или же сразу передать строку.

Меняем цвет выделенного пункта:

.withSelectedColor(R.id.my_selected_icon)

Берем цвет выделенного пункта из ресурсов:

.withSelectedColorRes(R.color.selected_drawer_item)

Меняем цвет текста выделенного пункта:

.withSelectedTextColor(Color.BLUE)

Берем цвет текста выделенного пункта из ресурсов:

.withSelectedTextColorRes(R.color.selected_drawer_item)

Добавляем иконку:

.withIcon(getResources().getDrawable(R.id.my_icon)

Меняем иконку выделенного пункта:

.withSelectedIcon(R.id.my_selected_icon)

Добавляем бейдж:

.withBadge("100")

Добавляем описание:

.withDescription(R.string.drawer_item_description)

Меняем цвет текста:

.withTextColor(Color.RED)

Меняем цвет текста  выделенного пункта:

.withSelectedTextColorRes(Color.BLACK)

Изменяем шрифт текста:

.withTypeface(yourTypeface)

SectionDrawerItem

Разделительная линия с надписью. Пример:

 new SectionDrawerItem().withName(R.string.drawer_item_name)

Меняем цвет текста:

.withTextColor(Color.RED)

Изменяем шрифт текста:

.withTypeface(yourTypeface)

Добавляем блок с профилями

Добавление блока с профилями в NavigationDrawer осуществляется с помощью класса AccountHeader. Работает он по тому же принципу что и класс Drawer. Простой пример:

AccountHeader.Result headerResult = new AccountHeader()
 .withActivity(this)
 .withHeaderBackground(R.drawable.header)
 .build();

Drawer result = new DrawerBuilder()
 .withActivity(this)
 .withToolbar(toolbar)
 .withAccountHeader(headerResult)
 .build();

Вот что у нас получилось:

Тут тоже есть два типа элементов:

1) ProfileDrawerItem

2) ProfileSettingDrawerItem

ProfileDrawerItem — это, собственно, сам профиль.

ProfileSettingDrawerItem — пункты меню для управления профилями.

Чтобы добавить профили в наш блок нужно вызвать метод addProfiles(IProfile… profiles) и передать ему объекты класса ProfileDrawerItem или ProfileSettingDrawerItem. Простой пример:

IProfile profile = new ProfileDrawerItem()
 .withName("Java-Help")
 .withEmail("java-help@mail.ru")
 .withIcon(getResources().getDrawable(R.drawable.profile));

AccountHeader.Result headerResult = new AccountHeader()
 .withActivity(this)
 .withHeaderBackground(R.drawable.header)
 .addProfiles(profile);
 .build();

Теперь рассмотрим методы классов ProfileDrawerItem  и ProfileSettingDrawerItem. Ниже я буду приводить имя метода с параметрами и его описание.

ProfileDrawerItem  

withName(String name) — устанавливаем имя профилю
withEmail(String email) — устанавливаем E-mail профилю
withIcon(Drawable icon) — устанавливаем иконку профилю

ProfileSettingDrawerItem

withName(String name) — устанавливаем имя пункту
withIcon(Drawable icon) — устанавливаем иконку пункту
withIdentifier(int identifier) — устанавливаем ID пункту
withTextColor(int textColor) — устанавливаем цвет текста пункту
withTextColorRes(int textColorRes) — устанавливаем цвет текста пункту из ресурсов
withTypeface(Typeface typeface) — устанавливаем шрифт текста пункту

Делаем блок  профилями компактным:

.withCompactStyle(true)

Обрабатываем нажатия

Для того, чтобы обработать нажатие на пункт меню нм нужно вызвать метод withOnDrawerItemClickListener и передать реализацию интерфейса OnDrawerItemClickListener:

.withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
   @Override
   public boolean onItemClick(AdapterView<?> parent, View view, int position, long id, IDrawerItem drawerItem) {
       switch(drawerItem.getIdentifier()){
          case 0:

          break;
       }
       return true;
    }
})

Добавляем еще один Drawer

Drawer result = new DrawerBuilder()
    .withActivity(this)
    .withToolbar(toolbar)
    .addDrawerItems(
        //добавляем пункты
    )
    .build();

new Drawer()
    .withActivity(this)
    .addDrawerItems(
        //добавляем пункты
    )
    .withDrawerGravity(Gravity.END)
    .append(result);

Закрываем меню при нажатии кнопки назад

@Override
public void onBackPressed() {
    if (result != null && result.isDrawerOpen()) {
        result.closeDrawer();
    } else {
       super.onBackPressed();
    }
}

Библиотека на GitHub: MaterialDrawer.
Исходники примера: MaterialDrawer.