контекстное меню на телефоне
Floating toolbar for text selection в Android Marshmallow: разбор нововведения
В Andriod при выделении текста появляется меню с действиями, которые можно выполнить: «Вырезать», «Скопировать», «Отправить». В Android Marshmallow (SDK 23) появилась возможность расширять это меню и давать пользователю легкий доступ к дополнительным возможностям при работе с текстом: «Перевести», «Прокомментировать», «Процитировать».
В процессе подготовке к выступлению на конференции GDG в Нижнем Новгороде я обнаружил, что эта новая возможность крайне плохо документирована, единственная доступная статья не во всем соответствует действительности, и в сети находится исчезающе мало примеров использования этой возможности. Пришлось разбираться самому. Результатами проведенного исследования и хочу поделиться. Это может сэкономить вам достаточно много времени.
Поскольку различные меню в Android появлялись эволюционно, проще всего рассказ начать «от печки». Разработчики с опытом могут смело листать сразу в раздел «Новое» без риска что-нибудь пропустить. Если что – потом вернетесь. Разработчики помоложе могут под спойлерами найти полезные на практике примеры.
Старое
Первое. Меню вульгарис
Меню в Android устроены достаточно однотипно: они описываются с помощью XML, затем в нужный момент в соответствии с этим описанием с помощью MenuInflater создаются соответствующие объекты в памяти, это меню отображается, и информация о нажатии на соответствующий элемент приходит в колбэк.
Обычное меню, которое во времена оно вызывалось нажатием на аппаратную клавишу «Menu», описывается в ресурсах приложения в виде XML-файла.
Пункты меню будут отсортированы по полю android:orderInCategory.
Создается меню вызовом инфлейтера в методе onCreateOptionsMenu().
Информация о выборе пункта меню попадает в метод onOptionsItemSelected().
Все описанное выше приводит к появлению такого меню:
Все просто и привычно.
Второе. Контекстное меню
Контекстное меню – это плавающее меню, которое появляется при длительном нажатии на какой-либо элемент интерфейса. Этот элемент должен быть предварительно зарегистрирован для работы с контекстным меню.
Контекстные меню чаще всего применяются при работе со списками. Но этот рассказ был бы больше про списки, чем про меню, поэтому оставим за рамками статьи. Примеры будут без них.
Рассмотрим простой пример.
Зарегистрировать элемент можно, например, в onCreate():
Дальше все аналогично предыдущему пункту, только внутри других методов (onCreateContextMenu() и onContextItemSelected()):
При долгом нажатии на элемент с текстом появляется контекстное меню.
Третье. Меню в AppBar и Toolbar
Начиная с Android Honeycomb (он же 3.0, он же SDK 11, то есть тоже достаточно давно) аппаратная кнопка Menu была упразднена, а меню стало отображаться в «строке действий», она же «application bar». Появилась возможность часть пунктов меню показать в этой строке в виде иконок, а часть оставить скрытыми до нажатия на находящийся справа значок меню.
Поля для описания иконок и расположения дополнили XML с описанием меню. В остальном это осталось все то же меню с известными нам onCreateOptionsMenu() и onOptionsItemSelected().
| Видимая часть меню | Скрытая часть меню, если нажать на «три точки» |
На этом уровне про меню обычно знают все после первой же новичковой книжки. Спасибо, что хватило терпения дочитать досюда, дальше будет интересней.
Четвертое. Режим контекстных действий (Contextual action mode)
Режим контекстных действий, он же «Contextual action mode» позволяет показать пользователю набор действий, которые можно выполнить над выбранным элементом. Как и контекстное меню, этот инструмент удобен при работе со списками, но списки в этой статье мы не рассматриваем.
Для того, чтобы рассмотреть работу этого режима, нам потребуется элемент, который можно «выбрать». Возьмем для примера ToggleButton. Данный режим приложение активирует само, соответственно, сделаем это при изменении статуса ToggleButton:
actionModeCallback – это экземпляр класса ActionMode.Callback, который содержит колбэки для работы с меню. Меню при этом осталось все тем же, все с той же старой доброй механикой:
Обратите внимание на значение, которое мы сохраняем в переменной actionMode. Это экземпляр класса ActionMode, нам он нужен для того, чтобы была возможность изменить заголовок (actionMode.setTitle()), подзаголовок (actionMode.setSubtitle()), а также завершить этот режим (actionMode.finish()). После выполнения действия режим автоматически не завершается, и если нам нужно, то завершить его мы должны сами.
Обрабатывается выбор пользователя тоже привычным способом:
Меню для контекстных действий, очевидно, должно отличаться от основного, поэтому создадим еще один XML c описанием.
Получаем вот такое поведение:
| |
Все старенькое, то есть известное по крайней мере с SDK 11 теперь закончилось, началось неизвестное.
Новое
В Android Marshmallow (он же 6.0, он же SDK 23) в работе меню появилось два новшества. Оба эти новшества еще не поддерживаются Support Library и работают только на устройствах с SDK 23. Поэтому прежде чем вызывать появившиеся методы, необходимо проверять номер SDK устройства, на котором запущено приложение.
Для удобства рассказа мы избавимся от этих проверок, указав minSdkVersion 23.
Пятое. Еще одно контекстное меню
Метод для создания «Режима контекстных действий» (описан выше) был расширен. Вторым параметром startActionMode() можно передать константу, которая задает тип отображения.
Если задать тип ActionMode.TYPE_FLOATING, то меню приобретает следующий вид:
Иконок нет. Расположение – горизонтальное.
Если пунктов много настолько, что не влезают по ширине, то появятся уже знакомые «три точки»:
| |
Все остальное – точно также, как в «Contextual action mode» (см. выше).
Шестое. Расширение меню при выделении текста
Ну и, наконец, то, что было обещано в статье о нововведениях в Android Marshmallow. Появилась возможность дополнить меню, появляющееся при выделении текста, своими пунктами. Анимированная картинка этого чуда была в самом начале статьи, но если хотите, она еще раз под спойлером.
Реализация
Чтобы добиться такого эффекта, сначала нужно создать унаследованный от ActionMode.Callback колбэк. То есть полностью аналогичный тому, что мы создавали двумя разделами выше для «Contextual action mode».
Далее для всех элементов, в которых мы хотим расширить меню при редактировании, нужно указать этот колбэк:
Колбэк, указанный в setCustomSelectionActionModeCallback(), будет использоваться, если есть выделенный текст. Указаный в setCustomInsertionActionModeCallback() – если текста нет. Разделили их потому, что не все действия имеют смысл, когда ничего не выделено, и, соответственно, содержимое появляющихся меню должно быть разным.
| |
На пустом EditText выглядит вот так:
| |
Ой. Куда делось мое меню?
Посмотрите на скриншоты ниже. Есть идея, куда делись все добавленные пункты меню?
| |
Подсказку можно найти здесь:
Поясню. Достаточно велика вероятность то, что во вторую, вертикальную часть меню оставшиеся пункты тоже не поместятся. И там появится скролл. На скриншотах вверху так и случилось.
Проблема в том, никаих признаков скролла пользователю не видно: значок скролла почти сразу исчезает, а край непоместившегося пункта не выглядывает. Завел багу, посмотрим, что создатели этой фичи скажут. code.google.com/p/android/issues/detail?id=195043
Куда опять делось мое меню?
На этот раз другая проблема: меню при fullscreen input mode описанным выше способом не расширяется. Воркэраунд я нашел только один: выключить fullscreen режим с помощью android:imeOptions=«flagNoExtractUi».
Как разместить свой пункт перед стандартными?
Родные пункты меню имеют параметры order от 1 до 5. Поэтому с помощью android:orderInCategory в описании меню задать положение перед родными пунктами нельзя. Но можно изменить порядок пунктов в уже сформированном меню, например, так:
Получаем результат:
| |
Странности в документации
Нормальной документации на расширение меню при выделении текста нет. Есть уже упоминавшаяся статья статья о новинках в Android Marshmallow.
Я несколько десятков раз перечитывал это место, но так и не смог соотнести то, что там написано, с практикой. Рассказываю по порядку.
Создание меню опций и контекстного меню в Android. Как сделать контекстное меню для вашего приложения.
Предоставить пользователю меню опций (вызывается по нажатию кнопки «Menu» девайса) и контекстного меню — это хороший путь улучшить юзабилити, за которое вам скажут спасибо. В статье мы рассмотрим создание ContextMenu, OptionsMenu, CheckableMenu …
Постановка задачи
Создадим две активности, одна из них будет содержать следующую функциональность:
И для второй активности:
Шаг 1: описание меню в xml-файлах
Для описания меню (как контекстного, так и меню опций) создадим папку res/menu и два файла в ней: options.xml и context.xml . Они будут содержать описание вида нашего меню, приведу код:
Описание контекстного меню будет иметь вид:
Как вы думаю заметили, содержание отличается не сильно. Давайте пройдемся по его элементам:
Замечу, что в описание разметки для контекстного меню атрибут icon не указывался, так как отображаться он не будет. Хотя его указание не помещает работе программы.
Шаг 2: java-описание логики работы меню
Дело это не сложное, нужно лишь перегрузить пару методов и уметь пользоваться switch-case:
В этом коде мы описали логику работы активности по работе с меню опций, основные действия тут таковы:
Теперь внимательно посмотрите на описание активности с контекстным меню:
Тут как мы и ожидали все очень похоже, изменились только названия методов и появилась привязка (регистрация) контекстного меню к виджету. Основные действия такие:
Исходники можно скачать тут
Последни статьи
Mobile Developer & Business Day в Минске: для разработчиков и заказчиков мобильных приложений
#Droidcon Stockholm 2014 или какими я хочу видеть Android-конференции [дополняется]
[Swift] Урок 2 — Делаем простой конвертер для iOS
Опубликована программа MobileOptimized 2014: лидеры мнений мобильной разработки со всего мира соберутся в Минске!
[Swift] Урок 1 — Пишем программу «Hello, World» на Swift языке под iOS
Как включить новый интерфейс в контекстном меню в Chrome на Android
Удобство и интуитивность Google Chrome по-настоящему сложно переоценить. Во многом именно из-за них браузер поискового гиганта снискал такую славу среди пользователей, которые в большинстве своём не отказываются от него, невзирая на все остальные недостатки. Но если десктопная версия, в общем говоря, далека не идеала с точки зрения ресурсопотребления, то мобильная лишена этих проблем и не склонна отъедать изрядную часть ресурсов аппаратного обеспечения смартфона. Только это не значит, что её нельзя сделать ещё удобнее, чем есть сейчас.
В Google Chrome на Android обновился интерфейс
Несмотря на общую логику Google Chrome для Android, контекстное меню оставляло некоторые вопросы. Почему-то дизайнеры, проектировавшие интерфейс браузера, не уделили должного внимания этому разделу. Все элементы, входящие в его состав, были просто перечислены столбиком в виде текстовых наименований без пиктограмм. Из-за этого довольно сильно страдала наглядность, что, хоть немного, но всё-таки ухудшало восприятие и снижало скорость взаимодействия с Chrome. Но в очередном обновлении браузера эту проблему исправили, добавив иконки к каждому пункту меню.
Как включать флаги в Chrome
Чтобы включить иконки в Chrome, вам потребуется либо попасть в число пользователей, которым уже стало доступно обновление, либо установить тестовую сборку браузера, которую сама Google называет нестабильной. Я сам ей пользуюсь, а потому поругать её за что-то, положа руку на сердце, не могу. Поэтому не бойтесь.
Обязательно перезагружайте браузер после включения каждого параметра
После того, как вы включите эти параметры, в контекстном меню появятся сопроводительные пиктограммы напротив каждого из пунктов. На первый взгляд может показаться, что от этого ничего принципиально не изменилось. Однако в долгосрочной перспективе будет ясно, что с этого момента вы сможете больше не читать названия доступных элементов меню, а просто узнавать их по иконкам. Благодаря их наглядности и логичности вам удастся повысить скорость взаимодействия с браузером.
Новый интерфейс в Chrome
Важно понимать, что наличие этих пунктов в меню флагов зависит от того, попали вы в число участников тестирования новой сборки Google Chrome для Android или нет. Google имеет обыкновение выпускать свежее обновление в закрытом режиме, распространяя его среди случайных пользователей браузера. В противном случае вы будете вынуждены либо ждать официального релиза обновления, которое может выйти и через месяц, и через два, либо воспользоваться бета-версией Google Chrome.
Посчитайте, сколько раз Google обещала снизить прожорливость Chrome
Но, даже если вы обнаружите у себя эти флаги, позволяющие активировать пиктогараммы в контекстном меню, учитывайте, что они могут оказывать негативное влияние на стабильность браузера. Дело в том, что сами нововведения находятся в состоянии бета-тестирования, и Google ещё не знает сама, поступят ли они в релиз. Поэтому, если вы обнаружите, что ваш браузер начал работать как-то не так, отключите все флаги, включённые ранее. В результате даже тестовый Chrome будет работать вполне исправно.
Урок 15. Контекстное меню
— создадим контекстное меню
Контекстное меню вызывается в Андроид длительным нажатием на каком-либо экранном компоненте. Обычно оно используется в списках. Когда на экран выводится список однородных объектов (например письма в почт.ящике) и, чтобы выполнить действие с одним из этих объектов, мы вызываем контекстное меню для него. Но т.к. списки мы еще не проходили, сделаем пример попроще и будем вызывать контекстное меню для TextView.
Project name: P0151_ContextMenu
Build Target: Android 2.3.3
Application name: ContextMenu
Package name: ru.startandroid.develop.contextmenu
Create Activity: MainActivity
Откроем main.xml и нарисуем там два TextView:
android:layout_height = «wrap_content»
android:textSize = «26sp»
android:layout_width = «wrap_content»
android:id = «@+id/tvColor»
android:layout_marginBottom = «50dp»
android:layout_marginTop = «50dp»
android:text = «Text color» >
android:layout_width = «fill_parent»
android:layout_height = «wrap_content»
android:textSize = «22sp»
android:id = «@+id/tvSize»
android:text = «Text size» >
Для первого TextView мы сделаем контекстное меню, с помощью которого будем менять цвет текста. Для второго – будем менять размер текста.
Принцип создания контекстного меню похож на создание обычного меню. Но есть и отличия.
Метод создания onCreateContextMenu вызывается каждый раз перед показом меню. На вход ему передается:
Метод обработки onContextItemSelected аналогичный методу onOptionsItemSelected для обычного меню. На вход передается MenuItem – пункт меню, который был нажат.
Также нам понадобится третий метод registerForContextMenu. На вход ему передается View и это означает, что для этой View необходимо создавать контекстное меню. Если не выполнить этот метод, контекстное меню для View создаваться не будет.
Давайте кодить, открываем MainActivity.java. Опишем и найдем TextView и укажем, что необходимо создавать для них контекстное меню.
Теперь опишем создание контекстных меню. Используем константы для хранения ID пунктов меню.
Обратите внимание, что мы по ID определяем View, для которого вызвано контекстное меню и в зависимости от этого создаем определенное меню. Т.е. если контекстное меню вызвано для tvColor, то мы создаем меню с перечислением цветов, а если для tvSize – с размерами шрифта.
В качестве ID пунктов мы использовали константы. Группировку и сортировку не используем, поэтому используем нули в качестве соответствующих параметров.
Можно все сохранить и запустить. При долгом нажатии на TextView должны появляться контекстные меню.
Но нажатие на них ничего не дает, т.к. не мы не прописали обработку в методе onContextItemSelected. Давайте пропишем:
В этом методе мы определяем по ID, какой пункт меню был нажат. И выполняем соответствующие действия: меняем цвет текста для tvColor или размер шрифта для tvSize. Сохраняем, запускаем и проверяем, что контекстные меню теперь реагируют на нажатия и делают то, что от них требуется.
Для расширения кругозора я хотел бы еще кое-что написать по этой теме. Возможно, это покажется пока сложноватым, так что если вдруг будет непонятно, ничего страшного. Итак, мысли вслух.
Мы использовали метод registerForContextMenu (View view) для включения контекстного меню для определенного View. Этот метод принадлежит классу Activity. Я посмотрел исходники этого метода, там написано следующее:
Вспоминаем наш урок по обработчикам и смотрим хелп по методу setOnCreateContextMenuListener (View.OnCreateContextMenuListener l). Получается, что View в качестве обработчика создания контекстного меню использует объект this. В данном случае, этот код в Activity, значит this – это Activity и есть. Т.е. когда View хочет показать контекстное меню, оно обращается к обработчику (Activity), а он уже выполняет свой метод onCreateContextMenu. Т.е. тот же самый принцип, что и при обычном нажатии (Click).
И строка в MainActivity.java:
абсолютно равнозначна этой строке:
Вообще мы можем создать свой объект, реализующий интерфейс View.OnCreateContextMenuListener и использовать его вместо Activity в качестве обработчика создания контекстного меню.
Не забывайте, что для контекстного меню вы также можете использовать XML-способ, который был рассмотрен в конце прошлого урока. Попробуйте сделать этот же урок, но уже с использованием XML-меню.
На следующем уроке:
— рисуем экран программно, а не через layout-файл
Что такое ярлыки на Android, зачем они нужны и как ими пользоваться
Думаю, вы знаете, что такое 3D Touch. Это интерфейс распознавания усиленных нажатий, который появился в iPhone в 2015 году. Благодаря ему пользователи iOS получили доступ к так называемому контекстному меню приложений с кнопками быстрого доступа к отдельным функциям или разделам этих самых приложений. Не знаю, кто как, но я предназначения 3D Touch так и не понял, потому что реализовать то же самое вполне можно было и программным способом, что Apple впоследствии и сделала. Правда, опять её в этом опередила Google.
Ярлыки — это кнопки для быстрого перехода к конкретным функциям приложения
В Android 9 появились так называемые ярлыки рабочего стола. Это те же самые кнопки быстрого доступа из контекстного меню приложений, которые просто можно добавить на рабочий стол. Несмотря на то что этому механизму уже почти три года, пользователи в большинстве своём игнорируют его, а зря. Мой личный опыт показывает, что это отличная вещь, которая не просто упрощает взаимодействие с большинством приложений, но и значительно экономит время. Не поняли, как это работает? Сейчас объясню и предложу кучу полезных ярлыков.
Как работают ярлыки на Android
Добавить ярлык на рабочий стол чаще всего можно из контекстного меню приложения
Смотрите. В каждом приложении есть раздел или функция, которыми вы пользуетесь чаще всего. Возьмём сервис видеозвонков Google Duo. Например, я использую его для звонков жене. Мне нецелесообразно запускать приложение, переходить в раздел видеозвонков (там есть ещё раздел с отправкой видеосообщений), искать нужный контакт и набирать его. Куда проще вынести ярлык на рабочий стол и звонить по нажатию на него.
Второй сценарий – это приложение YouTube. Так уж вышло, что я практически не смотрю видео, которые мне рекомендует сервис, потому что не успеваю просмотреть даже все новинки подписок. Поэтому для меня нет смысла открывать приложение и нажимать на вкладку с подписками. Логичнее и быстрее для меня сразу переходить в подписки, но делать это можно только с помощью ярлыка на рабочем столе.
Как добавить ярлык на Android
Некоторые ярлыки скрываются в самих приложениях, а не в контекстном меню. То есть, чтобы найти их, придётся немного постараться. Я вряд ли смогу перечислить все приложения, которые скрывают в своём составе ярлыки, но по одному точно пробегусь. Это приложение Google. Оно включает в себя как минимум три ярлыка: словарь, словарный тренажёр и погода.
Как добавить ярлык погоды Google
Иногда ярлыки можно добавить только из приложения
Чтобы добавить словарь или словарный тренажёр на рабочий стол, забейте в поиске любое слово (желательно на английском). В результатах поиска должно появиться определение искомого вами слова, а под ним – предложение добавить ярлык словаря на рабочий стол.
Если Google не предлагает добавить ярлык погоды автоматически, откройте контекстное меню в самом приложении и добавьте его вручную
Иногда вместо ярлыка словаря под ним появляется словарный тренажёр, который позволяет тренировать слова на иностранных языках. Пройдите небольшой тест и вам так же будет предложено добавить его на рабочий стол. С ярлыком погоды всё ещё проще – достаточно открыть погоду в приложении Google и согласиться на добавление на рабочий стол.
Важно понимать, что нет никакой необходимости выносить на рабочий стол все возможные ярлыки. Хороший пример – мессенджеры. Наверняка вы общаетесь с большим количеством людей, каждого из которых просто невозможно разместить на рабочем столе. В противном случае, он будет весь завален кнопками, направляющими в чат с конкретным собеседником. А вот если собеседник один – такой трюк вполне можно провернуть, как у меня в случае с Google Duo.
Новости, статьи и анонсы публикаций
Свободное общение и обсуждение материалов
Считается, что на Android почти нет нормальных планшетов. Поэтому те, кому они действительно нужны, осознанно идут на компромисс, выбирая изделия китайских ноунеймов. Именно из-за отсутствия альтернатив на АлиЭкспресс стали так популярны дешёвые «таблетки» на базе ОС от Google. Единственным на моей памяти удачным решением в этой нише были планшеты Mi Pad от Xiaomi, но она несколько лет назад свернула проект, оставив после себя в наследство только старенький Mi Pad 5. Но в этом году «китайская Apple» решила вернуть себе позиции лидера на рынке планшетов.
Android – чрезвычайно функциональная операционка. Это её и плюс, и минус одновременно. Ведь то, в чём одни видят возможности, для других является сложностью, с которой нужно разобраться. Причём последних, как показывает практика, оказывается намного больше, чем первых. Всё-таки с каждым обновлением доступных функций и инструментов Android становится больше, а значит, и больше поводов что-то не понять. Как хорошо, что у вас есть мы, готовые рассказать и показать, что к чему.
Наверное, вы в курсе, что недавно в Google Chrome появился инструмент, который проверяет ваши пароли на предмет надёжности и сохранности. Он анализирует различные базы данных вроде Have I Been Pwnd и, чуть что, бьёт тревогу, требуя, чтобы вы сменили защитную комбинацию на более сложную и безопасную. Штука, бесспорно, полезная, но, если говорить честно, то скорее всего большинство из нас никогда не меняет пароли по требованию Google Chrome, потому что это и долго, и неудобно. Но Google нашла, как решить эту проблему.