[Android] JetPack Navigation으로 Bottom Navigation 설정하기
안드로이드를 공부하면서 간단한 화면 전환은 intent로 구현했었다.
하지만 레이아웃이 복잡해질수록 코드가 길어지며 가독성이 떨어지는 문제점을 확인할 수 있었다.
이 경우를 해결하기 위해 JetPack Navigation이 등장하였다.
네비게이션을 사용하면 한 눈에 볼 수 있는 화면들과, 프래그먼트의 이동을 더욱 쉽게 구현할 수 있는 장점이 있다.
Navigation 설정하기
//네비게이션
def nav_version = '2.4.1'
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"build.gradle 파일에 필요한 라이브러리를 추가해준다.
이 부분은 안드로이드 개발 공식 사이트에 제공되어 있다.
또한 plugins에 다음을 추가해주고,
// 네비게이션
id 'androidx.navigation.safeargs.kotlin'dependencies에 마지막으로 다음 코드를 추가해주고 sync now를 눌러주면 셋팅은 끝이난다.
def nav_version = "2.4.1"
classpath("androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version")그 다음 res -> android resource file -> type 에서 다음과 같이 navigation을 선택하고 생성하면
res -> navigation 폴더 안에 navigation graph가 생성된다.
다음 그래프 파일에 접속하여 다음 그림의 버튼을 누르면 구현되어있는 프래그먼트와 액티비티 파일들을 볼 수 있다.
이렇게 activity파일들과 fragment파일들을 확인할 수 있다.
하지만 위의 그림과 같이 mainActivity파일은 ? 로 되어있고 인식을 하지 못하고 있다.
tools:context=".HomeActivity"이렇게 각각의 파일위에 클래스와 연결, 인식할 수 있는 클래스 파일의 위치를 연결해주어야한다.
이렇게 각각의 클래스 파일에 연결을 해주었으면 바텀네비게이션을 만들어보자.
전 게시물과 같이 액티비티를 하나 구성하여 바텀네비게이션 뷰를 작성해보자.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/my_bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bottom_nav_background"
app:menu="@menu/bottom_nav_menu"
app:labelVisibilityMode="labeled"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>액티비티.xml 파일에 적어주었으면 menu에 바텀네비게이션의 아이템 구성요소를 추가해주자
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/homeFragment"
android:title="홈"
android:icon="@drawable/bottom_nav_home_selector"
/>
<item
android:id="@+id/searchFragment"
android:title="검색"
android:icon="@drawable/search_logo"
/>
<item
android:id="@+id/diaryFragment"
android:title="다이어리"
android:icon="@drawable/diary_logo"
/>
<item
android:id="@+id/myInfoFragment"
android:title="내프로필"
android:icon="@drawable/my_info_logo"
/>
</menu>이 때 주의해야할 점이 있다!!
꼭 nav_graph 파일에 있는 id와 여기 있는 아이템의 id이름이 꼭 같아야한다!
아니면 nav_graph와 바텀네비게이션이 연결이 되지 않는다.
<navigation 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/nav_graph"
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name="com.cookandroid.teamproject1.HomeFragment"
android:label="fragment_home"
tools:layout="@layout/fragment_home" />
<fragment
android:id="@+id/searchFragment"
android:name="com.cookandroid.teamproject1.SearchFragment"
android:label="fragment_search"
tools:layout="@layout/fragment_search" />
<fragment
android:id="@+id/diaryFragment"
android:name="com.cookandroid.teamproject1.DiaryFragment"
android:label="fragment_diary"
tools:layout="@layout/fragment_diary" />
<fragment
android:id="@+id/myInfoFragment"
android:name="com.cookandroid.teamproject1.MyInfoFragment"
android:label="fragment_my_info"
tools:layout="@layout/fragment_my_info" />
</navigation>이렇게 navigation에 있는 파일들의 프래그먼트들의 id와 바텀네비게이션에 있는 아이템들의 id가 같아야지 연결이 가능하다.
그리고 위의 코드를 보면 startDestination이라고 되어있는데, 이는 액티비티가 실행될 때 첫 프래그먼트의 시작을 정의하는 코드이다.
이제 액티비티 파일에가서 다음의 코드를 작성하기만 하면 끝이다!
//네비게이션들을 담는 호스트
val navHostFragment = supportFragmentManager.findFragmentById(R.id.my_nav_host) as NavHostFragment
//네비게이션 컨트롤러
val navController = navHostFragment.navController
//바텀 네비게이션 뷰와 네비게이션을 묶어준다.
NavigationUI.setupWithNavController(mbinding.myBottomNav, navController)여기서 my_nav_host는 액티비티 파일안에서 프래그먼트들이 보여질 뷰의 id이다.
그것을 navHost에 담아 컨트롤러를 생성한 다음
바텀네비게이션과 묶어주면 성공!!!
전 게시물과 비교하면 각각의 버튼마다 클릭리스터 이벤트를 부여해서 코드를 작성하는 것보다
이렇게 JetPack네비게이션을 사용하면 더욱 간결해진다!!