Как реализовать компонент навигации Android в Android? (Руководство)

Из этого руководства по компоненту навигации Android вы узнаете:

Что такое навигационный компонент Android Jetpack?
Преимущества навигационного компонента
Когда использовать компонент навигации
Как внедрить компонент навигации Android в ваше приложение

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

Когда дело доходит до компонентов Android, они очень полезны для разработчиков Android при разработке приложения.

Такие компоненты, как Coroutine и Live Data, Data Binding, Paging, ViewModel, Security, Sharing, WorkManager для фоновых заданий, и Навигация — это набор библиотек, которые индивидуально адаптируются и созданы для совместной работы. Среди этих компонентов новыми являются WorkManager, Navigation и Paging. Поэтому мы рассматриваем учебные пособия по этим новым компонентам. Ранее мы рассмотрели WorkManager, а теперь рассмотрим навигацию.

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

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

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

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

Навигационный график: это ресурс XML, который содержит всю информацию, связанную с навигацией, в одном централизованном месте. Он включает в себя все отдельные области контента в вашем приложении, известные как места назначения.
NavHost: пустой контейнер, показывающий пункты назначения из графа навигации. Этот компонент содержит реализацию NavHost по умолчанию, NavHostFragement, которая показывает места назначения фрагментов.
NavController: единый объект, который управляет навигацией приложения в NavHost.

Двигаясь вперед, давайте обсудим преимущества компонента навигации Android Jetpack.

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

Чтобы узнать об этом компоненте, вы можете обратиться к этому Руководство по разработке для Android который выпущен Google. В нашем руководстве по разработке приложений для Android вы узнаете, как реализовать компонент навигации в своем приложении для Android.

Давайте начнем

Шаг 1: Прежде всего, добавьте зависимость в файл Gradle модуля приложения (build.gradle).

dependencies {
def nav_version = "2.1.0"

// navigation
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
}

Шаг 2: В окне проекта или Android щелкните правой кнопкой мыши каталог res и создайте новый каталог ресурсов Android с типом ресурса в качестве навигации и добавьте новый файл ресурсов навигации и назовите его как хотите, таким образом будет создан ваш навигационный график.

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

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

Нажмите на Текст вкладку, чтобы увидеть соответствующий XML навигационного графа

Шаг 3: Теперь возьмите один фрагмент в MainActivity, в котором вы хотите перейти к другим фрагментам.

<fragment
   android:id="@+id/nav_host"
   android:name="androidx.navigation.fragment.NavHostFragment"
   android:layout_width="match_parent"
   app:defaultNavHost="true"
   app:navGraph="@navigation/nav_graph"
   android:layout_height="match_parent"
   />

Шаг 4: Теперь создайте еще один пустой фрагмент для перехода от домашнего фрагмента к вновь созданному фрагменту.

Шаг 5: Теперь добавьте оба фрагмента в Navigation Graph, как показано на рисунке.

Навигационный компонент Android

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

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

Шаг 6: Теперь в домашнем фрагменте выполните следующий код для события клика соответствующего представления, чтобы перейти к следующему фрагменту.

class HomeFragment : Fragment() {

   override fun onCreateView(
       inflater: LayoutInflater, container: ViewGroup?,
       savedInstanceState: Bundle?
   ): View? {
       val view = inflater.inflate(R.layout.fragment_home, container, false)

       if (view != null) {
           init(view)
       }

       return view
   }

   private fun init(view: View?) {

       view?.findViewById(R.id.tvShowAll)?.setOnClickListener {
//            val bundle = bundleOf("userText" to "John Connor")
           Navigation.findNavController(view).navigate(R.id.action_homeActivity_to_allFragment)
       }
 view?.findViewById(R.id.tvShowBikes)?.setOnClickListener {
           val bundle = bundleOf("userText" to "Jack Sparrow")
           Navigation.findNavController(view).navigate(R.id.action_homeActivity_to_bikesFragment, bundle)
       }

       view?.findViewById(R.id.tvShowCars)?.setOnClickListener {
           Navigation.findNavController(view).navigate(R.id.action_homeActivity_to_carsFragment)
       }

       view?.findViewById(R.id.tvShowTrucks)?.setOnClickListener {
           Navigation.findNavController(view).navigate(R.id.action_homeActivity_to_trucksFragment)
       }
   }
}

Шаг 7: После добавления 3-4 фрагментов в ваш проект и добавления их всех в навигационный граф дизайн вашего навигационного графа будет выглядеть примерно так.

Навигационный компонент Android

И текстовый (XML) файл вашего навигационного графа будет выглядеть примерно так.

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="
   xmlns:app="
   xmlns:tools="
   android:id="@+id/nav_graph"
   app:startDestination="@+id/homeFragment">

   <fragment
       android:id="@+id/homeFragment"
       android:name="com.spaceo.testconfirm.navigationgraphdemo.Views.HomeFragment"
       android:label="fragment_home"
       tools:layout="@layout/activity_home">
       <action
           android:id="@+id/action_homeActivity_to_carsFragment"
           app:destination="@id/carsFragment"
           app:popEnterAnim="@anim/nav_default_pop_enter_anim"
           app:popExitAnim="@anim/nav_default_pop_exit_anim"
           app:popUpTo="@id/carsFragment" />
       <action
           android:id="@+id/action_homeActivity_to_allFragment"
           app:destination="@id/allFragment"
           app:enterAnim="@anim/nav_default_enter_anim"
           app:exitAnim="@anim/nav_default_exit_anim"
           app:popUpTo="@id/allFragment" >

<argument
               android:name="userText"
               app:argType="string"
               android:defaultValue="Hello World 2" />
       </action>
       <action
           android:id="@+id/action_homeActivity_to_bikesFragment"
           app:destination="@id/bikesFragment"
           app:popUpTo="@id/bikesFragment" />
       <action
           android:id="@+id/action_homeActivity_to_trucksFragment"
           app:destination="@id/trucksFragment"
           app:popUpTo="@id/trucksFragment" />

   </fragment>


   <fragment
       android:id="@+id/bikesFragment"
       android:name="com.spaceo.testconfirm.navigationgraphdemo.Views.BikesFragment"
       android:label="fragment_bikes"
       tools:layout="@layout/fragment_bikes" >
       <argument
           android:name="userText"
           app:argType="string"
           android:defaultValue="Hello World3" />
   </fragment>
   <fragment
       android:id="@+id/carsFragment"
       android:name="com.spaceo.testconfirm.navigationgraphdemo.Views.CarsFragment"
       android:label="fragment_cars"
       tools:layout="@layout/fragment_cars" >
       <argument
           android:name="userText"
           app:argType="string"
           android:defaultValue="Hello World1" />
   </fragment>
   <fragment
       android:id="@+id/trucksFragment"
       android:name="com.spaceo.testconfirm.navigationgraphdemo.Views.TrucksFragment"
       android:label="fragment_trucks"
       tools:layout="@layout/fragment_trucks" />
   <fragment
       android:id="@+id/allFragment"
       android:name="com.spaceo.testconfirm.navigationgraphdemo.Views.AllFragment"
       android:label="fragment_all"
       tools:layout="@layout/fragment_all">
   </fragment>
</navigation>

Выход:

Andorid Navigation Graph Demo.png

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

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

Что такое навигация?

Преимущества компонента навигации Android

Давайте начнем