Дизайн пользовательского интерфейса Android: основы порядка фокусировки

Нет ничего более раздражающего, чем пытаться перемещаться по плохо спроектированному пользовательскому интерфейсу в мобильном приложении. То, как ваше приложение ведет себя с точки зрения навигации по экрану, может означать разницу между счастливым пользователем и тем, кто разжигает вас в Android Market. Сегодня мы фокусируемся на фокусе, а именно: на фокусе управления и на том, как его настроить в ваших пользовательских интерфейсах.

Способы ввода в Android-устройства становятся довольно разнообразными: направляющие, трекболы, сенсорные экраны, клавиатуры и многое другое. Некоторые устройства, такие как планшеты, в первую очередь ориентированы на прикосновение. Другие, такие как Google TV, не имеют сенсорного экрана и используют устройства ввода, такие как устройства с направленной панелью (d-pad).

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

Понимание Порядка Фокуса Управления

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

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

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

Шаг 0: Начало работы

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

Шаг 1. Определите макет с помощью элементов управления

Сначала создайте или отредактируйте файл ресурсов макета, используемый вашим классом Activity, например /res/layout/main.xml. Например, следующий макет определяет своего рода «циферблат» элементов управления Button с использованием RelativeLayout.

Стиль с именем clockFaceNum определен в файле /res/values/styles.xml следующим образом:

 <? xml version = "1.0" encoding = "utf-8"?>
 <ресурсы>
     <стиль
         имя = "clockFaceNum">
         <пункт
             имя = "андроид: layout_width"> 38dp </ элемент>
         <пункт
             имя = "Android: layout_height"> 38dp </ пункт>
         <пункт
             имя = "андроид: OnClick"> numClicked </ элемент>
         <пункт
             имя = "андроид: TextSize"> 9sp </ элемент>
     </ Стиль>
 </ Ресурсы> 

Получившийся экран выглядит так:

Шаг 2. Просмотр порядка фокусировки по умолчанию

Давайте рассмотрим порядок фокусировки по умолчанию для элементов управления Button на циферблате в этом RelativeLayout. Если пользователь сфокусирован на кнопке 12 и нажимает «вниз» на клавиатуре направления, следующим элементом управления для фокусировки будет кнопка 11, затем кнопка 10 и т. Д.

Путь «вниз» по умолчанию показан здесь:

Шаг 3. Предоставление пользовательского элемента управления порядком фокусировки

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

Мы можем определить это поведение, указав для каждой кнопки, какой элемент управления должен получить следующий фокус. Существует четыре атрибута XML, которые вы можете установить в любом элементе управления View для определения порядка фокусировки. Эти атрибуты:

• android: nextFocusUp-Этот атрибут определяет элемент управления, который должен получить фокус, если пользователь перемещается вверх
• android: nextFocusDown-Этот атрибут определяет элемент управления, который должен получить фокус, если пользователь перемещается вниз
• android: nextFocusLeft-Этот атрибут определяет элемент управления, который должен получить фокус, если пользователь перемещается влево
• android: nextFocusRight-Этот атрибут определяет элемент управления, который должен получить фокус, если пользователь перемещается вправо

Допустим, мы хотим, чтобы вся навигация «Вниз» и «Вправо» позволяла пользователю перемещаться по часовой стрелке, а элементы управления «Кнопка» — по часовой стрелке, а вся навигация «Вверх» и «Влево» позволяла пользователю перемещаться по элементам управления в противоположную сторону. по часовой стрелке Затем мы должны были бы определить эти четыре атрибута для каждого элемента управления. Например, если вы переместили «Вниз» или «Вправо» из 12 кнопок, вы бы достигли 1 кнопки. Точно так же, если вы переместились «вверх» или «влево» от кнопки 12, вы бы достигли кнопки 11.

Полное определение этого нового расположения циферблата выглядит следующим образом:

Поэтому наш новый путь «вниз», начинающийся с 12-й кнопки, теперь выглядит следующим образом:

Шаг 4: Установка начального контрольного фокуса

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

Используйте тег в элементе управления View, чтобы установить начальный фокус на экране. Например, мы могли бы хотеть обновить 12 Кнопок, чтобы получить начальный фокус, как это:

Конечно, вы также можете использовать программный метод для установки фокуса управления, используя метод класса View, называемый requestFocus ().

Вывод

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

Об авторах

Разработчики мобильных приложений Лорен Дарси и Шейн Кондер являются соавторами нескольких книг по разработке Android: углубленная книга по программированию под названием « Разработка беспроводных приложений для Android, второе издание» и « Самс научи себя разработке приложений для Android за 24 часа, второе издание» . Когда они не пишут, они тратят свое время на разработку мобильного программного обеспечения в своей компании и оказание консультационных услуг. С ними можно связаться по электронной почте androidwirelessdev+mt@gmail.com , через их блог на androidbook.blogspot.com и в Twitter @androidwireless .

Нужна дополнительная помощь в написании приложений для Android? Проверьте наши последние книги и ресурсы!