Меню на кнопці Android. Попрощайтеся з кнопкою "Меню"

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 n C reate O ptions M 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.

Головне меню - один із основних інструментів для взаємодії користувача з програмою. В 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, наприклад, на заголовок програми. Визначте для кожної діяльності максимум одну найважливішу кнопку, без якої ніяк не можна, і позначте всі тільки в неї. Інші (а по можливості всі) повинні бути 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

Створюємо підменю

Підменю корисно, коли хочемо уточнити спосіб виконання дії, представленого в 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.menuPurchasesListSort return true; case R.id.menuPurchasesListSortOrderName: item.setChecked(true); return true;

Якщо у вас залишилися питання щодо роботи з головним меню, буду радий відповісти у коментарях.

До появи 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.