Жесты в Jetpack Compose: основы

Как это обычно происходит с Jetpack Compose, применение жестов к представлению теперь проще, чем раньше, с помощью XML.

Благодаря Jetpack Compose реализовать жесты стало проще, чем когда-либо. Единственное, что нам нужно, чтобы назначить действие жесту, — это Composable и лямбда.

Мы увидим, как добавить эту функциональность с примерами кода для Composable , представляющего вертикальные часы.

Как добавить вертикальные жесты

Для добавления жестов нам понадобятся модификаторы.

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

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

Это имеет смысл, поскольку пользовательский интерфейс определяется двумя осями координат, которые имеют точку (0,0) в верхнем левом углу.

Здесь у вас есть пример кода с реализованным модификатором scrollable.

.scrollable(
    orientation = Orientation.Vertical,
    state = rememberScrollableState { delta ->
      when {
        delta < 0 -> onScrollUp(delta)
        delta > 0 -> onScrollDown(delta)
        else -> {}
      }
      delta
    }
)

Как добавить горизонтальные жесты

Здесь применяется тот же принцип. Мы используем модификатор scrollable, но с указанием горизонтальной ориентации.

Следуя тому, что мы сказали ранее о том, где находится точка (0,0) в координатах, если delta положительное, выполняется свайп вправо, а если он отрицательный, мы собираемся зарегистрировать свайп влево.

Если мы хотим применить горизонтальный и вертикальный жест к одному и тому же Composable, то нам нужно будет добавить к нему модификаторы scrollable.

Вот пример горизонтального жеста.

.scrollable(
    orientation = Orientation.Horizontal,
    state = rememberScrollableState { delta ->
      when {
        delta < 0 -> onSwipeLeft(delta)
        delta > 0 -> onSwipeRight(delta)
        else -> {}
      }
      delta
    }
 )

Как добавить тап-жесты

Если мы хотим управлять двойным нажатием или длительным нажатием, мы должны использовать другой модификатор, в данном случае тот, который называется pointerInput.

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

.pointerInput(Unit) {
    detectTapGestures(
      onPress = {},
      onDoubleTap = {},
      onLongPress = { onLongPress() },
      onTap = { onClick() }
    )
 }

При всем этом у нас может быть следующее Composable, которое представляет собой таймер, которым можно управлять с помощью всех этих нажатий и жестов.

fun VerticalClock(
  modifier: Modifier = Modifier,
  clock: Clock,
  onClick: () -> Unit,
  onLongPress: () -> Unit,
  onScrollDown: (Float) -> Unit,
  onScrollUp: (Float) -> Unit,
  onHorizontalScroll: (Float) -> Unit
) {
 Column(
  verticalArrangement = Arrangement.Center,
  horizontalAlignment = Alignment.CenterHorizontally,
  modifier = modifier
   .fillMaxWidth()
   .pointerInput(Unit) {
    detectTapGestures(
      onPress = {},
      onDoubleTap = {},
      onLongPress = { onLongPress() },
      onTap = { onClick() }
    )
   }
   .background(MaterialTheme.colorScheme.background)
   .scrollable(
    orientation = Orientation.Vertical,
    state = rememberScrollableState { delta ->
      when {
        delta < 0 -> onScrollUp(delta)
        delta > 0 -> onScrollDown(delta)
        else -> {}
      }
      delta
    }
   )
   .scrollable(
    orientation = Orientation.Horizontal,
    state = rememberScrollableState { delta ->
      when {
         delta < 0 -> onSwipeLeft(delta)
         delta > 0 -> onSwipeRight(delta)
         else -> {}
      }
      delta
    }
   )
) {
  with(clock) {
    ClockPair(
      verticalAlignment = Alignment.Bottom,
      firstDigit = firstDigit,
      secondDigit = secondDigit
    )
    ClockPair(
      verticalAlignment = Alignment.Top,
      firstDigit = thirdDigit,
      secondDigit = fourthDigit
    )
  }
 }
}

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

Присоединяйтесь к Medium по моей реферальной ссылке — Мигель
Прочитайте все истории Мигеля (и тысяч других авторов на Medium). Ваш членский взнос напрямую поддерживает Мигеля…medium.com

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

👏 Хлопайте за историю и подписывайтесь на автора 👉
📰 Смотрите больше контента в публикации Level Up Coding
🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу

Жесты в Jetpack Compose: основы