Android navigation: Get started with the Navigation component

<fragment
    android:id="@+id/fragment"
    android:name="androidx.navigation. fragment.NavHostFragment"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:defaultNavHost="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:navGraph="@navigation/navigation" />

Выполнив это действие, мы должны увидеть хост (activity_main), добавленный в навигационный граф (в navigation.xml

Теперь можно добавить новый пункт назначения, щелкнув на опцию ‘Click to add a destination’ (Щелкните, чтобы добавить пункт назначения) в центре навигационного графа. Затем выберите опцию ‘Create new destination’ (Создать новый пункт назначения), вслед за этим откроется диалоговое окно Android New Component, где мы можем создать новый фрагмент. 

Для нашего примера создадим два фрагмента, а именно SignupFragment и LoginFragment. После этого щелкнем на один фрагмент и присоединим его к другому. Навигационный граф будет выглядеть следующим образом: 

Для выше указанного навигационного графа navigation.xml примет следующий вид: 

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/navigation_graph"
    app:startDestination="@id/signupFragment3">
    <fragment
        android:id="@+id/signupFragment3"
        android:name="com.navigation.view.SignupFragment"
        android:label="fragment_signup"
        tools:layout="@layout/fragment_signup" >
        <action
            android:id="@+id/action_signupFragment3_to_loginFragment3"
            app:destination="@id/loginFragment3" />
    </fragment>
    <fragment
        android:id="@+id/loginFragment3"
        android:name="com. navigation.view.LoginFragment"
        android:label="fragment_login"
        tools:layout="@layout/fragment_login" >
        <action
            android:id="@+id/action_loginFragment3_to_signupFragment3"
            app:destination="@id/signupFragment3" />
    </fragment>
</navigation>

Здесь корневым тегом будет navigation с атрибутом startDestination, в котором мы укажем id первоначально загружаемого фрагмента, за которым следуют пункты назначения (фрагменты, диалоговые окна и т. д.) с одним из атрибутов name, значение которого будет названием вашего пункта назначения. 

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

У макета SignupFragment будет две кнопки (Buttons) с id signupBtn и gotoLoginBtn, а также три компонента EditText с id signupUsername, signupPassword и otherInfo.  

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)gotoLoginBtn.setOnClickListener { onGotoLogin(it)
}
private fun onGotoLogin(v: View) {
    val action = SignupFragmentDirections.actionGoToLogin()
    Navigation.findNavController(v).navigate(action)
}

Типобезопасная зависимость создаст класс в формате name_of_file_Directions (в нашем случае исходный фрагмент SignupFragmentDirections), состоящий из <action></action> в файле навигации (navigation). 

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

Посмотрим на код XML во вкладке навигации для создания графа по типу указанного выше. 

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas. android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/navigation"
    app:startDestination="@id/signupFragment">
<fragment
        android:id="@+id/signupFragment"
        android:name="com.navigation.view.SignupFragment"
        android:label="fragment_signup"
        tools:layout="@layout/fragment_signup">
        <action
            android:id="@+id/actionGoToMain"
            app:destination="@id/mainFragment" />
        <action
            android:id="@+id/actionGoToLogin"
            app:destination="@id/loginFragment" />
    </fragment>
    <fragment
        android:id="@+id/loginFragment"
        android:name="com.navigation.view.LoginFragment"
        android:label="fragment_login"
        tools:layout="@layout/fragment_login">
        <action
            android:id="@+id/actionGoToMain"
            app:destination="@id/mainFragment" />
        <action
            android:id="@+id/actionGoToSignup"
            app:destination="@id/signupFragment" />
    </fragment>
    <fragment
        android:id="@+id/mainFragment"
        android:name="com. navigation.view.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main">
        <action
            android:id="@+id/actionGoToSignup"
            app:destination="@id/signupFragment" />
    </fragment>
</navigation>

Готово: в вашем приложении реализована базовая навигация. Теперь вы сможете переместиться к LoginFragment. 

Освоив базовую реализацию, можем переходить к реализации навигации с аргументами (Navigation With Arguments):

Для этого существуют два возможных способа: 

1. Использование объектов bundle. 
2. Использование SafeArgs. 

Ниже я представлю вам два способа реализации и объясню, почему лучше передавать данные, используя SafeArgs вместо Bundle.  

Использование Bundle. Передаем данныеиз исходного фрагмента, получая навигационный контроллер представления как: 

val bundle = bundleOf("username" to signupUsername. text.toString())
Navigation.findNavController(signupUsername).navigate(R.id.actionGoToMain, bundle)

bundleOf() является методом расширенияandroidx. Для этого нам нужно добавить ниже указанную зависимость в файл build.gradle модуля app: 

implementation 'androidx.core:core-ktx:1.3.0-rc01'

Получаем данные во фрагменте назначения как: 

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
signoutBtn.setOnClickListener { onSignout() }
    usernameTV.text = "Hello "+ arguments?.getString("username")
observeViewModel()
}

Вот таким образом мы осуществили передачу данных от одного фрагмента к другому, используя bundle. Однако предчувствую вполне закономерный вопрос с вашей стороны: “Зачем же нам использовать SafeArgs, если мы так легко справились с задачей с помощью выше указанного способа?”.  

Конечно, можно передавать данные, используя bundle. Но бывают ситуации, когда мы пытаемся получить данные в пункте назначения, которые никогда не передавались в качестве дополнительных параметров bundle, что вызывает в среде выполнения NullPointerException. Для избежания подобных проблем архитектурные компоненты предоставляют типобезопасный способ.

Как же использовать Safe Arguments для передачи данных?

Так как в нашем проекте есть активный плагин safe args, посмотрим, как его можно использовать. 

Сначала укажем аргументы, необходимые для пункта назначения в navigation.xml, как показано ниже: 

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/navigation"
    app:startDestination="@id/signupFragment">
<fragment
        android:id="@+id/signupFragment"
        android:name="com. navigation.view.SignupFragment"
        android:label="fragment_signup"
        tools:layout="@layout/fragment_signup">
        <action
            android:id="@+id/actionGoToMain"
            app:destination="@id/mainFragment" />
        <action
            android:id="@+id/actionGoToLogin"
            app:destination="@id/loginFragment" />
    </fragment>
    <fragment
        android:id="@+id/mainFragment"
        android:name="com.navigation.view.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main">
        <argument
           android:name="username"
           app:argType="string"
           android:defaultValue="default"/>
        <action
            android:id="@+id/actionGoToSignup"
            app:destination="@id/signupFragment" />
    </fragment>
</navigation>

Мы отправляем данные также из исходного файла как: 

super. onViewCreated(view, savedInstanceState)
    signupBtn.setOnClickListener { onSignup() }
}
private fun onSignUp(){
val action = SignupFragmentDirections.actionGoToMain(signupUsername.text.toString())
Navigation.findNavController(signupUsername).navigate(action)
}

Получаем данные также во фрагменте назначения как: 

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
signoutBtn.setOnClickListener { onSignout() }
    deleteUserBtn.setOnClickListener { onDelete() }
    usernameTV.text = "Hello "+ MainFragmentArgs.fromBundle(requireArguments()).username
}

Типобезопасная зависимость создаст класс в формате name_of_file_Args (в нашем случае фрагмент назначения MainFragmentArgs), который состоит из <arguments></arguments> в файле навигации. 

Ура!!! Двигаемся дальше. 

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

Навигация с Deeplink: 

В Android глубокая ссылка означает ссылку, по которой вы переходите непосредственно в конкретный пункт назначения внутри приложения. Для добавления глубокой ссылки щелкните на значок + на панели Argument в секции Deep Link. В диалоговом окнеAdd deep link (Добавить глубокую ссылку) введите URI. 

На этом всё! Пишите код с удовольствием! 

С полной информацией о проекте вы можете ознакомиться, пройдя по ссылке на GitHub. 

ashitaasati1608/NavigationComponent
Navigation Component. Contribute to ashitaasati1608/NavigationComponent development by creating an account on GitHub.github.com

Читайте также:

• Переоткрываем для себя эмулятор Android для ускорения тестирования
• Выполнение AES/GCM в Android
• RxPermissions: простой способ управления разрешениями в Android M

Читайте нас в Telegram, VK и Яндекс.Дзен

Перевод статьи ashita asati: Android Navigation Component

Читайте также

Дизайн навигационных графиков | Разработчики Android

Компонент Navigation использует навигационный график для управления навигацией вашего приложения. Навигационный график — это файл ресурсов, который содержит все места назначения вашего приложения вместе с логические соединения или действия , которые пользователи могут выполнять для перехода от одного назначения к другому. Вы можете управлять графом навигации вашего приложения, используя Редактор навигации в Android Studio.

Этот раздел содержит передовой опыт и рекомендации по проектированию вашего приложения. навигационные графики.

Граф навигации верхнего уровня

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

Рис. 1. Граф навигации верхнего уровня.

Вложенные графы

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

Используя в качестве примера навигационный граф верхнего уровня с рисунка 1, предположим, что вы хотел потребовать, чтобы пользователь видел экраны title_screen и register только при первом запуске приложения. После этого пользователь информация сохраняется, и при последующих запусках приложения следует принимать их прямо к матчу экран. В качестве наилучшей практики следует установить соответствует экрану как начальному пункту назначения графа навигации верхнего уровня. и переместите экраны заголовка и регистрации во вложенный граф, как показано на рисунке 2:

Рисунок 2. Граф навигации верхнего уровня теперь содержит вложенный граф.

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

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

Навигация по модулям библиотеки

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

Для получения дополнительной информации см. Рекомендации по навигации для многомодульных проектов.

Глобальные действия

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

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

 
<навигация xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/in_game_nav_graph"
   приложение:startDestination="@id/in_game">
   
   
   <фрагмент
       android:id="@+id/in_game"
       android:name="com. example.android.gamemodule.InGame"
       Android: метка = "Игра">
       <действие
           android:id="@+id/action_in_game_to_resultsWinner"
           приложение:destination="@id/results_winner" />
       <действие
           android:id="@+id/action_in_game_to_gameOver"
           приложение:destination="@id/game_over" />
   
   <фрагмент
       android:id="@+id/results_winner"
       android:name="com.example.android.gamemodule.ResultsWinner" />
   <фрагмент
       android:id="@+id/game_over"
       android:name="com.example.android.gamemodule.GameOver"
       android:label="fragment_game_over"
       инструменты:layout="@layout/fragment_game_over" />

 

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

Основы навигации | Разработчики Android

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

Фиксированный начальный пункт назначения

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

Рисунок 1. Экран списка — это начальный пункт назначения приложения Sunflower.

При запуске приложения Sunflower из панели запуска первый экран, который пользователь видит экран списка , список растений в их саду. Это тоже последний экран, который они видят перед выходом из приложения. Если они нажмут кнопку «Назад» с экрана списка они возвращаются к средству запуска.

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

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

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

Вверх и Назад идентичны внутри задачи вашего приложения

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

Кнопка «Вверх» появляется на панели приложений в верхней части экрана. экран. В задаче вашего приложения кнопки «Вверх» и «Назад» ведут себя одинаково.

Кнопка «Вверх» никогда не выходит из вашего приложения

Если пользователь находится в месте запуска приложения, кнопка «Вверх» не отображается, потому что кнопка «Вверх» никогда не выходит из приложения. Однако кнопка «Назад» отображается и выходит из приложения.

Когда ваше приложение запускается с использованием глубокой ссылки в задаче другого приложения, Up переводит пользователей обратно в задачу вашего приложения и через смоделированный задний стек, а не к приложению, которое вызвало глубокий связь. Однако кнопка «Назад» возвращает вас к другому приложению.

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

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

Снова используя приложение Sunflower в качестве примера, давайте предположим, что пользователь ранее запускал приложение с экрана запуска и переходил к деталям экран для яблока. Взгляд на экран «Недавние» указывает на то, что существует задача, причем самый верхний экран является экраном подробностей для Apple.

Рисунок 3. Навигация пользователя по приложению Sunflower и результирующий возврат куча.

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

Рисунок 4. Переход по прямой ссылке заменяет существующий задний стек для Приложение подсолнух.

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