jetpack navigation

처음 바텀 네비게이션을 만들어보았는데 jetpack을 이용해서 만들었다!.!

gradle에 jetpack 의존성 작성해주기

implementation("androidx.navigation:navigation-fragment-ktx:2.6.0")
implementation("androidx.navigation:navigation-ui-ktx:2.6.0")

바텀 네비게이션의 아이템으로 들어갈 프래그먼트 생성 (fragment.xml)

총 세개의 프래그먼트 화면을 만들었다.
버튼이 들어간 화면을 만들었고 이에 대한 코드는 생략...

Navigation Graph 작성

res/navigation/nav_graph 를 만들어주었다.

res 폴더에 마우스 우클릭하여 New > Android resource file 을 선택한다.
resource type을 navigation이라고 지정하고 Navigation 그래프 파일 이름을 작성한다.

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
	
    //초기에 보여줄 화면을 지정
    app:startDestination="@id/firstFragment"
    xmlns:tools="http://schemas.android.com/tools">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.example.kukathonproject.FirstFragment"
        android:label="FirstFragment"
        tools:layout="@layout/fragment_first">
        
        //액션에는 어디로 이동하는지 정의
        <action
            android:id="@+id/action_firstFragment_to_secondFragment2"
            app:destination="@id/secondFragment" />
        <action
            android:id="@+id/action_firstFragment_to_thirdFragment2"
            app:destination="@id/thirdFragment" />
    </fragment>
    
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.kukathonproject.SecondFragment"
        android:label="SecondFragment"
        tools:layout="@layout/fragment_second"/>
    <fragment
        android:id="@+id/thirdFragment"
        android:name="com.example.kukathonproject.ThirdFragment"
        android:label="ThirdFragment"
        tools:layout="@layout/fragment_third"/>
</navigation>

activity_main.xml

Root Activity를 지정해주었다. 여기서는 MainActivity를 Root Activity로!!

• android:name NavHostFragment 라는 것을 명시, 즉 화면을 담을 빈 컨테이너 역할을 수행할 것임을 알린다.
• app:defaultNavHost 위의 NavGraph 에서 명시한 시작점을 백스택에 추가한다. 쉽게 이야기하면, 다른 화면에서 뒤로가기 버튼을 누르면 시작점으로 돌아오게 만든다. (StartDestination -> B -> 백 버튼 -> StartDestination)
• app:navGraph 현재 NavHost 와 위에서 지정한 NavGraph 를 연결해주는 역할을 수행한다.

처음에 app:navGraph 을 명시해주지 않았더니 프래그먼트 화면이 뜨지 않았다..

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    //프래그먼트 컨테이너 
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment_container"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_navi"
        app:navGraph="@navigation/nav_graph" />

    
     //바텀 네비게이션이 들어가는 자리
     //메뉴를 연결해주기
 	<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navi"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_navi_item"
        app:itemRippleColor="@null"
        app:itemActiveIndicatorStyle="@null"
        app:itemIconTint="@color/black"
        android:background="@color/white" />

</androidx.constraintlayout.widget.ConstraintLayout>

바텀 네비게이션에 들어가는 메뉴 만들기

res/menu 폴더 아래에 menu 및 item 태그가 포함된 XML 파일을 생성

** item의 아이디랑 Navigation Graph의 프래그먼트 아이디랑 같아야함!!

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/firstFragment"
        android:title="first" />
    <item
        android:id="@+id/secondFragment"
        android:title="second" />
    <item
        android:id="@+id/thirdFragment"
        android:title="third" />

</menu>

MainActivity 에서

class MainActivity : AppCompatActivity() {

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

        val navHostFragment =
            supportFragmentManager.findFragmentById(R.id.fragment_container) as NavHostFragment
        
        val navController = navHostFragment.navController
        findViewById<BottomNavigationView>(R.id.bottom_navi)
            .setupWithNavController(navController)

    }
}

바텀 아이콘 클릭시 색상 변경

1. drawable → New → Drawable Resource File에서 bottom_navigation_color.xml를 생성

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 클릭했을 경우 -->
    <item android:state_checked="true" android:color="@color/yellow" />
    <!-- 클릭하지 않은 경우 -->
    <item android:state_checked="false" android:color="@color/red" />
</selector>

android:state_checked 속성을 통해 클릭되었을 경우와 클릭되지 않은 경우를 구분!!

2. activity_main.xml

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="0dp"
        android:layout_height="56dp"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_navigation" 
        app:itemTextColor="@drawable/bottom_navigation_color"
        app:itemIconTint="@drawable/bottom_navigation_color"/>

itemIconTint를 위에서 만든 xml파일로 bottom_navigation_color로 설정해줌