тулбар в приложении это
Урок 13. Работа с Toolbar и menu на примере UserInfoActivity
Знакомство с элементом Toolbar
На главном экране приложения с детальной информацией о пользователе нам необходимо создать такой toolbar :
Здесь у нас находится только один элемент: кнопка поиска, которая должна перенаправлять нас на экран для поиска других пользователей.
Поэтому сперва нам необходимо позаботиться о том, чтобы наши экраны не содержали элемент ActionBar по умолчанию. Для этого нам нужно унаследовать главный стиль приложения (находится в файле styles.xml ) от необходимого нам Theme.AppCompat.Light.NoActionBar :
Атрибуты элемента Toolbar
Остановимся на некоторых атрибутах:
Давайте запустим приложение и посмотрим, что получилось:
Запустим приложение, посмотрим, что получилось:
Отлично, двигаемся дальше.
Осталось наполнить наш toolbar содержимым. Т.к. нашему тулбару необходима всего одна кнопка поиска, то мы можем обойтись стандартным способом добавления элементов в тулбар: при помощи Menu (помимо примера ниже также можете ознакомиться с данным уроком).
Скачивание png иконки
Наша задача – обеспечить приложение иконками для разных разрешений. Подробнее об этом можно почитать в официальной документации.
Т.е. мы скопировали несколько иконок для разных размеров экранов.
Создание menu
Нажимаем OK и видим, что папка создалась.
Давайте добавим в метод использование user_info_menu :
Отлично, дело за малым: выполнить необходимое нам действие по клику на кнопку – перейти на экран для поиска пользователей:
Запустим приложение и посмотрим на результат:
В результате данного урока мы узнали:
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.
Реализация сложного тулбара на Android
При реализации сложного элемента интерфейса важно уметь схитрить и помнить о том, что в будущем ваш код может измениться, считает разработчик Юхани Лехтимяки, который рассказал о своем опыте создания необычной панели в приложении Social Steps.
В этой статье мы объясним, как и почему мы сделали свою toolbar-панель в приложении Social Steps.
Дизайн
Добавив прекрасных деталей в пользовательский интерфейс, вы можете сильно выделиться среди конкурентов (учитывая, что вся важная функциональность уже сделана, а сам интерфейс хорошо спроектирован). Toolbar – это игровая площадка Android. Мы решили использовать веселые, но значимые анимации и изменения состояния.
Реализация
UI-фреймворк Android удивительно мощен и гибок. Если вы уделите время, чтобы поучиться тому, что вы можете сделать с его помощью, вы получите очень сильный инструмент в свой арсенал. Лично я считаю, что нативный UI Android является самым сильным доступным инструментом прототипирования. Почти все идеи вашего дизайнера можно воплотить за несколько часов (или хотя бы создать приблизительный набросок функции).
Эта гибкость позволяет создавать масштабируемые и готовые к использованию функций. В приложении Social Steps панель инструментов была очевидным местом для продвижения бренда и создания привлекательных для пользователя аспектов приложения.
Для сохранения масштабируемости на экранах Android часто используются прокручивающиеся контейнеры. Поэтому Google представили специальные компоненты для того, чтобы добавлять интересное поведение в панель инстументов Android: AppBarLayout и CollapsingToolbarLayout.
С помощью этих компонентов и некоторых кастомных наработок мы можем сделать волшебный дизайн Toolbar-панели.
Отслеживание скроллинга
Этот инструмент вы можете использовать для того, чтобы управлять событиями, когда пользователь пролистывает ваш главный элемент (сжимает toolbar).
Этот код находится у меня в главном Activity, но он работает и в Fragment, если в нем определена ваша панель.
У этого кода очень простая задача – вычислять текущее состояние прокручивающегося контейнера в процентах. Код просто вычисляет этот процент и отправляет это число в кастомный View (смотрите ниже). Также этот код управляет поднятием toolbar, когда он весь оказывается сжатым.
Layout прост (этот можно ещё оптимизировать). Мой кастомный ToolbarArcBackground делает здесь всю сложную работу. Остальное – стандартный код. NonClickableToolbar нужен здесь для сворачивания toolbar-панели.
Реализация арки
Вся магия происходит в ToolbarArcBackground. Это довольно простой подкласс Android View. Так как у нас есть компонент, вычисляющий масштаб, нам нужно только понять, как получить то, что мы хотим.
Я экспериментировал с несколькими разными подходами. Первый из них – использование Path, чтобы обрезать нижнюю часть макета. К сожалению, в таком случае край получался неровным.
Как и во многих случаях, самым лучшим способом оказался самым простой… то есть, обман. Я воспользовался тем фактом, что фон главного экрана был однотонным. Самым простым способом оказалось нарисовать белый эллипс поверх всего контента toolbar. Чтобы избежать слишком острых концов, я нарисовал эллипс немного за пределами экрана слева и справа.
Метод setScale кастомного View хранит текущее значение и аннулирует контент.
OnDraw затем просто рисует подходящий эллипс внизу.
Когда значение достигает нуля, а пользователь долистывает до точки перехода, в которой край toolbar становится прямым, эллипс полностью исчезает.
Перемещение облаков при скроллинге
Облака – это простые bitmap-изображения с зафиксированной начальной локацией (хотя я не удивлюсь, если в будущем они будут двигаться в зависимости от текущего направления ветра ;)). Чтобы облака уходили за пределы панели при её сжатии, я просто вычислил позицию, на которую они должны переместиться в этот момент, а всё остальное – это простое умножение с использованием scale.
Реализация изменения времени суток
В первой версии время суток просто зависит от времени (соответствие действительному положению солнца потребовало бы доступа к местоположению пользователя, а это разрешение мы пока не готовы просить). И, конечно, хотя в прикрепленных видео эта функция анимирована, в выпущенной версии приложения она статична.
Чтобы все надежно работало, я добавил ещё один scale в компонент View панели, timeScale. Это число от 0 до 1, которое сообщает View, как далеко от левого края находятся солнце или луна. isNight определяет, какую цветовую палитру и какое небесное тело нужно использовать.
Цвет toolbar создан из нескольких предопределенных цветов, интерполирован при помощи ArgbEvaluator.evaluate() и помещен в качестве фона с использованием шейдера градиента. Чтобы улучшить цвет, мы добавили интерполятор в timeScale перед вычислением цвета. Он добавляет эффект рассвета и заката в ранние и поздние часы, более точно воспроизводя реальное освещение.
Для вечернего освещения мы добавили одно ручное значение (0,75f), так как интерполированный цвет между днем и вечером выглядел плохо. Чтобы убедиться, что toolbar всегда возвращается к цвету бренда при сжатии, второй цвет градиента также интерполируется к цвету бренда при определенном положении при скроллинге.
Сохраняйте масштабируемость
Так называемая фрагментация Android вызывает проблемы только у людей, не разрабатывающих под Android. Android-разработчики знают, как справляться с экранами разного размера. Вместе со опытными дизайнерами мы можем справиться с разными ориентациями экрана устройств и работой приложения на планшетах или Chromebook.
При создании анимации или градиентов всегда помните о масштабируемости с самого начала. Добавить её потом будет сложнее. Это просто. Вместо того, чтобы использовать фиксированные точки для градиентов, рисуйте их при помощи кода. Вместо того, чтобы думать о ширине экрана, используйте значения, которые предоставляет система Android. При возможности используйте значения в процентах, а если нужны абсолютные значения, помните про DiP.
Вот и все. Как вы видите, в нашем случае приложение не зафиксировано в одной ориентации экрана и мы не запрещаем установку на планшеты.
Заключение
Часто создание сложно выглядящих дизайнов заключается в нахождении простого и хитрого способа и разделении проблемы на небольшие части. В этом случае использование овала вместо того, чтобы пытаться вырезать дыру в toolbar, экономит много сил и времени.
Упрощение зависимости размера тулбара от времени и скроллинга до простых диапазонов от 0 до 1 позволило мне сконцентрироваться на реализации в этом ограниченном пространстве проблемы без необходимости переживать о внешних факторах. На самом деле, в приложении день и ночь не обладают одинаковой длительностью, как и должно быть. Реальное время не соотносится с переменной времени идеально. Позже мы сможем без проблем связать настоящее положение солнца с существующим кодом.
Русские Блоги
Android ToolBar использует полное разрешение
До API 21 мы использовали строку заголовка в основном в ActionBarActivity Activity, и После API 21 Google отказался от ActionBarActivity и рекомендовал AppCompatActivity.
1. Введение в панель инструментов
Основное использование 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:
2. Добавить событие клика
С помощью меню нам нужно добавить событие щелчка в меню, чтобы меню имело практическое применение. Также очень удобно добавить событие щелчка. Вы можете сделать это:
Атрибут «android: textColorSecondary» соответствует цвету трех точек в правом верхнем углу. После изменения он станет тем цветом, который вы хотите.
4. Другие модификации стиля
Изменить стиль всплывающего меню панели инструментов
Сначала мы нажимаем на три точки в верхнем правом углу, всплывающее меню, как показано ниже:
Можно видеть, что родительский объект этой темы напрямую унаследован от ThemeOverlay.AppCompat.Dark, который является темой пакета поддержки, и мы объявили свойство «android: colorBackground» внутри. Мы можем изменять цвет фона меню, пока мы меняем это свойство. а. Далее мы представляем эту тему в файле макета, который также очень прост. Добавьте дополнительные свойства на панель инструментов следующим образом:
Таким образом, цвет фона всплывающего меню можно изменить, изменив несколько строк кода, как показано ниже:
Изменить позицию всплывающего меню всплывающего меню панели инструментов
Мы видим, что позиция всплывающего меню слишком высока. Мы также можем изменить его положение так, чтобы оно находилось под панелью инструментов, что может выглядеть более красиво:
Измените файл styles.xml следующим образом:
Эффект заключается в следующем:
До сих пор были описаны соответствующие мнения об использовании панели инструментов. Видно, что панель инструментов обладает высокой гибкостью и может настраивать многие стили. Обычно мы разрабатываем разные стили, поэтому панель инструментов используется для замены панели действий. Очень подходит. Если в будущем появятся другие стили, я поделюсь ими, спасибо.
Во-вторых, добавить значки в меню панели инструментов
Чтобы реализовать новый интерфейс для дизайна продукта сегодня, вам нужно использовать элемент управления панели инструментов, поэтому вы начнете с ножа и сразу же напишите его:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
Используется в Activity: Activity требует расширения AppCompatActivity для переопределения метода onCreateOptionsMenu для загрузки макета меню
По умолчанию цвета шрифта заголовка и меню, а также другие значки меню являются черными. И меню покрывает панель инструментов, поэтому никакое меню не должно быть таким в текущем приложении. Потому что опыт действительно плохой. Как это изменить. Общее приложение выглядит так:
Стиль меню, установите цвет фона и запретите меню покрывать панель инструментов:
Цвет фона и проблемы покрытия были изменены. Но цвет шрифта панели инструментов и цвет значка, а также цвет шрифта меню слишком уродлив, продолжайте изменять: добавьте 2 строки кода в ToolbarPopupTheme, и вы можете сделать это:
Но значок в меню не может отображаться, решение:
Но шрифт белый и должен быть изменен на синий:
Я написал панель инструментов в интерфейсе фрагмента таким же образом, в Fragment нет метода setSupportActionBar (панель инструментов oolbar).
Подключаем 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.