Здравствуйте. В этом уроке я расскажу о библиотеке 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("[email protected]")
.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.
