[Android Studio] fragment 사용법 3 (bottom navigation)

오늘은 bottom navigation을 사용하여 fragment를 교체하는 방법에 대해 공부해보려 한다.

 

이전 포스팅과 동일하게 main activity에 NavHostFragment를 넣는 것 부터 시작한다.

 

이 부분은 간략하게 작성할 예정이니 자세한 설명은 이전 포스팅을 참고하는 것이 좋을 듯 하다.

https://growth-coder.tistory.com/19

똑같이 navigation resource file을 만들고 생성한 후 추가하라는 dependency를 추가한다.

 

그렇게 만들어진 xml 파일에서 fragment들을 생성한다. 나는  first, second, third라는 텍스트뷰가 있는 fragment 3개를 만들었다.

 

이전 포스팅과는 다르게 fragment간의 갈 수 있는 경로를 설정할 필요가 없다. 

 

그냥 프래그먼트를 생성하면 된다.

이제 다시 한 번 main activity에서 NavHostFragment를 넣는다. 이제는 위에서 만든 것을 선택할 수 있다.

이 NavHostFragment의 아이디를 설정해준다. 나는 container라고 설정했다.

 

이제 main activity 아래에 bottomNavigationView를 추가한다. (아래에 배치되도록 레이아웃을 조정한다.)

이제 여기에 들어갈 메뉴들을 만들어야한다.

 

bottomNavigationView를 선택하고 common attributes에 보면 menu 버튼이 존재한다.

+ 버튼의 menu resource file을 클릭하여 메뉴 버튼을 만든다.

원하는 이름을 넣고 생성한다.

만든 것을 클릭해서 들어가면 Menu Item을 넣을 수 있다.

Menu Item을 삽입하여 메뉴들을 만든다.

만든 Menu Item의 속성을 아래와 같이 변경한다.

1. title을 바꾼다. (출력될 메뉴 이름)
2. icon을 넣는다. (출력될 메뉴 아이콘)
3. id를 바꾼다. (바꿀 fragment의 아이디와 동일하게 바꾼다. 아래 사진 참조)

 

 

이렇게 교체할 fragment 수만큼 메뉴를 만든다. 나는 그냥 전부 똑같은 아이콘을 사용하였다.

 

전부 만들었으면 다시 메인 액티비티로 돌아가서 bottomNavigationView를 선택하고 common attributes의 menu 버튼을 클릭하여 지금까지 만든 메뉴들이 있는 xml 파일을 선택한다.

 

bottomNavigationView에 접근하기 위한 id도 설정해준다. 나는 bottom으로 설정했다.

 

이렇게 하면 bottom navigation을 아래에 띄우는 것까지 성공이다. 이제 main activity에서 bottom navigation의 메뉴를 클릭하면 해당 fragment로 교체하게끔 코드를 작성하면 된다.

 

이를 위해 binding 설정을 한다. (fragment 사용법 1 참조) 

 

onCreate 함수에서 아래 코드를 입력한다.

binding.bottom.setupWithNavController(binding.container.getFragment<NavHostFragment>().navController)

main activity 전체 코드

class MainActivity : AppCompatActivity() {
    lateinit var binding : ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.bottom.setupWithNavController(binding.container.getFragment<NavHostFragment>().navController)
    }
}

잘 작동한다.