[Android/Kotlin] fragment 사용법 4 (drawer navigation)

지금까지 fragment 기본 사용법, bottom navigation 사용법에 대해서 공부해보았다.

 

이제 메뉴 버튼을 누르면 메뉴들이 왼쪽에서 나오고 이를 선택하여 fragment를 교체하는 방식에 대해서 공부해보려 한다.

 

bottom navaigation이랑 크게 다르지 않다.

 

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

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

위 포스팅과 비슷하게 first, second, third라는 텍스트뷰를 가진 프래그먼트를 생성하고 drawer의 menu를 클릭하면 해당 프래그먼트로 이동하는 앱을 만들어보려고 한다.

 

위 포스팅에서 bottomNavigationView를 추가하기 전까지는 동일하므로 bottomNavigationView를  추가하기 전까지 따라하면 된다.

 

완료했다면 activity_main.xml 파일에는 container라는 아이디를 요소가 하나 있을 것이고 res/navigation/first.xml 파일 안에

firstFragment, secondFragment, thirdFragment 세 개의 프래그먼트가 존재할 것이다.

 

activity_main.xml 파일의 code를 보면

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

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/container"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="409dp"
        android:layout_height="673dp"
        android:layout_marginStart="1dp"
        android:layout_marginEnd="1dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/first" />

</androidx.constraintlayout.widget.ConstraintLayout>

이렇게 되어있을텐데 ConstraintLayout을 DrawerLayout을 바꿔준다.

 

그리고 해당 DrawerLayout의 아이디를 drawerLayout으로 바꾸어준다.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/container"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="409dp"
        android:layout_height="673dp"
        android:layout_marginStart="1dp"
        android:layout_marginEnd="1dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/first" />

</androidx.drawerlayout.widget.DrawerLayout>

그리고 팔레트에서 navigationView를 검색한다.

이전 포스팅에서는 BottomNavigationView를 넣었지만 지금은 drawerNavigation을 만들 것이기 때문에

그냥 NavigationView를 넣는다.

 

그리고 NavigationView의 아이디를 drawer로 설정한다.

 

처음 넣었을 때는 NavigationView가 액티비티 전체를 덮을 것이다.

 

우리는 메뉴를 눌렀을 때 한 30%정도만 액티비티를 가리도록 만들 것이기 때문에 width에 wrap-content 값을 주어 크기를 줄인다.

그리고 NavigationView의 Declared Attributes의 + 버튼을 눌러서 layout_gravity를 추가해준다.

 

 

그리고 layout_gravity의 깃발 버튼을 눌러서 start를 선택해준다. (나머지는 start를 누르면 자동 선택된다.)

 

NavigationView가 왼쪽으로 나가있는 것을 볼 수 있다. 여기서 메뉴버튼을 누르면 왼쪽에서 튀어나올 것이다.

 

나머지는 BottomNavigationView와 거의 동일하다.

common attributes의 메뉴 버튼을 클릭하여

xml 파일을 생성해준다. 그러면 res/menu 폴더 안에 만든 파일이 생성되어있고 그 안에서

 

자신이 만든 프래그먼트 만큼의 아이템을 생성해준다.

각각의 아이템 별로 id는 fragment의 이름과 연결되도록 설정하고 원하는 title을 설정하고 icon도 설정하면 된다.

 

참고로 이동할 fragment의 이름이 fragment_first라면 firstFragment라고 아이디를 설정해야 한다.

 

이제 메인 액티비티 코드를 작성할 차례이다.

 

역시 뷰 바인딩을 사용할 것이기 때문에 뷰 바인딩 세팅을 한다.

 

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

[Android/Kotlin] activity와 fragment에서 view binding 사용법

 

그리고 navController와 appBarConfiguration을 만들어야한다.

 

<MainActivity.kt 최종 코드>

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding
    lateinit var appBar : AppBarConfiguration
    lateinit var navController : NavController
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        navController = binding.container.getFragment<NavHostFragment>().navController//navController 세팅
        appBar = AppBarConfiguration( //appBarConfiguration 세팅
            setOf(R.id.firstFragment, R.id.secondFragment, R.id.thirdFragment), //top-level fragment
            binding.drawerLayout //drawerLayout
        )
        setupActionBarWithNavController(navController,appBar) 
        binding.drawer.setupWithNavController(binding.container.getFragment<NavHostFragment>().navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp(appBar) || super.onSupportNavigateUp()
    }
}