[안드로이드 코틀린] Navigation component part2 - DrawerLayout Navigaion 쉽게 만드는 방법

안녕하세요. 이번 시간에는 Navigation Component를 이용해서 DrawerLayout Navigaion 쉽게 만드는

방법에 대하여 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 볼 수 있습니다.

2022.12.06 - [안드로이드] - [안드로이드 코틀린] Navigation component part1 - 프래그먼트 쉽게 연결하는 방법

[안드로이드 코틀린] Navigation component part1 - 프래그먼트 쉽게 연결하는 방법

---

목차

1. 실행 화면
2. 라이브러리 등록
3. 내비게이션 파일 만들기
4. 프래그먼트 생성
5. 메뉴 만들기 drawer_menu.xml
6. 내비게이션 파일에 프래그먼트 연결
7. 메인 화면 구성 activity_main.xml
8. 메인 코드 구현 MainActivity.kt

---

1. 실행 화면

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

    implementation 'androidx.navigation:navigation-fragment-ktx:2.5.3'
    implementation 'androidx.navigation:navigation-ui-ktx:2.5.3'

3. 내비게이션 파일 만들기

res 선택 ->  마우스 오른쪽 클릭 -> new -> Android Resource File

파일 이름: my_nav

Resource type: Navigation

내비게이션 폴더 생성과 파일이 만들어집니다.

4. 프래그먼트 생성

- 설명 

 1. 3개의 프래그먼트를 생성합니다.

 2. 파일명은 HomeFragment, ProfileFragment, SettingFragment

 3. app 선택 -> New -> Fragment -> Fragment (Blank)

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeFragment">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:textStyle="bold"
        android:gravity="center"
        android:text="Home" />

</FrameLayout>

 

fragment_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ProfileFragment">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:textStyle="bold"
        android:gravity="center"
        android:text="Profile" />

</FrameLayout>

 

fragment_setting.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SettingFragment">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:textStyle="bold"
        android:gravity="center"
        android:text="Setting" />

</FrameLayout>

 

반응형

 

5. 메뉴 만들기 drawer_menu.xml

1. res 선택 -> 마우스 오른쪽 클릭 -> New -> Android Resource Directory

Resource type: menu 선택 -> Ok

파일 이름: drawer_menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item android:id="@+id/homeFragment"
            android:title="home"/>

        <item android:id="@+id/profileFragment"
            android:title="Profile"/>

        <item android:id="@+id/settingFragment"
            android:title="Setting"/>
    </group>
</menu>

 

6. 내비게이션 파일에 프래그먼트 연결

 - 설명

 1. 내비게이션 파일에 프래그먼트 등록해서 관리

 2. 액션 태그 아이디를 통해 다른 프래그먼트 이동을 쉽게 할 수 있다.

 3. startDestination : 맨 처음 보여줄 프래그먼트 설정

<?xml version="1.0" encoding="utf-8"?>
<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/my_nav"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.navigationexam.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" />
    <fragment
        android:id="@+id/profileFragment"
        android:name="com.example.navigationexam.ProfileFragment"
        android:label="fragment_profile"
        tools:layout="@layout/fragment_profile" />
    <fragment
        android:id="@+id/settingFragment"
        android:name="com.example.navigationexam.SettingFragment"
        android:label="fragment_setting"
        tools:layout="@layout/fragment_setting" />
</navigation>

7. 메인 화면 구성 activity_main.xml

 - 설명 -

 1. 프래그먼트 보여주는 fragment

 2. 메뉴 보여주는 NavigationView

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

    <fragment
        android:id="@+id/fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/my_nav" />


    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/drawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

 

8. 메인 코드 구현 MainActivity.kt

 - 설명 -

 1. navController

  내비게이션 이동하는 기능

   내비게이션 파일에 등록된 프래그먼트에서 탐색

 2. appBarConfiguration

   앱바 설정 객체

 3. setupActionBarWithNavController

   액션바 설정 객체

 4. onSupportNavigateUp()

   뒤로 가기 버튼 누르면 실행되는 함수

class MainActivity : AppCompatActivity() {

    private lateinit var navController: NavController
    private lateinit var appBarConfiguration: AppBarConfiguration

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

        val drawerLayout: DrawerLayout = findViewById(R.id.drawerLayout)
        val navigationView: NavigationView = findViewById(R.id.navigationView)

        //네비게이션 컨트롤러
        navController = findNavController(R.id.fragment)

        //앱바 설정( 컨트롤러, 드로우 레이아웃)
        appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)

        //액션바&네비게이션 설정
        setupActionBarWithNavController(navController, appBarConfiguration)

        //네비게이션뷰 설정
        navigationView.setupWithNavController(navController)
    }

    //뒤로가기 선택시 호출
    override fun onSupportNavigateUp(): Boolean {

        val navController = findNavController(R.id.fragment)

        return navController.navigateUp(appBarConfiguration) //뒤로 가기
                || super.onSupportNavigateUp()
    }
}

2022.11.21 - [안드로이드] - [안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

2022.11.07 - [안드로이드] - [안드로이드 코틀린] 파이어 베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티