Android Navigation(Kotlin)を使う

AndroidでNavigationを使う方法!
これはプロジェクトが始まったときによくやったことで、やるたびに間違えてしまうので、書類を残します.

1.勾配の設定

Androidスタジオでプロジェクトを作成し、その構造を表示する場合、構築に関する事項はGradle Scriptsに集中します.
ここでは主にbuildを使用していますGradleですが同じ名前の子供が2人います
最初のビルドgradeはプロジェクトレベルのgradeです.
2番目のコンストラクション.gradeはモジュールレベルのgradeです.
<プロジェクトの構築.gradle>

buildscript {
    ext.kotlin_version = "1.5.31"
    ext.nav_version = "2.3.5"

    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:7.0.3"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31"

        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

一番上の2つの行使が依存関係を設定する際に必要なバージョンが変数になります.
更新後は変数を変えるだけでとても便利!
プロジェクトのビルド.gradleと宣言しても、モジュールの構築.gradeでも使用できます.
navigationは、パラメータを伝達するためのsafe−argも最初に追加した.
<モジュールの構築.gradle>

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'androidx.navigation.safeargs.kotlin'
}

safe-argに関連するプラグインを追加します.

buildFeatures {
        dataBinding true
        viewBinding true
    }

android{
}
このような部分にbuildFeatures部分を追加するとdataBindingを使用できます.(navigationとは関係ありませんが、これを追加しても一緒に使います!)

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.appcompat:appcompat:1.3.1'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.1'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

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

dependencyにnavigation-fragmentとnavigation-uiを追加しました.(下の2行)
ここで$変数名でバージョンを書くと、さっき宣言した変数をもたらすことができます!
grade設定を変更したら、必ず同期してください

2.切り替えるセグメントの作成

res/layoutフォルダにxmlファイルを作成します.
intro_fragment.xmlとmain fragment.xmlが生成されました.
intro_fragment.xml

main_fragment.xml

intro fragmentでtouch->main fragmentを切り替えてみます.

3.ビューのマージ

xmlを作るだけで画面に表示できるというわけではありません!
activity画面の作成やcottlinファイルの作成と同様にfragment画面を作成してファイルに接続する必要があります.

class IntroFragment : Fragment() {
  private lateinit var binding: IntroFragmentBinding

  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
    binding = IntroFragmentBinding.inflate(inflater, container, false)
    return binding.root
  }
}

分割でビューをマージします.
データバインドを使用するには、xmlを作成するときに、一番外側に<layout>ラベルで包みます!!⭐️
このようにしてのみ、IntroFragmentBindingのようなxml 파일이름 + Binding形式のクラスを作成することができます.

4.ナビゲーショングラフィックの作成

4-1. res/navigationディレクトリの作成

resフォルダにディレクトリを作成し、名前をナビゲーションに設定します.

navigationディレクトリにnavigationファイル(navigation graph)を作成します.
このファイルの名前は影響を受けませんが、ディレクトリ名はnavigationでなければなりません.

4-2. ナビゲーショングラフィックの作成

Navigation Graphは、フラグメントがどのフラグメントに変換され、移動すべきかを示す方法です.

フラグメント

を追加

  <fragment
    android:id="@+id/introFragment"
    android:name="com.example.navigationStudy.scene.IntroFragment"
    android:label="IntroFragment"
    tools:layout="@layout/intro_fragment" />

<fragment>のラベルでクリップを追加できます.id、labelは任意に取ることができ、nameはさっき生成したcottinファイルに関連付けられた属性です.
tools:layoutプロパティを使用してxmlファイルに書き込みます.

さっき生成したxmlファイルが現れました!
いくつかの画面がないときはなくてもいいですが、画面が多ければ多いほど混同されるので、私はいつも追加します.

分割接続
分割を追加した場合は、接続する必要がありますが、これは簡単すぎます.

Fragmentをクリックすると、青いボタンが表示されます.
それを捕まえて、欲しい分割箇所にドラッグします.

矢印が表示されます.
切断完了!
矢印で表示されているので、とても直感的です.
どの画面からでも、どこまでもよく見えます
指定

startDestination
対応するナビゲーショングラフィックの開始点の操作を設定します.
地図アプリでスタート地点を決めるように!

必要な分割を選択し、上のメニューから家屋の形状を選択します.🏠[完了]をクリックします.
(Fragment名の左側に家屋マークが表示されます)
これを設定しないとアプリが死んでしまう(多分...)

5.アクティビティにナビゲーション図面をインプラントする

プロジェクトの作成時に自動的に追加されるactivity main.xmlを返します!
ナビゲーション図をここに置くべきです.
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.fragment.app.FragmentContainerView 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/navHost"
  android:name="androidx.navigation.fragment.NavHostFragment"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:defaultNavHost="true"
  app:navGraph="@navigation/main_navigation"
  tools:context=".MainActivity"></androidx.fragment.app.FragmentContainerView>

FragmentContainerViewは、分割のためにカスタマイズされたレイアウトであり、分割変換を安定して処理できるという利点がある.
属性を表示します.
これは、先ほど作成したナビゲーションマップを設定するapp:navGraphの部分です.

6.タッチ→分割切り替え

intro_fragment.xmlのmain fragment.xmlに移動させるつもりです!
intro_fragment.xml

 override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val action: NavDirections = IntroFragmentDirections.actionIntroFragmentToMainFragment()
    binding.root.setOnClickListener {
      view.findNavController().navigate(action)
    }
  }

この関数は最初に作成した関数とは違います!onViewCreate()..混同しないで!
要するにnavigation graphにinto->main方向が設定されています.val action: NavDirections = IntroFragmentDirections.actionIntroFragmentToMainFragment()これが方向をもたらす部分です.
intro画面で任意のキーを押して移動し、clicklisnerでview.findNavController().navigate(action)矢印の方向に移動します.
⁨⁨の結果は以下の通りである.

かわいい春植賛ー!
小娘春植が美瞳店で買ったかわいいううう
すべてのコード
ここ!で確認できます.
Velogではまだ画像のサイズを調整できないようです.プレビューに適していますが、作成すると非常に大きくなります.😭