Что такое тулбар андроид

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

Источник

Русские Блоги

Android ToolBar использует полное разрешение

До API 21 мы использовали строку заголовка в основном в ActionBarActivity Activity, и После API 21 Google отказался от ActionBarActivity и рекомендовал AppCompatActivity.

1. Введение в панель инструментов

ToolBar — это новый элемент управления навигацией, представленный в Android 5.0 для замены предыдущего ActionBar.В связи с его высокой настраиваемостью, гибкостью и преимуществами стиля дизайна материалов, все больше и больше приложений также используют ToolBar, такие как обычно используемые Зная программное обеспечение, верхняя панель навигации использует панель инструментов. Официальные лица считают, что есть еще пользователи, чья версия мобильного телефона ниже 5.0, поэтому ToolBar также включен в пакет поддержки v7, так что нижняя версия системы также может использовать ToolBar. В этой статье для объяснения будет использоваться панель инструментов пакета поддержки support v7, включая его базовое использование, настройку стиля и другие вопросы.

Основное использование ToolBar

Представьте пакет поддержки v7

Введите следующий код в build.gradle вашего проекта, вы можете представить пакет поддержки, который имеет панель инструментов, обратно совместимую:

Сменить тему

Чтобы иметь возможность использовать панель инструментов в обычном режиме, нам нужно скрыть оригинальный ActionBar. Это можно изменить в теме. В файл values ​​/ styles.xml необходимо внести следующие изменения:

Унаследованная тема Theme.Appcompat.Light.NoActionBar, здесь упоминается, этот Theme.AppCompat является темой в пакете поддержки, соответствующей версии 5.0 темы Theme.Material версии 5.0. Затем обратитесь к этой теме в файле манифеста.

Создайте этот элемент управления в файле макета. В файле activity_main.xml код выглядит следующим образом:

В приведенном выше примере создается android.support.v7.widget.Toolbar, и мы помещаем TextView внутрь, что является самым большим отличием от ActionBar, потому что ToolBar на самом деле является ViewGroup, которая поддерживает размещение дочернего View внутри него. Хорошо, мы запускаем программу и получаем следующий результат:

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

ToolBar совершенство

Во-первых, мы сначала рассмотрим изменение цвета панели инструментов

Изменить цвет панели инструментов очень просто, просто добавьте атрибут backgroud в файл макета, чтобы указать цвет, но для общего рассмотрения мы можем сделать это: Внести следующие изменения в файл values ​​/ styles.xml:

Затем в файле макета добавьте следующие атрибуты:

Таким образом, удобно использовать один и тот же цвет для каждой панели инструментов. Давайте сначала посмотрим на эффект:

Как вы можете видеть, цвет изменился. В то же время мы заметили, что цвет верхней строки состояния также изменился на темно-синий. Это связано с тем, что для создания верхней строки состояния добавлен атрибут «colorPrimaryDark». С этим изменением, используя эту функцию, мы можем легко добиться эффекта «погружения в строку состояния». Конечно, это относится только к Android 5.0 и выше. Если версия ниже, этот атрибут недействителен. Приложите картинку сюда (картинка изhttp://blog.csdn.net/bbld_/article/details/41439715）：

В соответствии с инструкциями на картинке мы можем легко настроить наш стиль в файле styles.xml,Если вы хотите изменить цвет заголовка, субтитров и текста меню на панели инструментов, вы можете использовать атрибут «textColorPrimary»И так далее.

Во-вторых, добавьте заголовок, субтитры, логотип, значки панели навигации

Получите экземпляр элемента управления в файле MainActivity, а затем установите его с помощью ряда установленных методов. Код выглядит следующим образом:

Если вы хотите изменить размер шрифта, цвет и т. д. заголовка и подзаголовка, вы можете вызватьsetTitleTextColor 、 setTitleTextAppearance 、 setSubtitleTextColor 、 setSubtitleTextAppearance Эти API. Конечно, эти параметры поддерживаются для добавления непосредственно в макет xml, но пространство имен android: не используется, а настраивается пространство имен, как показано ниже:

В-третьих, добавьте значки меню и нажмите события

1. Добавить значок опции меню

Общая панель навигации будет иметь пункты меню с правой стороны. Конечно, панель инструментов также поддерживает пользовательские меню. Сначала мы изменим следующее в файле меню: res / menu / menu_main.xml:

Вот такой знакомый: app: showAsAction = «ifRoom» / «never», приложение — это пользовательское пространство имен, потому что наша деятельность наследует AppCompatActivity, является пакетом поддержки v7 и не является внутренней по отношению к собственному SDK, поэтому Вы не можете использовать Android: showAsAction, в противном случае будет сообщено об ошибке. Тогда, если Room показывает, что есть место, оно показывает, никогда не означает никогда не показывать, но будет отображаться через overflowwindow.
Затем в Activity нам нужно переписать метод onCreateOptionsMenu (), чтобы загрузить это меню:

2. Добавить событие клика

С помощью меню нам нужно добавить событие щелчка в меню, чтобы меню имело практическое применение. Также очень удобно добавить событие щелчка. Вы можете сделать это:

Видно, что значок опции меню отображается нормально, и событие щелчка запускается нормально, но есть недостаток, то есть три точки в верхнем правом углу черные, что не соответствует значку значка. Есть ли способ изменить его? ? Ответ — да, это можно изменить, добавив стили следующим образом:

Атрибут «android: textColorSecondary» соответствует цвету трех точек в правом верхнем углу. После изменения он станет тем цветом, который вы хотите.

4. Другие модификации стиля

Изменить стиль всплывающего меню панели инструментов

Сначала мы нажимаем на три точки в верхнем правом углу, всплывающее меню, как показано ниже:

Вы можете видеть, что всплывающее меню в правом верхнем углу — это черный текст на белом фоне, так есть ли способ изменить его цвет фона, чтобы меню отображалось в виде белого текста на черном фоне? Ответ — да, мы можем установить это так:
Сначала создайте новую тему в файле styles.xml:

Можно видеть, что родительский объект этой темы напрямую унаследован от ThemeOverlay.AppCompat.Dark, который является темой пакета поддержки, и мы объявили свойство «android: colorBackground» внутри. Мы можем изменять цвет фона меню, пока мы меняем это свойство. а. Далее мы представляем эту тему в файле макета, который также очень прост. Добавьте дополнительные свойства на панель инструментов следующим образом:

Таким образом, цвет фона всплывающего меню можно изменить, изменив несколько строк кода, как показано ниже:

Изменить позицию всплывающего меню всплывающего меню панели инструментов

Мы видим, что позиция всплывающего меню слишком высока. Мы также можем изменить его положение так, чтобы оно находилось под панелью инструментов, что может выглядеть более красиво:
Измените файл styles.xml следующим образом:

Эффект заключается в следующем:

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

Во-вторых, добавить значки в меню панели инструментов

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

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

Используется в Activity: Activity требует расширения AppCompatActivity для переопределения метода onCreateOptionsMenu для загрузки макета меню

По умолчанию цвета шрифта заголовка и меню, а также другие значки меню являются черными. И меню покрывает панель инструментов, поэтому никакое меню не должно быть таким в текущем приложении. Потому что опыт действительно плохой. Как это изменить. Общее приложение выглядит так:

Стиль меню, установите цвет фона и запретите меню покрывать панель инструментов:

Цвет фона и проблемы покрытия были изменены. Но цвет шрифта панели инструментов и цвет значка, а также цвет шрифта меню слишком уродлив, продолжайте изменять: добавьте 2 строки кода в ToolbarPopupTheme, и вы можете сделать это:

Но значок в меню не может отображаться, решение:

Но шрифт белый и должен быть изменен на синий:

Я написал панель инструментов в интерфейсе фрагмента таким же образом, в Fragment нет метода setSupportActionBar (панель инструментов oolbar).

Меню фрагмента вышло. , , Но там нет иконки, на PrePareOptionsPanel (Просмотр, Меню)

После обнаружения, что у onCreateOptionsMenu (меню Menu, MenuInflater inflater) нет такого меню, как onPrepareOptionsPanel (представление View, меню Menu) ? ? ?

Источник

Toolbar

Знакомство с элементом Toolbar

Элемент Toolbar предназначен для быстрого и удобного доступа пользователя к часто используемым функциям. Создать его можно используя как упрощённый вариант, в котором о многом уже позаботились разработчики системы Android , так и полностью управляя всеми внутренними компонентами. В данном уроке мы рассмотрим упрощённый вариант.

В итоге у нас получится вот такой toolbar с единственной кнопкой поиска:

В ранних версиях Android использовался элемент ActionBar , теперь же его функцию выполняет Toolbar . Важно, использовать Toolbar из пакета android.support.v7.widget , чтобы у нас была совместимость со старыми устройствами (версия Android ниже 5.0). Поэтому сперва нам необходимо позаботиться о том, чтобы наши экраны не содержали элемент ActionBar по умолчанию.

Мы создадим пустой проект с одной Activity и будем всё делать в нём. Сперва унаследуем главный стиль приложения (находится в файле styles.xml ) от необходимого нам Theme.AppCompat.Light.NoActionBar :

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

Атрибуты элемента Toolbar

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

• «android:layout_height»>?attr/actionBarSize . Здесь мы указываем высоту тулбара. Таким синтаксисом мы можем получить доступ к значению высоты, которая применяется в атрибутах темы. По умолчанию, если мы не переопределяем значение, оно берётся из системного пакета темы support . Это значение лучше использовать, т.к. оно соответствует гайдам дизайна от Google . Подробнее можете изучить на сайте официальной документации.
• theme>@style/ThemeOverlay.AppCompat.Dark.ActionBar . Мы пока закомментировали этот атрибут. Объясним его чуть позже более наглядно.

Таким образом, мы добавили в нашу Activity тулбар. Но этого мало. Нам нужно сообщить ей, что мы используем его в качестве замены элемента ActionBar . Это необходимо, чтобы на устройствах со старой версией Android (ниже Android 5.0 (API 21)) наш интерфейс выглядел также, как и на устройствах с новой версией. Для этого нам просто нужно вызвать метод Activity setSupportActionBar(Toolbar toolbar) :

Важно, чтобы импорт вашего тулбара выглядел так: import android.support.v7.widget.Toolbar; . Именно тулбар из этого пакета нам и нужен.

Давайте запустим приложение и посмотрим, что получилось:

Видим, что текст в нашем тулбаре отображается тёмным цветом. Это потому что наше приложение по умолчанию использует Light тему Theme.AppCompat.Light.NoActionBar . Эта тема означает, что фоновый цвет будет светлым, а текст — тёмным.

Давайте раскомментируем атрибут тулбара, который указывает, что все его вложенные элементы должны использовать тему Dark . В тёмной теме весь текст будет отображать светлым цветом, а фоновый цвет – тёмным. Помним, что фоновый цвет тулбара мы тоже переопределяем, используя атрибут android:background .

Запустим приложение, посмотрим, что получилось:

Отлично, двигаемся дальше.

Осталось наполнить наш toolbar содержимым. Т.к. нашему тулбару необходима всего одна кнопка поиска, то мы можем обойтись стандартным способом добавления элементов в тулбар: при помощи Menu (помимо примера ниже также можете ознакомиться с данным уроком).

Скачивание png иконки

Давайте вначале скачаем иконку поиска, которая будет отображаться в menu . Как правило, для создания приложения достаточно пользоваться ресурсами, которые уже для разработчиков подготовил Google. Например, такая ситуация с иконками, которые рекомендует использовать Google. Их можно найти на этом сайте. В данном случае нам необходима иконка поиска, поэтому попробуем её найти, введя в поле поиска search :

Нашли подходящую иконку, выбрали цвет, указали, что нам нужны иконки для Android, а теперь можем скачать .png -файлы. В первую очередь извлекаем архив для удобной работы с файлами. После извлечения архива видим папку res , в которой содержатся иконки промасштабированные для различных разрешений экранов, поэтому в зависимости от разрешения экрана устройство самостоятельно будет использовать наиболее подходящий ресурс для отображения.

Наша задача — обеспечить приложение иконками для разных разрешений. Подробнее об этом можно почитать в официальной документации.

Таким образом выделяем все папки внутри res ( drawable-hdpi , drawable-xhdpi и т.д.), копируем их, потом заходим в проект и вставляем их в папку res нашего приложения. Там слишком много иконок разного разрешения. Оставим только иконки одного размера: baseline_search_white_24.png .

Если поменяем тип отображения файлов с Android на Project , то увидим, что физически создалось несколько папок, в каждой из которых лежит png для разного разрешения экрана:

Создание menu

Как мы с вами помним, для создания папки ресурсов menu необходимо нажать правой кнопкой по папке res и выбрать New -> Android resource directory . В появившемся диалоговом окне выбираем Resource type — menu . Все остальные поля заполнятся автоматически такими же значениями:

Нажимаем OK и видим, что папка создалась.

Затем создадим новый файл меню. Для этого правой кнопкой кликаем по папке menu и выбираем варианты New -> Menu resource file . Вводим имя toolbar_menu.xml :

Из данного xml -файла можно увидеть, что наша иконка поиска будет всегда видна пользователю ( app:showAsAction=»always» ). Например, если выбрать never , то иконка всегда будет спрятана в меню, которое вызывается нажатием на иконку трёх точек в правой части тулбара. Также видим, что мы ссылаемся на иконку, которую только что добавили в проект ( android:icon=»@drawable/baseline_search_white_24″ ).

Теперь мы можем наполнить содержимым наш Toolbar , переопределив метод onCreateOptionsMenu в Activity. Это стало возможным благодаря тому, что мы вызвали метод setSupportActionBar(toolbar) .

Чтобы переопределить какой-то из методов мы можем нажать комбинацию клавиш Ctrl + O . После этого появится окно со всеми методами. Мы можем ввести название метода onCreateOptionsMenu . И выбрать его:

Давайте добавим в метод использование toolbar_menu :

Отлично, теперь давайте по клику на иконку выведем на экран сообщение:

Единственная вещь, о которой ещё стоит упомянуть — это установка собственного заголовка нашего экрана, отображающегося в тулбаре. Для этого достаточно вызвать в необходимом месте метод тулбара setTitle(CharSequence title) . Помните, что мы вызывали строку setSupportActionBar(toolbar) . Также в Activity есть метод getSupportActionBar() , который используется для совместимости со старыми устройствами. Его мы и будем использовать. Давайте прямо в методе onCreate() изменим заголовок нашего экрана:

AndroidStudio может подчёркивать вызов getSupportActionBar().setTitle , сообщая, что объект может быть null . Но мы помним, что мы вызвали метод setSupportActionBar(toolbar) , поэтому можем пока игнорировать это замечание.

Добавление стрелки «назад»

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

А для того, чтобы обработать её нажатие, необходимо повесить обработчик на сам тулбар:

Теперь можно запустить приложение и посмотреть на результат:

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

• что такое элемент Toolbar ;
• что такое Menu и как его использовать с элементом Toolbar ;
• каким образом наполнить Toolbar пользовательскими элементами.

Источник