Custom Quick Settings позволяет изменить панель быстрых настроек Android по своему вкусу

До появления Honeycomb (Android 3.0) все Android устройства имели кнопку "меню" под экраном. Разработчики могли использовать ее по своему усмотрению, интерфейсы многих приложений были выстроены именно вокруг этой кнопки. В ориентированном на планшеты Honeycomb был сделан шаг в сторону отказа от механических (и сенсорных) кнопок, в связи с этим, в третьей версии Android появился класс ActionBar, который позволял дать пользователю быстрый доступ к настройкам приложения через специальную панель, называемую action bar. По мнению разработчиков Google будущее за Action Bar-ом и программисты должны отказаться от использования кнопки "меню". В настоящее время на рынке доминируют смартфоны с механической или сенсорной кнопкой под экраном, но с появлением Ice Cream Sandwich ситуация может резко измениться. Вам, как разработчику, важно заранее подготовиться к появлению таких устройств, и использовать концепцию Action bar уже сегодня.

На первый взгляд может показаться, что использование Action Bar-а вызовет проблемы при разработке программ для Android 2.x, в котором эта панель еще не была реализована. Однако здесь нет проблемы. Никто не запрещает Вам продолжать использовать кнопку "меню" на тех устройствах, где она присутствует, добавление же Action Bar-а потребует от вас написания всего нескольких строк кода.

Если бы я попытался сжать эту статью в одно предложение, оно бы звучало так: "Установите targetSdkVersion в 14, и пометьте тегом showAsAction="ifRoom" элементы меню, которые должны быть вынесены на Action Bar ".

Окончательный отказ от меню настроек в Android

Недостаточно просто отказаться от использования кнопки "меню", нужно полностью выкинуть эту концепцию из своей головы. Не создавайте меню, создайте все необходимые кнопки непосредственно внутри деятельностей (activity). Если какие-то действия не помещаются на панель, вынесите их в дополнительное выпадающее меню (action overflow). На приведенной картинке показан action bar с кнопкой для поиска и дополнительное меню с правой стороны панели.

Если Ваше приложение создано под старую версию андроида (в которой традиционно используется меню), то при запуске на Android 3 планшете в нижней части экрана будет отображаться панель, эмулирующая три кнопки, существующие на телефонах второй ветки.

Терминология довольно запутанная, но выпадающее меню (action overflow) предполагает абсолютно другую концепцию использования, нежели простое меню настроек. Вместо того, чтобы рассматривать меню как вместилище всех настроек приложения, вы создаете панель, на которую помещаете основные настройки. Все второстепенное выносится в выпадающее меню, которое вызывается при нажатии кнопки с тремя точками (Action overflow button) в правой стороны панели.

Action overflow button

Если Вы запускали приложения, написанные для Android 2.3 и ниже на устройствах без кнопок под экраном (например, на планшете с Honeycomb или на Galaxy Nexus), Вы наверно заметили, что рядом с изображением трех кнопок на панели внизу появляется и Action overflow кнопка (три точки друг над другом). Это некий компромисса, однако, не очень удачный. В приложениях, которые вообще не используется меню настроек эта кнопка ничего не делает, раздражая пользователей. Поэтому, весьма неплохим решением было бы следить за версией Android-а, и если Ваша программа запускается под Android 3.0+, убирать эту кнопку с навигационной панели и использовать Action Bar. Такой подход позволяет сохранить совместимость программы со старыми аппаратами и сделать ее более привлекательной для новых.

Если ваша программа запущена на устройствах без кнопок, система решает, нужно ли добавить action overflow на навигационную панель в зависимости от значения поля в манифесте. Логика следующая

  • Если Вы установили в minSdkVersion или targetSdkVersion значение больше 11, то система не добавляет эту кнопку.
  • С другой стороны, система создает эту кнопку, когда Вы запускаете приложение на Android 3.0 и выше.
  • Единственное исключение: когда Вы установите minSdkVersion в 10 или ниже; targetSdkVersion в 11, 12 или 13, и не будете использовать ActionBar, система добавит эту кнопку на телефонах (не планшетах) под управлением Android 4.0 и выше. В основе этого исключения лежит следующая идея: если Вы разрабатываете приложение одновременно для телефонов второй ветки и для планшетов третьей, то Вы предполагаете, что у телефонов должна быть кнопка меню, а у планшетов ее нет.

Таким образом, если вы хотите запретить overflow action кнопку в панели навигации, Вам нужно установить targetSdkVersion в 14 (В minSdkVersion можно записать более низкое значение, чтобы программа могла запускаться на старых устройствах).

Переход к концепции action bar-а

Если у Вас есть деятельности, которые используют меню настроек (созданное с помощью onCreateOptionsMenu()), то убрав кнопку с навигационной панели (установив targetSdkVersion=14) Вы должны предоставить пользователю альтернативное средство доступа к настройкам. К счастью, от Вас не потребуется много работы, поскольку в системе автоматически создается action bar.

Добавьте showAsAction="ifRoom" в теги элементов, которые вы хотите поместить в action bar. Если вы не уверены, какой из элементов стоит включать в Action Bar, обратитесь кAndroid Design’s Action Bar guide .

Чтобы сделать восприятие вашей программы более целостным, рекомендуем Вам использовать в качестве иконок для Action bar-а иконки отAndroid UX Team . Архив .

Как удалить Action Bar из Android приложения

Если Вам не нужен Action bar, Вы можете удалить его из любой деятельности, либо вообще из приложения. Это может быть актуально для игр и программ, не использующих меню настроек. Вы можете удалить action bar, используя тему Theme.Holo.NoActionBar или Theme.DeviceDefault.NoActionBar.

Если вы хотите использовать эти схемы, но сохранить обратную совместимость, можете использовать систему управления ресурсами, чтобы установить разные темы для разных версий платформ. Более подробно эта тема раскрыта здесь. Вам понадобится создать собственную тему, которая будет наследовать темы различных платформ в зависимости от текущей версии.

Например, Вы можете объявить тему для своего приложения

(или для конкретной деятельности в теге ).

Для устройств, работающих на Android 2, включите следующую тему в res/values/themes.xml.



Для Honeycomb включите следующую тему в res/values-v11/themes.xml.



При запуске в зависимости от версии API система выберет подходящую тему.

Заключение

Повторим тезисно ключевые идеи и моменты статьи:

  • На новых Android устройствах может отсутствовать кнопка "menu", поэтому при разработке программ лучше вообще отказаться от ее использования.
  • Установите targetSdkVersion = 14 и протестируйте свое приложение на Android 4.0.
  • Добавьте тег showAsAction="ifRoom" в элемент меню, если хотите, чтобы он автоматически попал на панель action bar.
  • Если в Вашем приложении не используется ActionBar, Вы можете убрать его, воспользовавшись темами Theme.Holo.NoActionBar и Theme.DeviceDefault.NoActionBar.

Главное меню - один из основных инструментов для взаимодействия пользователя с приложением. В Android 2.3.x и раньше оно было «спрятано» на аппаратной кнопке Menu, и разработчики рисовали меню кто как умел. Но начиная с Android 3.0 недоработка была исправлена, меню стало стандартным компонентом на Action Bar, и получило ряд новых возможностей. При этом процесс разработки меню практически не претерпел изменений. Меню в Android - это не просто набор кнопок, на которые можно вешать OnClickListener . В Android с меню можно сделать куда больше, чем кажется на первый взгляд.

В этой статье я расскажу, как сделать современное меню, как адаптировать его для разных размеров экрана, как делать переключатели типа radio button прямо в меню, а также как динамически управлять видимостью кнопок меню, скрывая те функции вашего приложения, которые не будут работать на том или ином смартфоне. По ходу статьи постараюсь дать максимально подробное описание тех или иных возможностей меню, а также дам ссылки на официальную документацию по теме.



Вот так по-разному может выглядеть меню одного и того же приложения.

Наша первая кнопка в меню

Меню в Android описываются в файлах ресурсов или формируются программным кодом. Рекомендуется первый вариант по целому ряду причин: скорость разработки, наглядность, простота сопровождения. Ресурсы меню располагаются в подкаталоге menu каталога ресурсов приложения res . Создаем каталог menu , затем создаем новый Android XML File:


Выбираем тип ресурса Menu , вводим имя файла. Так как в разных activity меню, скорее всего, будет разным, рекомендую привязывать имена файлов ресурсов меню к именам activity.

В открывшемся редакторе введем код первой кнопки нашего меню:

Давайте рассмотрим использованные атрибуты:

  • android:id указываем, чтобы потом в коде отличать одни кнопки от других.
  • android:orderInCategory указывает порядок нашей кнопки относительно других. Указывайте порядок с шагом в 10 или 100, это позволит в будущем добавлять новые элементы в любое место, не перестраивая порядок остальных.
  • android:showAsAction - самый интересный параметр, поскольку именно он управляет поведением элементов меню в разных ситуациях. Он может принимать целый ряд значений:
    • ifRoom - Показывать элемент в action bar, только если для него достаточно места. Если места недостаточно, элемент будет автоматически скрыт в дополнительное меню (то, которое показано тремя точками друг над другом). Это лучший способ кастомизации меню в зависимости от размера экрана устройства. На больших экранах планшетов action bar будет заполнен кнопками, а на небольших телефонах будут показаны самые важные кнопки, в то время как до остальных тоже можно добраться, но только через дополнительное меню. Имейте в виду, что дополнительное меню отображается в action bar только на тех смартфонах, на которых нет аппаратной кнопки меню.
    • withText - Рядом с иконкой кнопки будет показан текст, заданный свойством android:title . Этот параметр можно указывать в комбинации с другими, разделяя параметры знаком |
    • never - Кнопка никогда не будет видна на action bar, даже если для нее есть место. К такой кнопке всегда придется добираться через дополнительное меню.
    • always - Всегда показывать кнопку в action bar. Данным параметром нельзя злоупотреблять, так как на маленьких телефонах кнопки могут начать заползать на другие элементы action bar, например на заголовок приложения. Определите для каждой activity максимум одну самую важную кнопку, без которой никак нельзя, и отметьте always только у нее. Остальные (а по возможности все) должны быть ifRoom .
    • collapseActionView - позволяет сделать кнопку, открывающую или скрывающую дополнительный элемент View в action bar. Например, можно задать такой параметр иконке поиска, по ее клику показывать прямо в action bar поле для ввода поискового запроса.
  • android:title - определяет заголовок кнопки меню. Он может отображаться рядом с иконкой в action bar или же как название элемента в дополнительном меню.
  • android:icon - иконка кнопки.

Иконки для меню

Если вы разрабатываете приложение в стиле Holo, вы можете использовать готовый набор иконок от Google, который доступен всем для загрузки с официального сайта совершенно бесплатно.

Набор иконок представлен отдельно для темной и отдельно для светлой темы Holo, а также для разных размеров экранов. Если вы не можете позволить себе дизайнера в команде, этот набор просто незаменим.

Подключение меню к Activity

Загрузить меню из ресурса очень быстро. Открываем код Activity и перекрываем метод onCreateOptionsMenu:
@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.your_activity_menu, menu); return true; }
Теперь меню отображается, но при нажатии на кнопку ничего не происходит. Повесить обработчик на кнопку можно кодом или прямо в XML-ресурсе, задав в свойстве android:onClick имя метода-обработчика. Чтобы сделать то же самое кодом, нужно в Activity перекрыть метод onOptionsItemSelected:
@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.menuPurchasesListNewRecord: // TODO: обработчик нажатия здесь return true; } return super.onOptionsItemSelected(item); }

Создаем подменю

Подменю полезно, когда мы хотим уточнить способ выполнения действия, представленного в action bar. К примеру, у нас есть список покупок и кнопка «Сортировка». По нажатию кнопки нужно выяснить, по какому параметру пользователь хочет отсортировать элементы списка: по категории товара, по названию или по порядку добавления в список. Посмотрим код подменю для такого случая:


Здесь мы объявили еще один тег внутри тега. Подменю представляет собой группу все тех же тегов, что позволяет при необходимости сделать подменю в подменю и так далее.

Radio button"ы в меню

Мы только что сделали меню для выбора порядка сортировки покупок. Было бы здорово показывать, какой способ сортировки используется в текущий момент. Список может быть отсортирован только одним из трех возможных способов, что отлично соответствует идее radio button. Чтобы сделать из нашего подменю набор radio button, достаточно тегу указать свойство android:checkableBehavior="single" . Возможные значения android:checkableBehavior:
  • single - выбор только одного из доступных элементов, наш случай
  • all - выбор любого количества доступных элементов, аналог check box
  • none - элементы группы являются обычными элементами меню, это значение по умолчанию

Полученный код меню:


Если запустить приложение и попробовать выбрать один из способов сортировки, ничего не произойдет. В меню не показано, что какой-то элемент выбран. Это придется сделать вручную вызовом item.setChecked(true);
@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.menuPurchasesListNewRecord: // TODO: обработчик нажатия здесь return true; case R.id.menuPurchasesListSortOrderCategory: item.setChecked(true); return true; case R.id.menuPurchasesListSortOrderName: item.setChecked(true); return true; case R.id.menuPurchasesListSortOrderAddTime: item.setChecked(true); return true; } return super.onOptionsItemSelected(item); }

Если у вас остались вопросы по работе с главным меню, буду рад ответить в комментариях.

Android поддерживает несколько типов меню. Первый - на телефоне есть отдельная кнопка Menu (в старых телефонах), нажатие которой вызывает меню. В новых устройствах отдельную кнопку убрали, заменив на значок меню в виде трёх точек в вертикальной ориентации. Второй тип - контекстное меню, которое появляется при нажатии и удерживания пальца на экране в нужном месте (также можно нажать и удерживать центральную кнопку на телефоне). Контекстное меню в свою очередь может иметь подменю. Сегодня мы познакомимся с первым типом меню. В данной статье будет рассматриваться работа с меню на новых устройствах под управлением Android 4.0 и выше.

В шаблоне Empty Activity нет меню, поэтому мы создадим его сами. Это поможет вам понять принцип работы и получить общее представление о проекте. Запоминать названия классов, методов и код для обработки выбора пунктов меню необязательно. В других шаблонах меню будет встроено и вы можете сразу использовать его.

Создайте новый проект на основе Empty Activity и запустите его. Никакого меню пока нет.

Создадим несколько строковых ресурсов в файле res/values/strings.xml , которые будут отвечать за пункты меню:

Settings Кот Кошка Котёнок

Теперь создайте новую папку menu в папке res res , | New | Directory ). Далее создайте в созданной папке файл menu_main.xml - имя указывает, что меню относится к основной активности MainActivity (правый щелчок мыши на папке menu | New | Menu Resource File ). Если вы будете создавать приложение с несколькими экранами, то у каждой активности будет отдельное меню со своими настройками. Пока откроем файл menu_main.xml и добавим в полученный шаблон свой код:

Откроем файл MainActivity . Сейчас в нём только один метод onCreate() . Добавим новый метод onCreateOptionsMenu() . Именно данный метод отвечает за появление меню у активности. Выберите в студии меню Code | и в следующим окне начинайте вводить название метода по первым буквам. Можно вводить по первым заглавным буквам, т.е. ocom (o nC reateO ptionsM enu), чтобы быстро найти нужную строку. Нажимаем кнопку OK и получаем заготовку.

@Override public boolean onCreateOptionsMenu(Menu menu) { return super.onCreateOptionsMenu(menu); }

Добавляем в заготовку метод, который берёт данные из ресурсов меню и преобразует их в пункты меню на экране.

@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; }

В методе inflate() вы указываете на ресурс меню (R.menu.menu_main ) и объект класса Menu .

По английски "inflate" переводится как надувать, т.е. по замыслу разработчиков Android, мы как бы надуваем данными объект, например, меню. Но на самом деле слово "inflate" происходит от словосочетания in flat - в квартиру. Существует старинная традиция запускать в квартиру первым кота, который исследует все закоулки дома и заявляет о своём согласии жить в нём. Так и мы запускаем данные из XML-файла в объект MenuInflater.

Запустите проект. Теперь в правой части заголовка вы увидите значок из трёх точек, выстроенных в вертикальную линию. Нажмите на значок, чтобы увидеть пункт меню Settings .

Как не трудно догадаться, элемент item отвечает за отдельный пункт меню. Добавим ещё три пункта по такому же принципу, меняя только идентификатор и текст для меню:

Запустите проект и попробуйте снова вызвать меню. Вы увидите три новых пункта.


Параметры id и title не нуждаются в объяснениях. Параметр orderInCategory позволяет задать свой порядок вывода пунктов меню. Предположим вы создали пять пунктов меню, но пока не определились с порядком их вывода на экране. Чтобы не перемещать постоянно целые блоки кода для пунктов меню в нужном порядке, можно воспользоваться данным параметром.

И, наконец, важный атрибут app:showAsAction определяет поведение меню в ActionBar . Значение never означает, что элемент меню не должен выводиться в заголовке, а только в всплывающем меню, т.е. находиться за тремя точками. Если вы установите значение always , то пункт Settings сразу появится в заголовке вашего приложения. Также доступны значения ifRooms , withText и collapseActionView . Попробуйте самостоятельно. Например, ifRoom выводит пункт меню, если позволяет место. Если пунктов будет много, то они будут только мешаться. Как правило, в таком варианте выводят очень короткое слово или значок для частых операций, чтобы избежать лишнего щелчка на три точки.

Обратите внимание на атрибут app:showAsAction , который относится к пространству имён xmlns:app="http://schemas.android.com/apk/res-auto" . Было время, когда такого пространства имён не существовало и в проектах использовался атрибут android:showAsAction из стандартного пространства имён. Если студия будет ругаться на ошибку, то отредактируйте код.

Пока пункты меню не выполняют полезной работы. Любое нажатие на пункт просто закрывает меню без видимых последствий. Мы ещё не написали код для обработки нажатий.

Выбор пунктов меню

Мы научились создавать меню. Но пока оно бесполезно, так как пункты меню никак не реагируют на наши нажатия. Для обработки нажатий пунктов меню служит другой метод onOptionsItemSelected() . Добавим метод по такому же принципу, как для предыдущего примера. Получим заготовку.

@Override public boolean onOptionsItemSelected(MenuItem item) { return super.onOptionsItemSelected(item); }

Параметр item отвечает за пункт меню. Вам следует получить идентификатор меню через метод getItemId() и указать для него код. Так как обычно меню состоит из нескольких пунктов, то удобно использовать конструкции if/else или switch . Для вывода информации воспользуемся текстовой меткой. Добавьте на экран активности компонент TextView . Можете использовать имеющийся TextView с надписью "Hello World!", только присвойте ему идентификатор.

android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!"/>

Добавим код в заготовку для выбранного пункта меню:

@Override public boolean onOptionsItemSelected(MenuItem item) { // получим идентификатор выбранного пункта меню int id = item.getItemId(); TextView infoTextView = (TextView) findViewById(R.id.textView); // Операции для выбранного пункта меню switch (id) { case R.id.action_cat1: infoTextView.setText("Вы выбрали кота!"); return true; case R.id.action_cat2: infoTextView.setText("Вы выбрали кошку!"); return true; case R.id.action_cat3: infoTextView.setText("Вы выбрали котёнка!"); return true; default: return super.onOptionsItemSelected(item); } }

Запустите приложение, вызовите меню и выберите любой пункт меню. В текстовом поле должно появиться сообщение.


Существует альтернативный способ через XML, похожий на обработку щелчков кнопки (начиная с Android 3.0). Вы можете добавить атрибут android:onClick в ресурсах меню, и вам не нужно использовать вызов метода onOptionsItemSelected() . При помощи android:onClick вы можете указать нужный метод при выборе пункта меню. Добавьте данный атрибут к пункту Settings

Теперь в коде активности напишем следующее:

// у атрибута пункта меню Settings установлено значение android:onClick="onSettingsMenuClick" public void onSettingsMenuClick(MenuItem item) { TextView infoTextView = (TextView) findViewById(R.id.textView); infoTextView.setText("Вы выбрали пункт Settings, лучше бы выбрали кота"); }

Переключатели

Внешний вид пунктов меню можно изменить на вид с переключателями. Для этого нужно добавить элемент group с атрибутом android:checkableBehavior="single" :

Большого смысла в этом режиме я не вижу. И рассматривать его не будем.

Режим Design

В Android Studio 2.2 добавили графический режим построения меню, которых похож на панель инструментов для добавления новых компонентов на экран. У меню панель состоит из четырёх элементов: Menu Item , Search Item , Menu , Group .


Принцип тот же, выбираете нужный элемент и перетаскиваете его на экран в область меню. Если вы изучили ручное создание меню, то данный способ не вызовет у вас затруднений. С его помощью можно быстро набросать структуру меню, а затем подправить вручную.

Возможность кастомизировать панель быстрых настроек появилась благодаря добавленному в Android 6.0 инструменту System UI Tuner. Это экспериментальная функция. Чтобы включить её, нужно развернуть панель быстрых настроек и несколько секунд удерживать палец на шестерёнке в правом верхнем углу. После этого система сообщит о включении System UI Tuner, а в настройках появится соответствующий пункт.


Для добавления собственных элементов на панель управления потребуется установка дополнительного приложения, но начать стоит с изучения самого System UI Tuner. Это довольно интересная штука, благодаря которой можно принудительно включить и отключить отображение тех или иных элементов на панели быстрых настроек, а также добавить процентный индикатор уровня заряда аккумулятора.




Создание и добавление собственных элементов возможно через приложение Custom Quick Settings.

Сначала пользователю покажут процесс активации System UI Tuner, а затем предложат создать собственный элемент панели.




Процесс пошагово описан непосредственно на экране Custom Quick Settings. Попробуем пройти его, создав на панели, например, значок для запуска мобильного приложения Лайфхакера.


Тапаем по SYSTEM UI TUNER. Появляется конструктор панели быстрых настроек. На этом этапе можно задать расположение каждого элемента, а также выбрать опцию «Добавить кнопку быстрого доступа» в нижней части экрана. Создаём новую кнопку.


Тапаем по «Кнопка трансляции» и задаём ей имя. По инструкции каждая создаваемая кнопка должна иметь название в формате CUSTOMTILEx, где x - это порядковый номер кнопки, которую вы создаёте. Отсчёт начинается с нуля, а потому первая создаваемая кнопка должна называться CUSTOMTILE0.




Кнопка появится на экране конструктора панели. Попутно вы можете задать её расположение.

Возвращаемся в приложении Custom Quick Settings на экран инструкции, устанавливаем галочку в пункте «I have done this» и нажимаем на Continue.


Кругленький значок с плюсиком переводит пользователя на экран настройки новой кнопки. Сначала задаём имя кнопки, в нашем случае это «Лайфхакер».




Выбираем иконку. Их здесь много, очень много. Лайфхакер очень полезный, как морковка, а потому значок морковки будет в тему.




Теперь задаём действие по тапу на иконку. Пользователь может задать запуск приложения, переход по URL, кастомное действие, либо сделать кнопку, которая ничего не делает. В нашем случае это запуск приложения, то есть Launch App. В появившемся списке всех установленных и системных приложений находим «Лайфхакер». Действие для долгого тапа задавать не обязательно, а потому его можно пропустить.




Осталось нажать на кругленький значок с галочкой, подтверждающий настройки кнопки, после чего открыть панель быстрых настроек. Как видите, теперь здесь есть Лайфхакер-морковка.


Данная функция доступна только в Android 6.0.



gastroguru © 2017