В прошлой статье мы рассматривали компоненты и виджеты библиотеки совместимости от Google, позволяющие «старым» (до 5.0) версиям Android прикидываться молодыми и стильными, примеряя меха Material Design'а. Однако, как ты уже знаешь, «корпорация добра» не сразу осчастливила программистов своими библиотеками и долгое время эта ниша оставалась незаполненной. Разумеется, нашлись добрые программисты, предложившие свои варианты реализации Material-компонентов для всех версий Android в соответствии с гайдлайнами Google. Сегодня мы рассмотрим некоторые опенсорсные проекты, проверенные временем, разработчиками и, конечно, пользователями приложений.

 

MaterialDrawer

Ссылка: https://github.com/mikepenz/MaterialDrawer

Автор: Mike Penz

MinSdkVersion: 10

Начнем, пожалуй, с самой известной среди Android-разработчиков библиотеки — MaterialDrawer. Как ясно из названия, она реализует виджет Navigation Drawer, и делает это просто и элегантно (смотри рисунок 1):

drawerResult = new Drawer()
    .withActivity(this)
    .withToolbar(toolbar)
    .withActionBarDrawerToggle(true)
    .withHeader(R.layout.drawer_header)
    .addDrawerItems(
         new PrimaryDrawerItem().withName("Элемент 1").withIcon(FontAwesome.Icon.faw_home).withBadge("99").withIdentifier(1),
         new PrimaryDrawerItem().withName("Элемент 2").withIcon(FontAwesome.Icon.faw_gamepad),
         …
         new SectionDrawerItem().withName("Новая секция"),
         new SecondaryDrawerItem().withName("Элемент 3").withIcon(FontAwesome.Icon.faw_cog),
         new SecondaryDrawerItem().withName("Элемент 4").withIcon(FontAwesome.Icon.faw_question).setEnabled(false),
         …
         new DividerDrawerItem(), // Разделитель
         new SecondaryDrawerItem().withName("Элемент 5").withIcon(FontAwesome.Icon.faw_github).withBadge("666+").withIdentifier(2)
    )
.build();

Метод withIcon определяет иконку слева, withBadge — тестовую метку справа (здесь, например, удобно отображать число новых сообщений или звонков), а setEnabled управляет доступностью элемента.

Рис. 1. Готовый Navigation Drawer за 5 минут
Рис. 1. Готовый Navigation Drawer за 5 минут

Обработка нажатий на элементы меню:

.withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id, IDrawerItem drawerItem) {
        if (drawerItem instanceof Nameable) {
            // Выбран обычный элемент меню
        }

        if (drawerItem instanceof Badgeable) {
            // Выбран элемент с текстовой меткой (бейджем)
            drawerResult.updateBadge("+1", position); // Меняем значение
        }
    })
})

Обработкой длинного клика занимается метод withOnDrawerItemLongClickListener с обработчиком onItemLongClick.

В наличии поддержка разных аккаунтов с аватарками и быстрое переключение между ними. Также библиотека может похвастаться нехилым набором иконок для пунктов меню. В репозитории доступен подробнейший пример использования.

 

FloatingActionButton

Пожалуй, Floating Action Button — наиболее популярный объект реализации в сторонних библиотеках. Учитывая, что неплохая поддержка FAB появилась и у Google, большинство из них потеряло актуальность и перестало развиваться. Мы же рассмотрим библиотеку с функционалом, отсутствующим в Support Library от Google.

Ссылка: https://github.com/futuresimple/android-floating-action-button

Автор: Jerzy Chalupski

MinSdkVersion: 14

В Hangouts при нажатии на кнопку с «+» на заглавном экране открываются дополнительные Action-элементы с подписями. Рассматриваемая библиотека реализует подобный функционал (рисунок 2). Вся «магия» готовится в разметке активности или фрагмента:

<com.getbase.floatingactionbutton.FloatingActionsMenu
    android:id="@+id/multiple_actions"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    fab:fab_addButtonColorNormal="@color/white"
    fab:fab_addButtonColorPressed="@color/white_pressed"
    fab:fab_addButtonPlusIconColor="@color/half_black"
    fab:fab_labelStyle="@style/menu_labels_style">

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/action_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_colorNormal="@color/white"
        fab:fab_title="Action A"
        fab:fab_colorPressed="@color/white_pressed"/>

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/action_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_colorNormal="@color/white"
        fab:fab_title="Action B"
        fab:fab_colorPressed="@color/white_pressed"/>

</com.getbase.floatingactionbutton.FloatingActionsMenu>

Элемент FloatingActionsMenu содержит две вложенные кнопки с подписями слева, появляющиеся при нажатии исходной. В коде же остается написать только обработчики нажатия:

final FloatingActionButton actionA = (FloatingActionButton) findViewById(R.id.action_a);
actionA.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        actionA.setTitle("Action A clicked");
    }
});
Рис. 2. Три выпадающих FAB
Рис. 2. Три выпадающих FAB

Доступен также форк этой библиотеки, рассчитанный на устройства с API 4.

Замечу, что данный элемент (дополнительные Action'ы, выпадающие из FAB) пока не является парадигмой Material Design'а, скорее, это эксперимент Google исключительно для Hangouts, что, кстати, было озвучено на Droidcon 2015.

 

DiscreteSeekBar

Ссылка: https://github.com/AnderWeb/discreteSeekBar

Автор: Gustavo Claramunt

MinSdkVersion: 7

Библиотека реализует компонент Discrete Slider, активно показывающий изменение прогресса в виде «капли» с текстовой меткой (рисунок 3). Для версий Android до 5.0 имитируется эффект «ряби» при нажатии на слайдер. Добавление компонента в разметку тривиально:

<org.adw.library.widgets.discreteseekbar.DiscreteSeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:dsb_min="2"
    app:dsb_max="15"
/>
Рис. 3. Слайдер и его «капля»
Рис. 3. Слайдер и его «капля»

Для написания кода доступны обработчики: onProgressChanged — при изменении прогресса, onStartTrackingTouch — при первом прикосновении, onStopTrackingTouch — при убирании пальца.

sb = (DiscreteSeekBar) view.findViewById(R.id.seekBar);
sb.setOnProgressChangeListener(new DiscreteSeekBar.OnProgressChangeListener() {
    @Override
    public void onProgressChanged(DiscreteSeekBar discreteSeekBar, int i, boolean b) {}

    @Override
    public void onStartTrackingTouch(DiscreteSeekBar discreteSeekBar) { }

    @Override
    public void onStopTrackingTouch(DiscreteSeekBar discreteSeekBar) {}
});

Кроме того, с помощью обширных свойств компонента можно менять внешний вид и поведение. Например, чтобы задать основные цвета (окантовки, капли и «ряби»), достаточно указать в разметке:

Продолжение статьи доступно только подписчикам

Вариант 1. Оформи подписку на «Хакер», чтобы читать все статьи на сайте

Подписка позволит тебе в течение указанного срока читать ВСЕ платные материалы сайта, включая эту статью. Мы принимаем оплату банковскими картами, электронными деньгами и переводами со счетов мобильных операторов. Подробнее о подписке

Вариант 2. Купи одну статью

Заинтересовала статья, но нет возможности оплатить подписку? Тогда этот вариант для тебя! Обрати внимание: этот способ покупки доступен только для статей, опубликованных более двух месяцев назад.


1 комментарий

Подпишитесь на ][, чтобы участвовать в обсуждении

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

Check Also

Безопасность превыше всего. 9 простых трюков, которые сделают жизнь линуксоида секьюрнее

Жизнь обычных людей складывается из мелочей. Жизнь линуксоида складывается из множества ма…