Тулбар андроид что это

Как декларативно описать коллапсирующий тулбар

Хочу представить решение того, как можно описать CollapsingToolbar, с акцентом на читаемости кода. В статье не будет объясняться, что такое и как написать свой CoordinatorLayout.Behavior. Если читателю интересно в этом разобраться, есть много статей, в том числе на хабре. Если разбираться не хочется — ничего страшного: я постарался вынести написание CollapsingToolbar так, чтобы можно было абстрагироваться от CoordinatorLayout.Behavior и OnOffsetChangedListener.

Термины

Зачем понадобилось писать свое решение

Я просмотрел несколько подходов в «интернетах», и практически все были построены следующим образом:

1. Задается фиксированная высота для AppBarLayout.
2. Пишется CoordinatorLayout.Behavior, в котором какими-то вычислениями (закешированная высота view складывается с bottom другого view и за вычетом margin умножается на проскролл, вычисленный здесь же) меняют какую-то вью.
3. Другие вью меняют в OnOffsetChangedListener AppBarLayout-а.

Вот пример Behavior с описанным подходом, 2.5к звезд на Гитхабе.

Поправить верстку для этого решения можно, но меня смущает другое. Некоторые вью управляются через OnOffsetChangedListener, некоторые — через Behavior, что-то работает из коробки. Разработчику, чтобы понять всю картину, придется пробежаться по множеству классов, и если для новой вью придется добавить поведение, которое зависит от других Behavior-ов и от вью, которые изменяются в OnOffsetChangedListener, могут вырасти костыли и баги на ровном месте

Кроме того, в данном примере не показано, как быть, если в тулбар будут добавляться дополнительные элементы, которые влияют на высоту этого тулабара.

В гифке в начале статьи видно, как по нажатию на кнопку скрывается TextView — и NestedScroll подтягивается выше, чтобы не возникало пустого пространства).

Как это сделать? Решения, которые первыми приходят на ум, — написать еще один CoordinatorLayout.Behavior для NestedScroll (сохранив логику базового AppBarLayout.Behavior) или засунуть тулбар в AppBarLayout и менять его на OnOffsetChangedListener. Я пробовал оба решения, и получался завязанный на детали реализации код, с которым довольно сложно будет разобраться кому-то другому и нельзя будет переиспользовать.

Буду рад, если кто-то поделится примером, где такая логика реализована «чисто», а пока покажу свое решение. Идея в том, чтобы иметь возможность декларативно описать в одном месте, какие вьюхи и как должны себя вести.

Как выглядит апи

Итак, для создания CoordinatorLayout.Behavior нужно:

• унаследовать BehaviorByRules;
• переопределить методы, возвращающие AppBarLayout, CollapsingToolbarLayout и длину скролла (высоту AppBarLayout).
• переопределить метод setUpViews — описать правила, как вью будет себя вести при измененнии проскролла аппБара.

TopInfoBehavior для тулбара из гифки в начале статьи будет выглядеть так (далее в статье объясню, как это работает):

Как это работает

Задача сводится к написанию правил:

Тут все ясно — приходит float-значение от 0 до 1, отражающее процент проскролла ActionBar, приходит вью и ее первоначальный стейт. Интереснее выглядит BaseBehaviorRule — правило, от которого наследуются другие базовые правила.

Для базовых правил определяется размах значений (min, max) и interpolator. Этого хватит для того, чтобы описать практически любое поведение.

Допустим, мы хотим задать альфу для нашего вью в диапазоне 0.5 до 0.9. Также мы хотим, чтобы вначале скролла вью быстро становилась прозрачной, а затем скорость изменений падала.
Правило будет выглядеть так:

А вот реализация BRuleAlpha:

И, наконец, код BehaviorByRules. Для тех, кто писал свой Behavior, все должно быть очевидно (кроме того, что внутри onMeasureChild, об этом расскажу ниже):

Так что там с onMeasureChild?

Это нужно для решения проблемы, о которой писал выше: если какая-то часть тулбара исчезает, NestedScroll должен подъехать выше. Чтобы он подъехал выше, нужно уменьшить высоту CollapsingToolbarLayout.

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

Источник

Material Design. Динамический Toolbar на живом примере

Уверен, что те, кто следят за изменениями в мире Android, заметили, что Toolbar начинает играть в приложениях всё более значимую роль. Например в последней версии Gmail клиента в Toolbar вынесен почти весь функционал по работе с почтой, а в новом Google Chrome Toolbar отвечает за работу с текстом страниц.

В данной статье я постараюсь рассказать о создании динамического Toolbar, который позволит пользователю работать с контентом четырьмя различными способами в рамках одного Activity. Мы рассмотрим весь процесс разработки Toolbar-a начиная с xml файлов стилей и заканчивая анимацией иконок, а в конце статьи я оставлю ссылку на GitHub репозиторий с примером полностью рабочего приложения.

Начнём с постановки задачи

Мы будем разрабатывать Toolbar для приложения, которое позволит пользователю следить за изменениями цен на акции. На главном экране будет расположен список всех акций, за которыми следит пользователь, мы также должны реализовать базовый функционал: удаление, поиск и сортировку акций. Вот так я реализовал этот функционал с помощью динамического Toolbar-a:

Стандартный режим	Режим поиска	Режим удаления	Режим сортировки

Создаём xml файлы конфигураций

Итак, в первую очередь нам нужно создать xml файл самого Toolbar-a. Я советую сделать это в отдельном файле, так как в будущем мы скорее всего захотим использовать один и тот же (или похожий) Toolbar во всех Activity нашего приложения.

Теперь мы можем добавить toolbar.xml в xml Activity следующим образом:
res/layout/activity_main.xml

Поскольку в нашем Toolbar будет располагаться виджет поиска, мы можем настроить его внешний в вид в файле styles.xml нашего приложения. В 21 версии Android SDK появилось гораздо больше возможностей для кастомизации виджета поиска (SearchView Widget), вы можете посмотреть полный список атрибутов по этой ссылке: AppCompat v21 — Material Design for Pre-Lollipop Devices! В этом же файле мы зададим цвет нашего Toolbar.

И наконец создадим файл со списком всех элементов нашего Toolbar-а. Тут у нас есть несколько вариантов:

• В начале создать только те элементы, которые будут видны в стандартном режиме, а затем в коде добавлять или удалять элементы при переходе между режимами.
• Сразу создать все существующие элементы в xml файле, а в коде просто управлять их видимостью.

Я выбрал второй вариант так как у нас не так много элементов внутри Toolbar и нам нет смысла экономить память храня в ней только видимые элементы.

Также существует два способа создания элементов Toolbar:

Создавать элементы внутри меню (Menu), как экземпляры класса MenuItem. Этот способ использовался в предыдущих версиях Анрдроид (API Level

Источник

Урок 14. Наполнение Toolbar вложенными элементами на экране SearchUsersActivity

Код начала урока:

Нам необходимо сделать тулбар такого вида:

Добавление Toolbar-компонента

Здесь стандартным меню не обойтись, т.к. здесь уже присутствует более сложная логика пользовательского интерфейса – элемент поиска. Поэтому нам понадобится файл toolbar_search_user.xml , который мы создавали в одном из прошлых уроков.

Сперва, как и с предыдущим тулбаром в файле activity_user_info.xml , добавим его в файл activity_search_users.xml :

Мы изменили корневой элемент с FrameLayout на LinearLayout , т.к. у нас появился второй вложенный элемент. Мы указали свойство android:orientation=»vertical» , чтобы элементы располагались вертикально.

А теперь просто добавим содержимое файла toolbar_search_user.xml (немного его изменив) внутрь элемента Toolbar . Toolbar является ViewGroup , поэтому в него можно помещать элементы, как и в любой другой контейнер. Единственный нюанс – Toolbar располагает элементы один над одним по умолчанию (как FrameLayout ).

Единственное, что изменилось – атрибут android:layout_height=»match_parent» у контейнера RelativeLayout . Т.к. нам необходимо, чтобы контейнер занимал всю высоту parent элемента (им является Toolbar ).

Запустим приложение и перейдём на экран поиска пользователей:

Видим, что данные отобразились, но визуально они выглядят не очень.

Стилизация Toolbar-компонента

Нам надо поменять стили у наших элементов EditText и Button .

Давайте усовершенствуем наш EditText :

Объясним новые атрибуты:

• android:maxLines=»1″ – означает, что EditText не будет поддерживать многострочный режим и весь текст будет располагаться в одну строку.
• android:imeOptions=»actionSearch» и android:inputType=»text» добавляют в клавиатуру пользователя кнопку поиска, нажатие по которой в дальнейшем мы сможем обработать.
• android:background=»@null» убирает нижнюю линию, которая по умолчанию присутствует в EditText .

Также некоторые изменения претерпела кнопка поиска.

Добавление иконки шрифта Ionicons

Перед тем, как добавить кнопку, нам необходимо по аналогии со шрифтом font_awesome в проект добавить шрифт ionicons .

После этого нам нужно добавить строковый ресурс иконки поиска, которая располагается на сайте. Найти её можно используя название ion-android-search . После того, как нашли её, необходимо скопировать иконку, которая находится в блоке selectable , как показано на скриншоте:

Затем просто создаём новый строковый ресурс с именем ion_search и вставляем то значение, которое мы скопировали:

Видим, что иконка отобразилась корректно.

Вот как выглядит наша кнопка со всеми атрибутами:

Мы установили атрибутам значение minWidth , minHeight 0dp , т.к. по умолчанию кнопки в Android системе имеют минимальную ширину и высоту. В данном случае нам это мешает, поэтому мы переопределяем эти значения.

Также мы используем атрибут android:background=»@drawable/transparent_gfx» . Пользовательский интерфейс должен быть интуитивно понятен для пользователя, поэтому он должен показывать некую реакцию на действия пользователя. В данном случае при нажатии на кнопку поиска её фон должен видоизменяться, тем самым показывая отзывчивость кнопки на действия пользователя. Более подробно об этом эффекте можно узнать из отрывка курса Material Design в Android . Ниже приведены файлы эффекта:

Нам нужно создать файл с названием transparent_gfx в папке drawable . Для этого кликните по папке правой кнопкой, выбрав элементы New -> Drawable resource file .

Обработка событий Toolbar-компонента

Теперь мы можем работать с элементами тулбара как и с любыми другими элементами экрана. Давайте добавим Toolbar и его вложенные элементы в SearchUsersActivity .

Ничего необычного. Только вложенные элементы мы ищем используя toolbar.findViewById() . Это сделано для оптимизации поиска элементов. Поиск будет проходить только внутри Toolbar элемента, а не во всех элементах SearchUsersActivity .

Теперь давайте будем производить поиск пользователей не в методе onCreate , а добавим слушателей на нажатие кнопки поиска и на нажатие кнопки search внутри клавиатуры:

Если вы сейчас запустите приложение, то не увидите в тулбаре кнопки «Назад» в левой его части. Её мы можем добавить, используя стандартный механизм тулбара:

Таким образом, мы сообщаем Activity о необходимости отобразить кнопку «Назад». По умолчанию кнопка назад не будет работать. Мы хотим, чтобы она работала как аппаратная кнопка «Назад». Для этого мы перехватываем нажатием кнопки в тулбаре и вызываем метод Activity onBackPressed() .

Посмотрим, что у нас получилось в итоге:

Проблема повторения элементов в списке

У нас появилась небольшая проблема: если мы несколько раз нажмём на кнопку поиска, то элементы в списке будут повторяться. Для избежания этой проблемы мы можем при каждом вызове метода searchUsers удалять старые элементы из адаптера. Давайте так и сделаем:

Проблема решена. Можете запустить приложение и убедиться в этом.

Отлично, поздравляем вас!

Кстати, мы можем удалить файл toolbar_search_user.xml , т.к. он нам больше не понадобится.

В результате данного урока мы:

• отработали навыки работы с Toolbar ;
• узнали, каким образом наполнить Toolbar пользовательскими элементами.

Источник

Подключаем Toolbar

Toolbar — это полная замена ActionBar’а. В отличие от него Toolbar более настраиваемый. Так как Toolbar является обычным View, то мы можем разместить в нем любые View-компоненты (например, логотип компании). В этом уроке я расскажу, как добавить Toolbar в свое приложение.

Подготовка

Для того, чтобы добавить Toolbar в приложение нам нужно подключить библиотеку AppCompat из Android Support Library v7. Я не буду описывать как подключать эту библиотеку к проекту, т. к. в разных IDE это делается абсолютно по-разному.

Подключаем

Для начала нам нужно создать файл themes.xml в папке res/values вашего проекта и вставить в него следующий код:

colorPrimary — цвет нашего Toolbar’а
colorPrimaryDark — цвет статусбара (доступно с Android KitKat 4.4)
colorAccent — цвет виджетов приложения по умолчанию.

Теперь нам нужно прописать нашу тему в манифесте в разделе application:

Создайте файл toolbar.xml в папке res/layout после чего вставьте в него этот код:

После этого мы можем подключать наш Toolbar, прописав в layot-файле:

Готово. Осталось лишь указать нашей Activity на наш Toolbar. Но прежде чем это сделать нам нужно унаследоваться от ActionBarActivity вместо обычного класса Activity. Это нужно потому, что в классе AppCompatActivity есть метод setSupportActionBar(Toolbar), с помощью которого мы и указываем нашей Activity на Toolbar:

Устанавливаем цвет шрифта

Мы также можем изменить цвет заголовка Toolbara, вызвав метод setTitleTextColor и передать на вход наш цвет:

Чтобы каждый раз не прописывать цвет в коде мы можем сделать это в themes.xml, вставив между тегами style:

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

Для того, чтобы статус бар подсвечивался вставляем между тегами style в values/themes.xml:

Создадим в файле values/dimens.xml новый dimen:

А файлах values-v19/dimens.xml и values-v21/dimens.xml вставляем:

24dp — это высота статусбара.

Устанавливаем отступ сверху нашему Toolbar’у:

Мы установили отступ в 24 dp в 19 и 21 версиях API, так как только у них поддерживается подсветка статусбара.

Также не забудьте поменять в манифесте targetSdkVersion на 19 или выше.

Начиная с Support Library v22 ActionBarActivity считается устаревшим. На замену к нему пришел AppCompatActivity.

Источник