[Kotlin] 앱 네비게이션을 통한 프래그먼트 이동

이상목·2024년 5월 28일

kotlin practice

Kotlin

목록 보기

13/20

안녕하세요. 오늘은 코틀린 앱에서 사용하는 기본적인 네비게이션, 프래그먼트에 대해 알아보는 시간을 갖도록 하겠습니다.

1. Nav Host 생성

New - Android Resource File 을 클릭하여 생성 화면을 띄웁니다.

File name을 작성하고, Resource Type을 Navigation으로 지정 후 ok를 누릅니다.
이 때, dependency add 화면이 뜨는데 꼭 추가해 주어야 합니다.

dependencies {
    val nav_version = "2.7.7"

    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.appcompat)
    implementation(libs.material)
    implementation(libs.androidx.activity)
    implementation(libs.androidx.constraintlayout)
    // Kotlin
    implementation("androidx.navigation:navigation-fragment-ktx:$nav_version")
    implementation("androidx.navigation:navigation-ui-ktx:$nav_version")
    testImplementation(libs.junit)
    androidTestImplementation(libs.androidx.junit)
    androidTestImplementation(libs.androidx.espresso.core)
}

add 하게 되면 build.gradle.kts에 추가 됩니다.

만약 add를 하지 않았다면, jetpack에서 찾아서 넣어야 합니다.

2. 생성한 Nav Host 적용

디자인 탭을 클릭합니다.

왼쪽에 Containers - NavHostFragment를 드래그하여 화면에 가져다 놓습니다.

생성해두었던 main_nav를 클릭 후 OK를 누릅니다.

3. main activity layout 구성

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <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:navGraph="@navigation/main_nav"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

2번까지 완료했을 경우 activity_main.xml에 이와 같이 FragmentContainerView 태그가 생깁니다.

4. Fragment 생성

New를 통해 Fragment - blank를 클릭합니다.

이름을 지정해주고 Finish를 클릭하여 첫번째 프래그먼트를 생성해줍니다.

위와 같은 방법으로 프래그먼트를 총 세개까지 만들어줍니다.

package com.sangmoki.nav_fragment

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class FirstFragment : Fragment() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_first, container, false)
    }
}

생성한 프래그먼트 kt 파일로 가서 세 프래그먼트 모두 위 코드의 내용을 제외하고 나머지는 사용하지 않기에 지워줍니다.

5. fragment 구성

5-1. first fragment layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FirstFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp">

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="1"/>

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="2"/>

        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="3"/>

    </LinearLayout>

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30sp"

        android:text="First Fragment" />

</LinearLayout>

second, third 프래그먼트도 동일하게 설정해줍니다.

5-2. first fragment activity

package com.sangmoki.nav_fragment

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import androidx.navigation.findNavController

class FirstFragment : Fragment() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {

        // layout 불러오기
        val view = inflater.inflate(R.layout.fragment_first, container, false)

        // 1번 버튼 클릭 이벤트
        view.findViewById<Button>(R.id.btn1).setOnClickListener {
        }

        // 2번 버튼 클릭 이벤트
        view.findViewById<Button>(R.id.btn2).setOnClickListener {
            // 버튼 클릭 시, SecondFragment로 이동
            it.findNavController().navigate(R.id.action_firstFragment_to_secondFragment)
        }

        // 3번 버튼 클릭 이벤트
        view.findViewById<Button>(R.id.btn3).setOnClickListener {
            it.findNavController().navigate(R.id.action_firstFragment_to_thirdFragment)
        }

        return view
    }
}