- Material Design. Динамический Toolbar на живом примере
- Начнём с постановки задачи
- Создаём xml файлы конфигураций
- Как программно получить высоту и ширину панели навигации Android?
- Урок 13. Работа с Toolbar и menu на примере UserInfoActivity
- Знакомство с элементом Toolbar
- Атрибуты элемента Toolbar
- Скачивание png иконки
- Создание 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.
И наконец создадим файл со списком всех элементов нашего Toolbar-а. Тут у нас есть несколько вариантов:
- В начале создать только те элементы, которые будут видны в стандартном режиме, а затем в коде добавлять или удалять элементы при переходе между режимами.
- Сразу создать все существующие элементы в xml файле, а в коде просто управлять их видимостью.
Я выбрал второй вариант так как у нас не так много элементов внутри Toolbar и нам нет смысла экономить память храня в ней только видимые элементы.
Также существует два способа создания элементов Toolbar:
- Создавать элементы внутри меню (Menu), как экземпляры класса MenuItem. Этот способ использовался в предыдущих версиях Анрдроид (API Level
Источник
Как программно получить высоту и ширину панели навигации Android?
Черная панель навигации в нижней части экрана не снимается в Android. Он был частью Android с версии 3.0 в качестве замены аппаратных кнопок. Вот картинка:
Как я могу получить размер ширины и высоты этого элемента пользовательского интерфейса в пикселях?
Попробуйте код ниже:
Я получаю размер панели навигации, сравнивая размер экрана, доступный для приложения, с реальным размером экрана. Я предполагаю, что панель навигации присутствует, когда размер экрана, доступного для использования приложением, меньше реального размера экрана. Затем я рассчитываю размер панели навигации. Этот метод работает с API 14 и выше.
ОБНОВИТЬ
Чтобы узнать о решении, в котором учитываются вырезы на экране, проверьте ответ Джона .
Высота NavigationBar варьируется для некоторых устройств, но также и для некоторых ориентаций. Сначала вы должны проверить, есть ли на устройстве панель навигации, затем, если устройство является планшетом или не планшетом (телефоном), и, наконец, вам нужно посмотреть на ориентацию устройства, чтобы получить правильную высоту.
На самом деле панель навигации на планшетах (по крайней мере, Nexus 7) имеет разный размер в портретной и альбомной ориентации, поэтому эта функция должна выглядеть так:
Я думаю, что лучший ответ здесь, потому что он позволяет также получить даже высоту выреза.
Возьмите свое корневое представление и добавьте setOnApplyWindowInsetsListener (или вы можете переопределить onApplyWindowInsets из него) и возьмите из него файл insert.getSystemWindowInsets.
В своей работе с камерой я добавляю отступ, равный systemWindowInsetBottom, в мой нижний макет. И, наконец, исправлена проблема с вырезом.
с appcompat это так
без appcompat это:
Я надеюсь, это поможет вам
Это мой код для добавления paddingRight и paddingBottom в представление, чтобы избежать панели навигации. Я объединил здесь некоторые ответы и сделал специальное предложение для альбомной ориентации вместе с isInMultiWindowMode. Ключ должен прочитать navigation_bar_height , но также проверить config_showNavigationBar чтобы убедиться, что мы действительно должны использовать высоту.
Ни одно из предыдущих решений у меня не помогло. Начиная с Android 7.0 вы должны учитывать многооконный режим. Это нарушает реализацию сравнения display.realSize с display.size, поскольку realSize дает вам размеры всего экрана (оба разделенных окна), а size дает вам только размеры вашего окна приложения. Установка отступов на эту разницу оставит все ваше представление как отступы.
Высота нижней панели навигации составляет 48 точек на дюйм (как в портретном, так и в альбомном режиме) и 42 точек на дюйм, когда панель расположена вертикально.
Решение, предложенное Egidijus, отлично работает для Build.VERSION.SDK_INT> = 17
Но я получил «NoSuchMethodException» во время выполнения следующего оператора с Build.VERSION.SDK_INT — Chebyr
источник
Я решил эту проблему для всех устройств (включая Nexus 5, Samsung Galaxy Nexus 6 edge +, Samsung S10, Samsung Note II и т. Д.). Я думаю, это поможет вам решить проблемы, связанные с устройством.
Здесь я добавляю два типа кодов,
Код Java (для собственного Android):
И код C # (для Xamarin Forms / Android)
Объединяя ответ от @egis и других — это хорошо работает на различных устройствах, протестировано на Pixel EMU, Samsung S6, Sony Z3, Nexus 4. Этот код использует размеры дисплея для проверки доступности панели навигации, а затем использует фактическую размер панели навигации системы, если она есть.
Как получить высоту панели навигации и строки состояния. Этот код работает у меня на некоторых устройствах Huawei и устройствах Samsung . Приведенное выше решение Egis хорошее, однако на некоторых устройствах оно все еще неверно. Итак, я улучшил его.
Это код для получения высоты строки состояния
Этот метод всегда возвращает высоту панели навигации, даже если панель навигации скрыта.
ПРИМЕЧАНИЕ: на Samsung A70 этот метод возвращает высоту строки состояния + высоту панели навигации. На других устройствах (Huawei) он возвращает только высоту панели навигации и возвращает 0, если панель навигации скрыта.
Это код для получения высоты панели навигации и строки состояния
Я сделал это, он работает на всех устройствах, которые я тестировал, и даже на эмуляторах:
Вот как я это решил. Я сделал скрываемую нижнюю панель, которая требовала заполнения в зависимости от того, была ли панель навигации или нет (емкостная, экранная или просто леденец).
Посмотреть
Utils.java
В моем случае, когда я хотел иметь что-то вроде этого:
Я должен был следовать тому же правилу, что и @Mdlc, но, вероятно, немного проще (таргетинг только > = 21):
Он работает и с пейзажем:
Изменить . Вышеупомянутое решение не работает правильно в многооконном режиме, где используемый прямоугольник меньше не только из-за панели навигации, но и из-за настраиваемого размера окна. Одна вещь, которую я заметил, заключается в том, что в многооконном режиме панель навигации не нависает над приложением, поэтому даже без изменений в заполнении DecorView мы имеем правильное поведение:
Источник
Урок 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 пользовательскими элементами.
Источник