Пошаговое руководство для плавного взаимодействия с пользователем

Привет народ !! , В сегодняшней статье мы поговорим о «навигации» в Android с помощью «jetpack compose». Навигация означает перемещение пользователя из одного пункта назначения в вашем приложении в другое. Недавно в стратегии разработки приложений нашей организации произошла смена парадигмы, и мы начали переходить к преобразованию и написанию пользовательского интерфейса приложения с использованием компоновки реактивного ранца.

Но why compose? или what is android jetpack compose? короткий ответ будет таким:-

Compose — это современный инструментарий Android для создания собственного пользовательского интерфейса. Это ускоряет разработку пользовательского интерфейса приложения с помощью минимального кода и интуитивно понятных API-интерфейсов Kotlin. Он оживляет приложения, делая создание пользовательского интерфейса Android быстрее и проще.

Когда я начал изучать навигацию с помощью реактивного ранца, у меня возникло четыре вопроса.

  • Как переместить пользователя с одного экрана на другой
  • Как удалить предыдущий экран из backStack
  • Как передавать данные между экранами.
  • Как создать вложенный раздел входа пользователя в качестве примера навигации

В сегодняшней статье мы найдем ответы на поставленные выше вопросы.

Введение в составление навигации:

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

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

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

Части компонентов навигации:

Компоненты навигации состоят из трех основных частей:

  • NavController: отвечает за навигацию между пунктами назначения — то есть экранами в вашем приложении.
  • NavGraph: отображает составные пункты назначения для навигации.
  • NavHost: Composable, действующий как контейнер для отображения текущего пункта назначения NavGraph.

Мы поговорим больше о реализации компонентов навигации на более позднем этапе этого занятия.

План действий по составлению навигации:

Для меня процесс установки довольно прост и включает в себя следующие шаги:

  • Добавьте последнюю версию зависимости Compose Navigation в build.gradle.
  • Настройте NavController.
  • Добавьте NavHost и создайте график навигации.
  • Подготовьте маршруты для навигации между различными пунктами назначения приложений.
  • Кроме того, обратите внимание, требуется ли поток данных или нет.

Зависимость для Compose навигации:

Начнем с добавления зависимости компоновки навигации в build.gradle(:app) в блоке зависимостей. Перейдите по предоставленной ссылке, чтобы получить информацию о текущей версии.

// Navigation Compose
    implementation("androidx.navigation:navigation-compose:2.6.0")

Настройка для двух экранов [главный экран и экран сведений]:

В этом разделе мы создадим два экрана, а именно экран «Домой» и «Сведения», которые мы собираемся использовать в нашем проекте, и будем перемещаться между ними. В традиционной системе просмотра мы можем создавать наши экраны с помощью фрагментов или действий, но в компоновке реактивного ранца мы определяем наши экраны внутри компонуемой функции.

HomeScreen.kt

DetailScreen.kt

Теперь в качестве наших обоих экранов созданы HomeScreen и DetailScreen.
Следующее, что нам нужно решить, это как представить эти экраны в нашей навигации, чтобы в Jetpack compose каждый экран имел уникальное имя или маршрут. . Имя маршрута уникально, потому что NavController будет использовать его для определения следующего составного объекта для отображения.

Маршрут — это строка, соответствующая пункту назначения. Для нашего понимания мы можем предположить, что маршрут в джетпаке составлен аналогично URL. Точно так же, как другой URL-адрес сопоставляется с другой страницей на веб-сайте, маршрут — это строка, которая сопоставляется с пунктом назначения (может быть один Composable или группа Composable) и служит его уникальным идентификатором.

Определение экранов в нашем приложении:

Здесь мы создаем закрытый класс (Screen.kt), который будет содержать два объекта, и каждый объект будет представлять один экран, и каждый объект, который будет наследоваться от класса экрана, будет содержать уникальный маршрут.

Настройка навигационного контроллера:

NavController — ключевой инструмент в компоненте навигации. Это как менеджер, который запоминает последовательность экранов в вашем приложении и их текущие состояния (keeps track of back stack composable entries), что, в свою очередь, дает нам возможность манипулировать бэкстеком. Вы можете думать об этом как о руководстве по перемещению вашего приложения.
Чтобы установить NavController, мы можем использовать метод rememberNavController() в нашем коде. Это создает и remembers a NavController, который выдерживает изменения конфигурации.

NavController всегда следует размещать на верхнем уровне компонуемой иерархии, обычно внутри App the composable , MainActivity.kt в нашем случае, так как мы хотим, чтобы все компонуемые объекты, которым требуется navController, имели один и тот же экземпляр. Это следует принципу подъема состояния и гарантирует, что navController действует как единственный источник правды для навигации и обслуживания заднего стека, управление частью состояния перемещается из дочернего компонуемого в родительский компонуемый.

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

Теперь нам нужно создать первый основной компонент нашей навигации, затем мы настроим компонент navHost.

Настройка NavHost:

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

NavHost действует как контейнер и отвечает за отображение текущего пункта назначения графика. Во время навигации NavHost перекомпоновывается.

В двух словах, NavHost — это набор доступных для загрузки пунктов назначения.

NavGraph.kt

Теперь добавьте функцию «onClick» на HomeScreen, чтобы пользователь переходил на DetailScreen.

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

HomeScreen -> DetailScreen ->HomeScreen() -> OnBackPress -> application shouldcancel.

До сих пор мы могли перемещаться между двумя экранами, а также очищать backStack, что отвечает на два вопроса, заданных в начале статьи.

В этом разделе мы поговорим о How to send data between two screen ? и How to create compartmentalized nav graph?

Передача данных на экран:

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

Это делается путем помещения значения внутрь маршрута, поэтому значение кодируется как строка, а затем анализируется на другом экране. Чтобы передать аргументы на экран назначения, вам нужно добавить заполнители аргументов в маршрут.

Итак, давайте начнем с обновления пути маршрута для подробного экрана.

Здесь мы передаем значение в маршрут для подробного экрана.

Затем мы переходим к нашему NavGraph(SetUpNavGraph.kt) и будем обновлять компонуемый параметр аргумента и указывать аргумент в нашем компонуемом.

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

Передача делимого объекта с помощью Navigation compose :

До сих пор мы могли передавать примитивные типы данных с одного экрана на другой, но how to move whole data object from one screen to other?

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

Класс данных для объекта человека:
Person.kt:

@Parcelize
data class Person(
    val firstName : String,
    val secondName : String
): Parcelable

Установка объекта данных Person из homeScreen.kt в качестве записи backStack с последующим переходом к detailScreen.kt

Получение объекта данных о человеке в файле detailScreen.kt. Здесь мы будем проверять предыдущую запись backStack и извлекать объект человека.

Однако этот подход терпит неудачу, когда мы переходим от HomeScreen к DetailScreen и очищаем задний стек. Чтобы противостоять этой ситуации, мы можем использовать общую модель представления, то есть иметь постоянную модель представления, и каждый экран имеет один и тот же экземпляр, мы можем инициализировать общую модель представления в файле navGraph.kt и передать ее экземпляр на оба экрана.

Дайте мне знать в комментариях, если какие-либо ошибки при настройке.

Вложенная навигация:

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

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

В наш существующий проект мы добавим больше экранов под названием LoginScreen и SignUpScreen.

Добавление нового navGraph с именем AuthNavGraph.kt

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

Аналогичным образом создайте вложенный график для HomeScreen и Detail Screen.

Теперь наш корневой файл NavGraph.kt выглядит примерно так.

@Composable
fun SetUpNavGraph(
    navController: NavHostController
) {
    NavHost(
        navController = navController,
        startDestination = HOME_ROUTE,
        route = ROOT_ROUTE
    ) {
        homeNavGraph(navController = navController)
        authNavGraph(navController = navController)
    }
}

Теперь добавьте логику в homeScreen.kt для перехода от одного вложенного navGraph(homeNavGraph.kt) к другому navGraph(authNavGraph.kt).

HomeScreen.kt

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

Гитхаб: https://github.com/bajpaiNikhil/navigationInCompose

Спасибо, что дочитали до конца. Пожалуйста, следите за автором и этой публикацией. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное обучение программированию по всему миру.

До новых встреч,
★СПАСИБО★