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 пользовательскими элементами.
Источник
Урок 13. Работа с Toolbar и menu на примере UserInfoActivity
Код начала урока:
Знакомство с элементом Toolbar
Элемент Toolbar предназначен для быстрого и удобного доступа пользователя к часто используемым функциям. Создать его можно используя как упрощённый вариант, в котором о многом уже позаботились разработчики системы Android , так и полностью управляя всеми внутренними компонентами. В данном уроке мы рассмотрим упрощённый вариант.
На главном экране приложения с детальной информацией о пользователе нам необходимо создать такой toolbar :
Здесь у нас находится только один элемент: кнопка поиска, которая должна перенаправлять нас на экран для поиска других пользователей.
В ранних версиях Android использовался элемент ActionBar , теперь же его функцию выполняет Toolbar . Важно, использовать Toolbar из пакета android.support.v7.widget , чтобы у нас была совместимость со старыми устройствами (версия Android ниже 5.0).
Поэтому сперва нам необходимо позаботиться о том, чтобы наши экраны не содержали элемент ActionBar по умолчанию. Для этого нам нужно унаследовать главный стиль приложения (находится в файле styles.xml ) от необходимого нам Theme.AppCompat.Light.NoActionBar :
Теперь необходимо добавить элемент Toolbar в xml -файл activity_user_info.xml . Для этого добавим Toolbar над контейнером RelativeLayout , в котором находится вся информация о пользователе. Также добавим стиль для тулбара, чтобы переиспользовать его на других экранах.
Атрибуты элемента 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 нашего приложения. После добавления иконок структура проекта выглядит так:
Т.е. мы скопировали несколько иконок для разных размеров экранов.
Если поменяем тип отображения файлов с Android на Project , то увидим, что физически создалось несколько папок, в каждой из которых лежит png для разного разрешения экрана.
Создание menu
Как мы с вами помним, для создания папки ресурсов menu необходимо нажать правой кнопкой по папке res и выбрать New -> Android resource directory . В появившемся диалоговом окне выбираем Resource type – menu . Все остальные поля заполнятся автоматически такими же значениями:
Нажимаем OK и видим, что папка создалась.
Затем создадим новый файл меню. Для этого правой кнопкой кликаем по папке menu и выбираем варианты New -> Menu resource file . Вводим имя user_info_menu.xml :
Из данного xml -файла можно увидеть, что наша иконка поиска будет всегда видна пользователю ( app:showAsAction=»always» ). Видим, что мы ссылаемся на иконку, которую только что добавили в проект ( android:icon=»@drawable/ic_search_white_24dp» ).
Теперь мы можем наполнить содержимым наш Toolbar , переопределив метод onCreateOptionsMenu в Activity . Это стало возможным благодаря тому, что мы вызвали метод setSupportActionBar(toolbar) .
Чтобы переопределить какой-то из методов мы можем нажать комбинацию клавиш Ctrl + O . После этого появится окно со всеми методами. Мы можем ввести название метода onCreateOptionsMenu . И выбрать его:
Давайте добавим в метод использование user_info_menu :
Отлично, дело за малым: выполнить необходимое нам действие по клику на кнопку – перейти на экран для поиска пользователей:
Единственная вещь, о которой ещё стоит упомянуть – это установка заголовка нашего экрана, отображающегося в тулбаре. Мы хотим устанавливать имя пользователя динамически в методе displayUserInfo . Для этого достаточно вызвать в необходимом месте метод тулбара setTitle(CharSequence title) . Помните, что мы вызывали строку setSupportActionBar(toolbar) . Также в Activity есть метод getSupportActionBar , который используется для совместимости со старыми устройствами. Его мы и будем использовать. Давайте добавим эту логику в метод displayUserInfo() :
AndroidStudio может подчёркивать вызов getSupportActionBar().setTitle , сообщая, что объект может быть null . Но мы помним, что мы вызвали метод setSupportActionBar(toolbar) , поэтому можем пока игнорировать это замечание.
Запустим приложение и посмотрим на результат:
В результате данного урока мы узнали:
- что такое элемент Toolbar ;
- что такое Menu и как его использловать с элементом Toolbar ;
- каким образом наполнить Toolbar пользовательскими элементами.
Источник
