Как сделать тулбар
Добавил пользователь Валентин П. Обновлено: 04.10.2024
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.
Обновление fragment из другого fragment
Добрый вечер всем!! Подскажите пожалуйста как обновить один фрагмент из другого (а именно TextView.
Создание Toolbar' а
Необходимо создать Toolbar с 3-я кнопками, по нажатию которых будут вызваны диалоги: a) открытие.
Создание Toolbar
Привет! Столкнулся с проблемой, нужно сделать Toolbar ( как VS Windows Form или QT creator).
Создание Toolbar
Нужно из имеющего изображения кнопок создать панель инструментов. Делаю все, как описано на MSDN.
Плагины
Тулбар поддерживает соединение с более 80 сервисами, среди которых такие монстры, как Google, Twitter, Facebook, FriendFeed, Yahoo, MySpace. C помощью этого инструмента можно одним кликом отсылать ссылки на ваши посты через почту Gmail, Hotmail, Yahoo, AOL. Согласитесь,что пользователям удобно никуда не заходить, а просто кликнуть по кнопке в блоге.
Тулбар отображается внизу блога, не мешая навигации. Оформление тулбара можно менять, его можно вообще скрывать с глаз долой.
Можно, конечно, зайти на оригинальный сайт тулбара, сгенерировать его, а потом вручную вставить код в тему, но куда легче это сделать с помощью плагина.
При реализации сложного элемента интерфейса важно уметь схитрить и помнить о том, что в будущем ваш код может измениться, считает разработчик Юхани Лехтимяки, который рассказал о своем опыте создания необычной панели в приложении Social Steps.
В этой статье мы объясним, как и почему мы сделали свою toolbar-панель в приложении Social Steps.
Дизайн
Добавив прекрасных деталей в пользовательский интерфейс, вы можете сильно выделиться среди конкурентов (учитывая, что вся важная функциональность уже сделана, а сам интерфейс хорошо спроектирован). Toolbar – это игровая площадка Android. Мы решили использовать веселые, но значимые анимации и изменения состояния.
Реализация
UI-фреймворк Android удивительно мощен и гибок. Если вы уделите время, чтобы поучиться тому, что вы можете сделать с его помощью, вы получите очень сильный инструмент в свой арсенал. Лично я считаю, что нативный UI Android является самым сильным доступным инструментом прототипирования. Почти все идеи вашего дизайнера можно воплотить за несколько часов (или хотя бы создать приблизительный набросок функции).
Эта гибкость позволяет создавать масштабируемые и готовые к использованию функций. В приложении Social Steps панель инструментов была очевидным местом для продвижения бренда и создания привлекательных для пользователя аспектов приложения.
Для сохранения масштабируемости на экранах Android часто используются прокручивающиеся контейнеры. Поэтому Google представили специальные компоненты для того, чтобы добавлять интересное поведение в панель инстументов Android: AppBarLayout и CollapsingToolbarLayout.
С помощью этих компонентов и некоторых кастомных наработок мы можем сделать волшебный дизайн Toolbar-панели.
Отслеживание скроллинга
AppBarLayout.OnOffsetChangedListener
Этот инструмент вы можете использовать для того, чтобы управлять событиями, когда пользователь пролистывает ваш главный элемент (сжимает 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. При возможности используйте значения в процентах, а если нужны абсолютные значения, помните про DiP.
Вот и все. Как вы видите, в нашем случае приложение не зафиксировано в одной ориентации экрана и мы не запрещаем установку на планшеты.
Заключение
Часто создание сложно выглядящих дизайнов заключается в нахождении простого и хитрого способа и разделении проблемы на небольшие части. В этом случае использование овала вместо того, чтобы пытаться вырезать дыру в toolbar, экономит много сил и времени.
Упрощение зависимости размера тулбара от времени и скроллинга до простых диапазонов от 0 до 1 позволило мне сконцентрироваться на реализации в этом ограниченном пространстве проблемы без необходимости переживать о внешних факторах. На самом деле, в приложении день и ночь не обладают одинаковой длительностью, как и должно быть. Реальное время не соотносится с переменной времени идеально. Позже мы сможем без проблем связать настоящее положение солнца с существующим кодом.
Читайте также: