Фокус в создании

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

• Пользователь ChromeOS может использовать клавиши со стрелками на своей физической клавиатуре для навигации по экрану.
• Игрок может использовать подключенный к компьютеру игровой контроллер для навигации по меню игры.
• Пользователь мобильного приложения может переключаться между элементами с помощью экранной клавиатуры .

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

На следующих страницах описано, как использовать фокус в вашем приложении:

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

Порядок перемещения фокуса по умолчанию

Прежде чем мы углубимся в стандартное поведение поиска по фокусу, важно понять концепцию уровня в иерархии: в общем, можно сказать, что два Composables находятся на одном уровне, когда они являются соседними элементами, то есть имеют одних и тех же родителей. Например, элементы внутри Column находятся на одном уровне. Подъем на уровень означает переход от дочернего элемента к его родительскому объекту Composable или, если оставить тот же пример, возврат от элемента к Column , который его содержит. Спуск на уровень — это обратный процесс, от родительского Column к содержащимся в нем элементам. Эта концепция применима к любому Composable , который может содержать другие Composables .

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

• Клавиши TAB: одномерная навигация, перемещение вперед или назад . Навигация с помощью TAB переводит фокус на следующий или предыдущий элемент в иерархии. По умолчанию Compose следует объявлению Composables . Однонаправленная навигация может осуществляться с помощью клавиши tab на клавиатуре или вращающегося безеля на часах, и такой поиск фокуса будет посещать каждый элемент на экране.
• Клавиши со стрелками: двухмерная навигация, перемещение влево, вправо, вверх или вниз . Двухмерная навигация может осуществляться с помощью крестовины на телевизоре или клавиш со стрелками на клавиатуре, а порядок перемещения ограничивается только элементами на заданном уровне. Для перемещения вниз и вверх на другой уровень можно использовать центральную кнопку крестовины и кнопку «Назад».

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

При переключении на другой тип макета ситуация немного меняется. Если ваш макет содержит более одного столбца, как показано ниже, Jetpack Compose позволяет перемещаться между ними без добавления кода. При нажатии клавиши tab Jetpack Compose автоматически выделяет элементы в порядке их объявления, от первого до четвертого. Использование клавиш со стрелками на клавиатуре позволяет выделению следовать в нужном направлении в двумерном пространстве.

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Элементы Composables объявлены в двух Rows , а элементы, находящиеся в фокусе, объявлены по порядку, с первого по четвёртый. При нажатии клавиши tab порядок фокусировки будет следующим:

В приведенном ниже фрагменте кода элементы объявляются в Columns , а не в Rows :

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

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

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