Краткое руководство по навигации
Привет, я нашел время поделиться этими небольшими знаниями об Android Studio, так как я чувствовал, что информации об этом не так много, следует отметить, что здесь есть официальная документация, я пытаюсь объяснить, как это сделать. Мне бы хотелось, чтобы кто-нибудь объяснил мне, мы увидим следующие темы:
- Создайте новый проект Android Studio.
- Добавление необходимых зависимостей
- Краткое объяснение График навигации
- Как перейти от одной судьбы вашего приложения к другой
Чтобы понять некоторые вещи, вам понадобятся базовые знания об Android Studio, но не волнуйтесь, я объясню шаг за шагом.
Пойдем!
Создание нового проекта
Откройте Android Studio и нажмите Создать › Новый проект › Базовые представления.
Название нашего проекта будет: Курс навигационного графика, затем мы нажимаем «Готово».
Файлы для этого примера
Выполнение предыдущего шага создаст для вас несколько файлов, давайте опишем их:
Внутри папки вашего пакета:
- ПервыйФрагмент.kt
- MainActivity.kt
- MainFragment.kt
- ВторойФрагмент.kt
Внутри папки res/layout:
- Activity_main.xml
- content_main.xml — мы удалим этот и создадим другой под названием: fragment_main.xml, я объясню, как это сделать позже в этом посте.
- фрагмент_первый.xml
- фрагмент_секунды.xml
Давайте отредактируем некоторые файлы, скопируем и вставим содержимое каждого файла:
activity_main.xmlсодержимое:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragmentContainerView"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
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/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>
Давайте создадим новый фрагмент под названием fragment_main.xml:.
Выполните следующие действия:
- Щелкните правой кнопкой мыши в пакете Java New › Fragment › Blank.
- Появится диалоговое окно, затем мы пишем это в поле имени: MainFragment, и в имя файла макета, которое мы используем: фрагмент_main.xml.
- Нажмите «Готово» и вперед!
fragment_main.xmlсодержимое:
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<Button
android:id="@+id/go_to_first_fragment"
android:text="Go to first fragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/go_to_second_fragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go to second fragment"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/go_to_first_fragment"
app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
Содержимое fragment_first.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<Button
android:id="@+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="Back"
app:layout_constraintBottom_toTopOf="@id/textview_first"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textview_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:textSize="24sp"
android:text="First fragment, you made it!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/back_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
fragment_ Second.xmlсодержимое:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SecondFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<Button
android:id="@+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="Back"
app:layout_constraintBottom_toTopOf="@id/textview_second"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textview_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:textSize="24sp"
android:text="Second fragment, You made it!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/back_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Теперь перейдем к файлам Kotlin:
ВАЖНОЕ ПРИМЕЧАНИЕ.При копировании и вставке имейте в виду, что имя вашего пакета может отличаться от того, которое мы используем в этих примерах, поэтому замените com.aletorres.navigationgraphcourse на свое правильное. имя пакета.
MainActivity.kt: Основное действие экрана, содержимое:
package com.aletorres.navigationgraphcourse
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.WindowCompat
import com.aletorres.navigationgraphcourse.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
WindowCompat.setDecorFitsSystemWindows(window, false)
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
}
}
MainFragment.kt: этот файл связан с файлом макета: fragment_main.xml, мы создали его на предыдущем шаге, содержимое:
package com.aletorres.navigationgraphcourse
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.navigation.fragment.findNavController
import com.aletorres.navigationgraphcourse.databinding.FragmentMainBinding
class MainFragment : Fragment() {
private lateinit var binding: FragmentMainBinding
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
binding = FragmentMainBinding.inflate(inflater, container, false)
binding.goToFirstFragment.setOnClickListener{
findNavController().navigate(R.id.action_mainFragment_to_FirstFragment) // This function makes possible the navigation
}
binding.goToSecondFragment.setOnClickListener {
findNavController().navigate(R.id.action_mainFragment_to_SecondFragment) // This function makes possible the navigation
}
return binding.root
}
}
FirstFragment.kt: этот файл связан с файлом макета: fragment_first.xml, content:
package com.aletorres.navigationgraphcourse
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.navigation.fragment.findNavController
import com.aletorres.navigationgraphcourse.databinding.FragmentFirstBinding
class FirstFragment : Fragment() {
private lateinit var binding: FragmentFirstBinding
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
binding = FragmentFirstBinding.inflate(inflater, container, false)
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.backButton.setOnClickListener {
findNavController().navigate(R.id.action_FirstFragment_to_mainFragment) // This function makes possible the navigation
}
}
}
SecondFragment.kt:этот файл связан с файлом макета:фрагмент_секунды.xml, контент:
package com.aletorres.navigationgraphcourse
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.navigation.fragment.findNavController
import com.aletorres.navigationgraphcourse.databinding.FragmentSecondBinding
class SecondFragment : Fragment() {
private lateinit var binding: FragmentSecondBinding
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
binding = FragmentSecondBinding.inflate(inflater, container, false)
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.backButton.setOnClickListener {
findNavController().navigate(R.id.action_SecondFragment_to_mainFragment) // This function makes possible the navigation
}
}
}
Вот и все с файлами
Настройте свою среду
Пожалуйста, давайте включим поддержку навигации в ваш проект. Давайте скопируем этот код в ваш файл app/build.gradle:
dependencies {
implementation 'androidx.core:core-ktx:1.8.0'
implementation 'androidx.appcompat:appcompat:1.6.1'
implementation 'com.google.android.material:material:1.5.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
implementation 'androidx.navigation:navigation-fragment-ktx:2.7.0'
implementation 'androidx.navigation:navigation-ui-ktx:2.7.0'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.5'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
def nav_version = "2.5.3"
// Java language implementation
implementation "androidx.navigation:navigation-fragment:$nav_version"
implementation "androidx.navigation:navigation-ui:$nav_version"
// Kotlin
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
// Feature module Support
implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"
// Testing Navigation
androidTestImplementation "androidx.navigation:navigation-testing:$nav_version"
// Jetpack Compose Integration
implementation "androidx.navigation:navigation-compose:$nav_version"
}
Таким образом мы гарантируем наличие необходимых зависимостей.
ВАЖНОЕ ПРИМЕЧАНИЕ. После этого шага синхронизируйте зависимости проекта.
Навигационный график
Навигация происходит между судьбами приложения, эти судьбы связаны действиями.
Навигационный график – это файл, содержащий все ваши судьбы и действия.
Немного теории, прежде чем продолжить:
Что такое судьба?
Это может быть представление вашего приложения, например: фрагмент, содержащий вашу логику для входа в ваше приложение, или страницу приветствия, или панель управления и т. д.
Что такое действие?
Это логические связи между вашими пунктами назначения, они представляют путь, по которому пользователи могут идти в вашем приложении.
Версия навигационного графа
При создании нового проекта файл с именем nav_graph, расположенный в папке res/navigation, был создан с помощью базового шаблона активности представлений, перейдем к файлу nav_graph.xml .
Перейдем к местоположению файла nav_graph.xml. Дважды щелкните этот файл левой кнопкой мыши, после этого мы должны оказаться на экране навигационного графика, нажмите Новое место назначения и выберите наш три фрагмента один за другим:
- ГлавныйФрагмент
- ПервыйФрагмент
- ВторойФрагмент
Давайте последуем этому графическому примеру, чтобы создать наши судьбы и действия:
Теперь, на последнем этапе, давайте посмотрим на результат выполнения всего этого шаг за шагом, запустив наше приложение в Android Studio.
Результат
Вероятно, мы пропустили какой-то предыдущий шаг (дерьмо случается, хе-хе), на случай, если я сделал репозиторий только для этого примера графа навигации, там вы найдете весь исходный код, который используется для этого поста.
https://github.com/IIalejoII/navigation-graph-course
Спасибо за ваше время!
Скоро думаю выложить это как видео
Мой канал на YouTube: @aletorres1102
