[AndroidStudio] 네비게이션을 활용하는 방법 with kotlin

오늘은 앱 개발을 하다보면 가장 많이 사용하게 되는 네비게이션을 하는 방법을 알아보겠다.

참고로!!!!!! 이건 본격적인 앱 개발을 하기 전 만드는게 좋다! 안그러면 헷갈리고 복잡하게 느껴질 수 있다. 꼭 본격적으로 xml 구성 전, 미리 구성하는 것을 매우 추천한다.(경험담이다)

 

 

1. build.gradle 에 라이브러리 추가

 

dependencies {
    implementation("androidx.navigation:navigation-fragment-ktx:2.7.6")
    implementation("androidx.navigation:navigation-ui-ktx:2.7.6")
    implementation("com.google.android.material:material:1.10.0")
}

 

• navigation-fragment-ktx → Fragment 간의 네비게이션을 쉽게 관리
• navigation-ui-ktx → BottomNavigationView와 함께 네비게이션을 간편하게 처리
• material → BottomNavigationView 같은 머터리얼 디자인 UI 사용

2. 3개의 Fragment 생성

 

여기서 프래그먼트란, 나는 우선 검색, 홈, 좋아하는 페이지 이렇게 총 3개의 프래그먼트를 이용해서 만들 것이다! 

쉽게 생각하면 3개의 화면 각각이 프래그먼트라고 볼 수 있는 것이다! 이걸 잘 생각해야 한다:)

inflater.inflate는 xml를 실제 view 객체로 변환시키는 메서드이고 container는 부모 뷰그룹이 들어갈 자리임.

그렇다면, 왜 객체로 변환을 해야할까? 바로, xml는 화면을 어떻게 정의한 코드이고, 이를 눈에 보이는 뷰로 옮겨야 하기 때문이야.

 

Home.kt

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

class HomeFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return inflater.inflate(R.layout.fragment_home, container, false)
    }
}

 

FavoriteFragment.kt

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

class FavoriteFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return inflater.inflate(R.layout.fragment_favorite, container, false)
    }
}

 

SearchFragment.kt

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

class SearchFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return inflater.inflate(R.layout.fragment_search, container, false)
    }
}

 

3. activity_main.xml에서 BottomNavigationView추가

 

 

• FrameLayout → 선택된 Fragment가 표시될 영역
• BottomNavigationView → 하단 네비게이션 메뉴 추가
• app:menu="@menu/bottom_nav_menu" → 메뉴 아이템 설정

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Fragment를 표시할 영역 -->
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 하단 네비게이션 바 -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_nav_menu" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

 

4. menu.bottom_nav_menu.xml 생성

 

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/navigation_favorite"
        android:icon="@drawable/ic_favorite"
        android:title="Favorite" />
    <item
        android:id="@+id/navigation_search"
        android:icon="@drawable/ic_search"
        android:title="Search" />
</menu>

 

 

하단, 메뉴바를 만든다라고 생각하면 돼! 

나는 이미지를 추가적으로 가져오기 애매해서, drawable 폴더에서 =>   Vector Asset → 아이콘 선택 → drawable 폴더에 추가했어

 

5.MainActivity.kt에서 Fragment 전환 기능 구현

 

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottom_navigation)

        // 앱 실행 시 기본 화면을 HomeFragment로 설정
        if (savedInstanceState == null) {
            supportFragmentManager.beginTransaction()
                .replace(R.id.fragment_container, HomeFragment())
                .commit()
        }

        // BottomNavigationView 클릭 리스너 설정
        bottomNavigationView.setOnItemSelectedListener { item ->
            val selectedFragment: Fragment = when (item.itemId) {
                R.id.navigation_home -> HomeFragment()
                R.id.navigation_favorite -> FavoriteFragment()
                R.id.navigation_search -> SearchFragment()
                else -> HomeFragment()
            }

            // 선택된 Fragment로 화면 전환
            supportFragmentManager.beginTransaction()
                .replace(R.id.fragment_container, selectedFragment)
                .commit()

            true
        }
    }
}

 

바닥에 있는 네비게이션 뷰를 가져온 뒤, 클릭 이벤트를 통해 화면 이동을 할 수 있게 함.

 

실행화면

 

+ 추가적인 오류 상황....

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.cookandroid.a0312/com.cookandroid.a0312.MainActivity}: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.

 

정말 간단한 건데... 2주만에 했다고 이런 가벼운 오류를 해결하는데 10분이나 썼다..  이걸 보고, manifest에서

android:theme="@style/Theme.AppCompat.Light.DarkActionBar"

이렇게 변경했는데... 세상에... res/values/themes.xml 도 같이 바꾸어주어야 한다는 것을 깜박했다.. 여러분들은 절대 그러지 않기를 바란다..

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme._0312" parent="Theme.AppCompat.Light.NoActionBar">

    </style>
</resources>

 

 

깃허브 : https://github.com/KateteDeveloper/BottomNavigation/tree/master