Из этого учебного руководства по компонентам навигации для Android вы узнаете:
- Что такое навигационный компонент Android Jetpack?
- Преимущества навигационного компонента.
- Когда использовать компонент навигации.
- Как реализовать компонент навигации Android в вашем приложении.
Вы, должно быть, много слышали об Android Jetpack, который представляет собой набор компонентов, инструментов и рекомендаций для создания великолепных приложений для Android.
Когда речь заходит о компонентах Android, они очень полезны для разработчиков Android при разработке приложения.
Компоненты, такие как сопрограммы и оперативные данные, привязка данных , пейджинг, ViewModel, безопасность, общий доступ, WorkManager для фоновых заданий и навигация, представляют собой набор библиотек, которые можно индивидуально адаптировать и создавать для совместной работы. Среди этих компонентов WorkManager, Navigation и Paging являются новыми. Поэтому мы рассматриваем учебные пособия по этим новым компонентам. Ранее мы рассмотрели WorkManager, а теперь мы рассмотрим навигацию.
Что такое навигация?
Как правило, навигация относится к взаимодействиям, позволяющим пользователям перемещаться между различными частями контента в вашем приложении и обратно.
Недавно запущенный компонент Navigation для Android Jetpack запускается в качестве основы для структурирования пользовательского интерфейса в приложении, уделяя особое внимание созданию единого приложения для действий. От простого нажатия кнопок до сложных шаблонов, таких как панели приложений и панель навигации, этот компонент помогает реализовать навигацию.
Кроме того, этот компонент также обеспечивает согласованное и предсказуемое взаимодействие с пользователем, придерживаясь установленного набора принципов. Он состоит из трех частей:
- График навигации . Это ресурс XML, в котором вся информация, связанная с навигацией, находится в одном централизованном месте. Он включает в себя все отдельные области содержимого в вашем приложении, известные как пункты назначения.
- NavHost : пустой контейнер, показывающий места назначения из графика навигации. Этот компонент содержит реализацию NavHost по умолчанию и NavHostFragement, который показывает места назначения фрагмента.
- NavController : один объект, который управляет навигацией приложения в NavHost.
Продвигаясь вперед, давайте обсудим преимущества навигационного компонента Android Jetpack .
Вам также может понравиться:
Архитектура приложения Android: Модуляризация, Чистая архитектура, MVVM .
Преимущества навигационного компонента Android
- Он легко обрабатывает фрагменты транзакций с помощью доступного API.
- Это позволяет пользователям проверять поток приложения через график навигации.
- Он предоставляет стандартизированные ресурсы для анимации и переходов.
- Он реализует и обрабатывает глубокие ссылки.
- По умолчанию он корректно обрабатывает действия вверх и назад.
Чтобы узнать об этом компоненте, вы можете обратиться к этому руководству по разработке Android, которое было выпущено Google. В нашем руководстве по разработке приложений для Android вы узнаете, как реализовать компонент «Навигация» в своем приложении для Android.
Давайте начнем
Шаг 1
Прежде всего, добавьте зависимость в файл приложения Gradle (build.gradle).
Groovy
xxxxxxxxxx
1
dependencies { def nav_version = "2.1.0"
2
// navigation implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
3
implementation "androidx.navigation:navigation-ui-ktx:$nav_version" }
Шаг 2
В окне Project или Android щелкните правой кнопкой мыши каталог res и создайте новый каталог ресурсов Android с типом ресурса as Navigation. Затем добавьте новый файл ресурсов навигации и назовите его как хотите; Таким образом, ваш график навигации будет создан.
Ваш навигационный график будет содержать три основных раздела:
- Панель «Назначения»: список хостов навигации и всех пунктов назначения, находящихся в данный момент в редакторе графиков.
- Graph Editor : Содержит визуальное представление навигационного графа. Вы можете переключаться между представлением «Дизайн» и базовым представлением XML в представлении «Текст».
- Атрибуты : Показывает атрибуты для выбранного в данный момент элемента на графике навигации.
Перейдите на вкладку « Текст », чтобы увидеть соответствующий XML навигационного графика.
Шаг 3
Теперь возьмите один фрагмент в вашей MainActivity, в котором вы хотите перейти к другим фрагментам.
XML
xxxxxxxxxx
1
<fragment
2
android:id="@+id/nav_host"
3
android:name="androidx.navigation.fragment.NavHostFragment"
4
android:layout_width="match_parent"
5
app:defaultNavHost="true"
6
app:navGraph="@navigation/nav_graph"
7
android:layout_height="match_parent"
8
/>
Шаг 4
Теперь создайте еще один пустой фрагмент, чтобы перейти от домашнего фрагмента к вновь созданному фрагменту.
Шаг 5
Теперь добавьте оба фрагмента в навигационный график.
Вы можете добавить Action, Arguments и Deep-links из самой Navigation, что поможет передавать данные между фрагментом при переключении.
Все действия будут определять переход и пункт назначения (т. Е. Маршрут приложения через навигацию). Аргументы будут определять значение по умолчанию для определенного ключа, а Deep-links будут перенаправлять пользователя на определенный экран в приложении.
Шаг 6
Теперь, во Домашнем фрагменте, добавьте следующий код в событие щелчка в соответствующем представлении, чтобы перейти к следующему фрагменту.
Котлин
x
1
class HomeFragment : Fragment() {
2
override fun onCreateView(
3
inflater: LayoutInflater,
4
container: ViewGroup?,
5
savedInstanceState: Bundle?
6
): View? {
7
val view = inflater.inflate(R.layout.fragment_home, container, false)
8
if (view != null) {
9
init(view)
10
}
11
12
return view
13
}
14
15
private fun init(view: View?) {
16
view?.findViewById(R.id.tvShowAll)?.setOnClickListener {
17
val bundle = bundleOf("userText" to "John Connor")
18
19
Navigation.findNavController(view).navigate(
20
R.id.action_homeActivity_to_allFragment)
21
}
22
23
view?.findViewById(R.id.tvShowBikes)?.setOnClickListener {
24
val bundle = bundleOf("userText" to "Jack Sparrow")
25
Navigation.findNavController(view).navigate(
26
R.id.action_homeActivity_to_bikesFragment, bundle)
27
}
28
29
view?.findViewById(R.id.tvShowCars)?.setOnClickListener {
30
Navigation.findNavController(view).navigate(
31
R.id.action_homeActivity_to_carsFragment)
32
}
33
34
view?.findViewById(R.tvShowTrucks)?.setOnClickListener {
35
Navigation.findNacController(view).navigate(
36
R.id.action.homeActivity_to_trucksFragment)
37
}
38
39
}
40
}
Шаг 7: После добавления 3-4 фрагментов в ваш проект и добавления всех их в график навигации, дизайн вашего графика навигации и текстовый (XML) файл вашего графика навигации будут выглядеть примерно так:
Джава
1
<?xml version="1.0" encoding="utf-8"?>
2
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
3
xmlns:app="http://schemas.android.com/apk/res-auto"
4
xmlns:tools="http://schemas.android.com/tools"
5
android:id="@+id/nav_graph"
6
app:startDestination="@+id/homeFragment">
7
<fragment
9
android:id="@+id/homeFragment"
10
android:name="com.spaceo.testconfirm.navigationgraphdemo.Views.HomeFragment"
11
android:label="fragment_home"
12
tools:layout="@layout/activity_home">
13
<action
14
android:id="@+id/action_homeActivity_to_carsFragment"
15
app:destination="@id/carsFragment"
16
app:popEnterAnim="@anim/nav_default_pop_enter_anim"
17
app:popExitAnim="@anim/nav_default_pop_exit_anim"
18
app:popUpTo="@id/carsFragment" />
19
<action
20
android:id="@+id/action_homeActivity_to_allFragment"
21
app:destination="@id/allFragment"
22
app:enterAnim="@anim/nav_default_enter_anim"
23
app:exitAnim="@anim/nav_default_exit_anim"
24
app:popUpTo="@id/allFragment" >
25
<argument
26
android:name="userText"
27
app:argType="string"
28
android:defaultValue="Hello World 2" />
29
</action>
30
<action
31
android:id="@+id/action_homeActivity_to_bikesFragment"
32
app:destination="@id/bikesFragment"
33
app:popUpTo="@id/bikesFragment" />
34
<action
35
android:id="@+id/action_homeActivity_to_trucksFragment"
36
app:destination="@id/trucksFragment"
37
app:popUpTo="@id/trucksFragment" />
38
</fragment>
40
41
<fragment
42
android:id="@+id/bikesFragment"
43
android:name="com.spaceo.testconfirm.navigationgraphdemo.Views.BikesFragment"
44
android:label="fragment_bikes"
45
tools:layout="@layout/fragment_bikes" >
46
<argument
47
android:name="userText"
48
app:argType="string"
49
android:defaultValue="Hello World3" />
50
</fragment>
51
<fragment
52
android:id="@+id/carsFragment"
53
android:name="com.spaceo.testconfirm.navigationgraphdemo.Views.CarsFragment"
54
android:label="fragment_cars"
55
tools:layout="@layout/fragment_cars" >
56
<argument
57
android:name="userText"
58
app:argType="string"
59
android:defaultValue="Hello World1" />
60
</fragment>
61
<fragment
62
android:id="@+id/trucksFragment"
63
android:name="com.spaceo.testconfirm.navigationgraphdemo.Views.TrucksFragment"
64
android:label="fragment_trucks"
65
tools:layout="@layout/fragment_trucks" />
66
<fragment
67
android:id="@+id/allFragment"
68
android:name="com.spaceo.testconfirm.navigationgraphdemo.Views.AllFragment"
69
android:label="fragment_all"
70
tools:layout="@layout/fragment_all">
71
</fragment>
72
</navigation>
Вывод
Заключение
Из этого руководства вы узнали, как реализовать компонент навигации Android Jetpack в вашем приложении Android. Однако вы также проверили основную информацию об этом компоненте, например, что это такое и о преимуществах этого компонента.
Следуя этому пошаговому руководству, вы можете без проблем реализовать компонент навигации Android. На самом деле, вы можете обратиться к этой демонстрации и скачать исходный код с Github .