Русские Блоги
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).
Как декларативно описать коллапсирующий тулбар
Хочу представить решение того, как можно описать CollapsingToolbar, с акцентом на читаемости кода. В статье не будет объясняться, что такое и как написать свой CoordinatorLayout.Behavior. Если читателю интересно в этом разобраться, есть много статей, в том числе на хабре. Если разбираться не хочется — ничего страшного: я постарался вынести написание CollapsingToolbar так, чтобы можно было абстрагироваться от CoordinatorLayout.Behavior и OnOffsetChangedListener.
Термины
Зачем понадобилось писать свое решение
Я просмотрел несколько подходов в «интернетах», и практически все были построены следующим образом:
Поправить верстку для этого решения можно, но меня смущает другое. Некоторые вью управляются через OnOffsetChangedListener, некоторые — через Behavior, что-то работает из коробки. Разработчику, чтобы понять всю картину, придется пробежаться по множеству классов, и если для новой вью придется добавить поведение, которое зависит от других Behavior-ов и от вью, которые изменяются в OnOffsetChangedListener, могут вырасти костыли и баги на ровном месте
Кроме того, в данном примере не показано, как быть, если в тулбар будут добавляться дополнительные элементы, которые влияют на высоту этого тулабара.
В гифке в начале статьи видно, как по нажатию на кнопку скрывается TextView — и NestedScroll подтягивается выше, чтобы не возникало пустого пространства).
Как это сделать? Решения, которые первыми приходят на ум, — написать еще один CoordinatorLayout.Behavior для NestedScroll (сохранив логику базового AppBarLayout.Behavior) или засунуть тулбар в AppBarLayout и менять его на OnOffsetChangedListener. Я пробовал оба решения, и получался завязанный на детали реализации код, с которым довольно сложно будет разобраться кому-то другому и нельзя будет переиспользовать.
Буду рад, если кто-то поделится примером, где такая логика реализована «чисто», а пока покажу свое решение. Идея в том, чтобы иметь возможность декларативно описать в одном месте, какие вьюхи и как должны себя вести.
Как выглядит апи
Итак, для создания CoordinatorLayout.Behavior нужно:
Как это работает
Задача сводится к написанию правил:
Тут все ясно — приходит float-значение от 0 до 1, отражающее процент проскролла ActionBar, приходит вью и ее первоначальный стейт. Интереснее выглядит BaseBehaviorRule — правило, от которого наследуются другие базовые правила.
Для базовых правил определяется размах значений (min, max) и interpolator. Этого хватит для того, чтобы описать практически любое поведение.
Допустим, мы хотим задать альфу для нашего вью в диапазоне 0.5 до 0.9. Также мы хотим, чтобы вначале скролла вью быстро становилась прозрачной, а затем скорость изменений падала.
Правило будет выглядеть так:
А вот реализация BRuleAlpha:
И, наконец, код BehaviorByRules. Для тех, кто писал свой Behavior, все должно быть очевидно (кроме того, что внутри onMeasureChild, об этом расскажу ниже):
Так что там с onMeasureChild?
Это нужно для решения проблемы, о которой писал выше: если какая-то часть тулбара исчезает, NestedScroll должен подъехать выше. Чтобы он подъехал выше, нужно уменьшить высоту CollapsingToolbarLayout.
Есть еще один неочевидный метод — canUpdateHeight. Он нужен, чтобы можно было разрешить наследнику задать правило, когда нельзя менять высоту. Например, если view, от которого зависит высота, в данный момент скрыта. Не уверен, что это покроет все кейсы, но если у кого есть идеи, как сделать лучше, — отпишите, пожалуйста, в комментарии или в личку.
Using the App Toolbar
Toolbar was introduced in Android Lollipop, API 21 release and is the spiritual successor of the ActionBar. It’s a ViewGroup that can be placed anywhere in your XML layouts. Toolbar’s appearance and behavior can be more easily customized than the ActionBar.
Toolbar works well with apps targeted to API 21 and above. However, Android has updated the AppCompat support libraries so the Toolbar can be used on lower Android OS devices as well. In AppCompat, Toolbar is implemented in the androidx.appcompat.widget.Toolbar class.ura
There are two ways to use Toolbar:
The Toolbar is a generalization of the ActionBar system. The key differences that distinguish the Toolbar from the ActionBar include:
Keep in mind that you can also configure any Toolbar as an Activity’s ActionBar, meaning that your standard options menu actions will be display within.
To use Toolbar as an ActionBar, first ensure the AndroidX support library is added to your application build.gradle (Module:app) file:
Second, let’s disable the theme-provided ActionBar. The easiest way is to have your theme extend from Theme.AppCompat.NoActionBar (or the light variant) within the res/values/styles.xml file:
Now you need to add a Toolbar to your Activity layout file. One of the biggest advantages of using the Toolbar widget is that you can place the view anywhere within your layout. Below we place the toolbar at the top of a LinearLayout like the standard ActionBar:
Note: You’ll want to add android:fitsSystemWindows=»true» (learn more) to the parent layout of the Toolbar to ensure that the height of the activity is calculated correctly.
Next, in your Activity or Fragment, set the Toolbar to act as the ActionBar by calling the setSupportActionBar(Toolbar) method:
Next, we need to make sure we have the action items listed within a menu resource file such as res/menu/menu_main.xml which is inflated above in onCreateOptionsMenu :
For more details about action items in the Toolbar including how to setup click handling, refer to our ActionBar guide. The above code results in the toolbar fully replacing the ActionBar at the top:
From this point on, all menu items are displayed in your Toolbar, populated via the standard options menu callbacks.
In many apps, the same toolbar can be used across multiple activities or in alternative layout resources for the same activity. In order to easily reuse the toolbar, we can leverage the layout include tag as follows. First, define your toolbar in a layout file in res/layout/toolbar_main.xml :
Next, we can use the tag to load the toolbar into our activity layout XML:
and then access the Toolbar by the include id instead:
This allows us to create a consistent navigation experience across activities or configuration changes.
Now, we need to create the custom styles in res/values/styles.xml with:
Next, we need to remove the left inset margin that pushes the icon over too far to the left by adding app:contentInsetStart to the Toolbar :
With that the icon should properly display within the Toolbar as expected.
A Toolbar is just a decorated ViewGroup and as a result, the title contained within can be completely customized by embedding a view within the Toolbar such as:
This means that you can style the TextView like any other. You can access the TextView inside your activity with:
In certain cases, the status bar should be translucent such as:
To achieve this, first set these properties in your res/values/styles.xml within the main theme:
The activity or root layout that will have a transparent status bar needs have the fitsSystemWindows property set in the layout XML:
You should be all set. Refer to this stackoverflow post for more details.
If you want the status bar to be entirely transparent for KitKat and above, the easiest approach is to:
and then add this style to your res/values/styles.xml within the main theme:
You should be all set. Refer to this stackoverflow post for more details.
We can configure the Toolbar to react and change as the page scrolls:
For example, we can have the toolbar hide when the user scrolls down on a list or expand as the user scrolls to the header. There are many effects that can be configured by using the CoordinatorLayout. First, we need to make sure we add the jetpack libraries to our app/build.gradle file:
Of course, the RecyclerView could also be replaced with a FrameLayout which could then allow for fragments to be loaded instead:
This type of layout results in the following:
Refer to the guide on CoordinatorLayout and AppBarLayout for additional explanation and specifics. For troubleshooting, refer to this troubleshooting guide.
The proper way of reacting to simple scroll behavior is leveraging the CoordinatorLayout built into the Design Support Library as shown in the previous section. However, there are a few other relevant resources around reacting to scrolling events with a more manual approach:
With these methods, your app can replicate any scrolling behaviors seen in common apps with varying levels of difficulty not captured with the method shown above.
Урок 13. Работа с Toolbar и menu на примере UserInfoActivity
Знакомство с элементом Toolbar
На главном экране приложения с детальной информацией о пользователе нам необходимо создать такой toolbar :
Здесь у нас находится только один элемент: кнопка поиска, которая должна перенаправлять нас на экран для поиска других пользователей.
Поэтому сперва нам необходимо позаботиться о том, чтобы наши экраны не содержали элемент ActionBar по умолчанию. Для этого нам нужно унаследовать главный стиль приложения (находится в файле styles.xml ) от необходимого нам Theme.AppCompat.Light.NoActionBar :
Атрибуты элемента Toolbar
Остановимся на некоторых атрибутах:
Давайте запустим приложение и посмотрим, что получилось:
Запустим приложение, посмотрим, что получилось:
Отлично, двигаемся дальше.
Осталось наполнить наш toolbar содержимым. Т.к. нашему тулбару необходима всего одна кнопка поиска, то мы можем обойтись стандартным способом добавления элементов в тулбар: при помощи Menu (помимо примера ниже также можете ознакомиться с данным уроком).
Скачивание png иконки
Наша задача – обеспечить приложение иконками для разных разрешений. Подробнее об этом можно почитать в официальной документации.
Т.е. мы скопировали несколько иконок для разных размеров экранов.
Создание menu
Нажимаем OK и видим, что папка создалась.
Давайте добавим в метод использование user_info_menu :
Отлично, дело за малым: выполнить необходимое нам действие по клику на кнопку – перейти на экран для поиска пользователей:
Запустим приложение и посмотрим на результат:
В результате данного урока мы узнали:
Подключаем 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.