5장 바로가기 메뉴(NavigationDrawer) 만들기

바로가기 메뉴(NavigationDrawer) : 화면의 좌측 상단에 위치한 햄버거 모양 아이콘을 누를 때 나타나는 화면.

사용자의 프로필 정보나 설정 메뉴를 보여줄 때 주로 사용함.

 

이번 파트는 책의 버전과 현재 버전의 차이가 커서 아래 블로그를 참조하여 작성했다.

Android - 바로가기 메뉴 만들기(1)

Android - 바로가기 메뉴 만들기(2)

 

<바로가기 메뉴 만들기>

1. 새 프로젝트 만들기 -> Navigation Drawer Activity 선택

 

 

2. 파일 살펴보기

살펴볼 파일들은 다음과 같다.

1. AndroidMenifest.xml (테마 설정 확인 : NoActionBar)
2. activity_main.xml (전체 화면)
3. nav_header_main.xml (사용자 정보 화면)
4. activity_main_drawer.xml (사용자 정보 화면 아래에 위치한 메뉴바 화면)
5. strings.xml (이름 설정)
6. app_bar_main.xml (툴바 + 프래그먼트)
7. content_main.xml (프래그먼트)
8. mobile_navigation.xml (프래그먼트 집합)
9. MainActivity.java

지난 프로젝트에서 사용한 프래그먼트 1, 2, 3을 사용한다.

 

2.1 AndroidMenifest.xml

19번줄을 보면 테마가 NoActionBar인 것을 알 수 있다.

프래그먼트에 따라 Title을 액션바에 나타낼 것이기 때문에, MainActivity에서 액션바를 생성하는 코드를 작성함.

 

2.2 activity_main.xml

<?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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <!--<include> 태그를 사용하여 app_bar_main.xml 파일을 사용.-->
    <include
        android:id="@+id/app_bar_main"
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!--바로가기 메뉴를 만드는 태그-->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />
    <!--headerLayout : 사용자 프로필 등을 표시-->
    <!--menu : 메뉴 표시 (ex. Home / Gallery / Slideshow)-->
</androidx.drawerlayout.widget.DrawerLayout>

 

2.3 nav_header_main.xml (사용자 정보 화면)

 

2.4 activity_main_drawer.xml (사용자 정보 화면 아래에 위치한 메뉴바 화면)

아래와 같이 <item> 태그에서 title 값을 바꿔주었다.

<item
    android:id="@+id/nav_home"
    android:icon="@drawable/ic_menu_camera"
    android:title="@string/첫번째" />

 

2.5 string.xml

걍 String 리소스 파일임.

(메뉴바에서 텍스트를 어디서 가져오는지를 몰라서, string.xml에서 가져오나? 해서 바꿔본거였음. 근데 그건 아닌가봄)

 

2.6 app_bar_main.xml (툴바 + 프래그먼트)

기본적으로 아래 코드가 만들어진다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.Chapter5_6.AppBarOverlay">

        <!-- 툴바 -->
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/Theme.Chapter5_6.PopupOverlay" />

    </com.google.android.material.appbar.AppBarLayout>

    <!-- content_main.xml을 프래그먼트를 담을 레이아웃으로 설정-->
    <include layout="@layout/content_main" />

    <!-- 우측 하단 버튼 -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="@dimen/fab_margin"
        android:layout_marginBottom="16dp"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

 

2.7 content_main.xml (프래그먼트)

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main">

    <!--프래그먼트가 들어갈 공간-->
    <fragment
        android:id="@+id/nav_host_fragment_content_main"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>

마찬가지로 기본적으로 만들어지는 코드이다.

여기서 <fragment> 태그의 id가 nav_host_fragement_content_main 이라는 것을 읽고 넘어가자.

 

2.8 mobile_navigation.xml (프래그먼트 집합)

아래와 같이 나타난다.

<?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/mobile_navigation"
    app:startDestination="@+id/nav_home">
    <!--시작할 때 초기메뉴-->

    <!--label -> title로 바꿔버림-->
    <fragment
        android:id="@+id/nav_home"
        android:name="com.example.chapter5_6.ui.home.HomeFragment"
        android:title="@string/첫번째"
        tools:layout="@layout/fragment_1" />

    <fragment
        android:id="@+id/nav_gallery"
        android:name="com.example.chapter5_6.ui.gallery.GalleryFragment"
        android:title="@string/두번째"
        tools:layout="@layout/fragment_2" />

    <fragment
        android:id="@+id/nav_slideshow"
        android:name="com.example.chapter5_6.ui.slideshow.SlideshowFragment"
        android:title="@string/세번째"
        tools:layout="@layout/fragment_3" />
</navigation>

label -> title로 바꾼 이유 :

메뉴 선택시 메뉴명을 토스트 메시지로 띄우려고 했는데, getLabel 메서드가 없길래 getTitle 쓰려고 바꿈.

 

2.9 MainActivity.java

****추가한 부분 외에는 기본으로 생성되는 코드들이며, 일단 가볍게 읽고 넘어가자.

package com.example.chapter5_6;

public class MainActivity extends AppCompatActivity {

    private AppBarConfiguration mAppBarConfiguration;
    private ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 뷰바인딩을 통해 ActivityMainBinding 클래스로 레이아웃 뷰와 결합함
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        // setSupportActionBar 메서드로 액션바 설정함
        setSupportActionBar(binding.appBarMain.toolbar);
        binding.appBarMain.fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null)
                        .setAnchorView(R.id.fab).show();
            }
        });
        // drawer 레이아웃과 NavigationView 참조
        DrawerLayout drawer = binding.drawerLayout;
        NavigationView navigationView = binding.navView;

        // 바로가기 메뉴를 사용하기 위해 NavigationUI를 사용함
        // -> 이를 위해 AppBarConfiguration 객체 생성
        // Builder를 이용해 사용할 navigation_graph와 DrawerLayout을 전달함
        mAppBarConfiguration = new AppBarConfiguration.Builder(
                R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow)
                .setOpenableLayout(drawer)
                .build();

        // NavHost의 Fragment들을 조종할 수 있는 NavigationController 객체 생성
        // NavHost를 참조하여 가져와 navController에 할당함
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment_content_main);

        /* NavigationUI 클래스의 setupActionBarWithNavController 메서드를 사용하여
        Fragment의 전환에 따라 액션바도 Fragment를 따라 함께 변화하도록 세팅함 */
        NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);

        // NavigaionUI 클래스의 setUpWithNavController 메서드를 사용해 NavigatioinView를 NavController에 맞게 구현함
        NavigationUI.setupWithNavController(navigationView, navController);


        // 추가한 부분/*****************************************************************************
        Fragment1 fragment1 = new Fragment1();
        Fragment2 fragment2 = new Fragment2();
        Fragment3 fragment3 = new Fragment3();
        setSupportActionBar(binding.appBarMain.toolbar);

        getSupportFragmentManager().beginTransaction().add(R.id.nav_host_fragment_content_main, fragment1).commit();
        getSupportActionBar().setTitle("첫 번째");

        navigationView.setNavigationItemSelectedListener(item -> {
            int id = item.getItemId();
            String message;

            // 툴바 타이틀 표시
            getSupportActionBar().setTitle(item.getTitle());

            // 각 메뉴 ID에 따른 메시지 설정
            if (id == R.id.nav_home) {
                message = item.getTitle().toString();
                getSupportFragmentManager().beginTransaction().replace(R.id.nav_host_fragment_content_main, fragment1).commit();
            } else if (id == R.id.nav_gallery) {
                message = item.getTitle().toString();
                getSupportFragmentManager().beginTransaction().replace(R.id.nav_host_fragment_content_main, fragment2).commit();
            } else if (id == R.id.nav_slideshow) {
                message = item.getTitle().toString();
                getSupportFragmentManager().beginTransaction().replace(R.id.nav_host_fragment_content_main, fragment3).commit();
            } else {
                message = "기타";
            }
            // 토스트 메시지 표시
            Toast.makeText(this, message+" 메뉴가 선택되었습니다.", Toast.LENGTH_SHORT).show();

            // 메뉴 선택 처리 후 Drawer 닫기
            drawer.closeDrawers();
            return true;
        });
        //********************************************************추가한 부분******************
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    // <뒤로가기> 버튼을 눌렀을 때의 처리
    @Override
    public boolean onSupportNavigateUp() {
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment_content_main);
        return NavigationUI.navigateUp(navController, mAppBarConfiguration)
                || super.onSupportNavigateUp();
    }

}

 

추가한 부분

2.9 - (1)  프래그먼트 선언, 액션바 선언

Fragment1 fragment1 = new Fragment1();
Fragment2 fragment2 = new Fragment2();
Fragment3 fragment3 = new Fragment3();
setSupportActionBar(binding.appBarMain.toolbar);

 

2.9 - (2)  초기화면 설정

getSupportFragmentManager().beginTransaction().add(R.id.nav_host_fragment_content_main, fragment1).commit();
getSupportActionBar().setTitle("첫 번째");

초기화면의 프래그먼트를 설정하고, 액션바에 "첫 번째"가 뜨도록 했다.

첫번째 메뉴에 있을 때 자동으로 메뉴의 title을 가져와서 액션바에 뜨게 만들고 싶었는데.. 하다가 잘 안되서 일단 그냥 저렇게 만듦.

 

2.9 - (3) 선택한 메뉴에 따라 프래그먼트랑 액션바 타이틀 바꾸고, 토스트 메시지 띄우기

setNavigationItemSelectedListener를 사용하면 선택한 메뉴를 item.메서드로 해당 값을 가져올 수 있음.

        navigationView.setNavigationItemSelectedListener(item -> {
            int id = item.getItemId();
            String message;

            // 액션바 타이틀 표시
            getSupportActionBar().setTitle(item.getTitle());

            // 각 메뉴 ID에 따른 메시지 설정
            if (id == R.id.nav_home) {
                message = item.getTitle().toString();
                getSupportFragmentManager().beginTransaction().replace(R.id.nav_host_fragment_content_main, fragment1).commit();
            }
            /* else if ... else ... 생략 */
            
            // 토스트 메시지 표시
            Toast.makeText(this, message+" 메뉴가 선택되었습니다.", Toast.LENGTH_SHORT).show();

            // 메뉴 선택 처리 후 Drawer 닫기
            drawer.closeDrawers();
            return true;
        });

 

3. 실행결과

 

문제점 발생

 

왜 세번째 메뉴를 선택하면 프래그먼트가 겹칠까... 다른 메뉴는 안 그러는데 세번째는 바탕화면을 잘 보면 'This is home fragment'라는 글씨가 보인다.

모든 메뉴의 설정을 동일하게 변경해주었는데 왜 쟤만 저런건지 모르겠다.

 

 

그리고 왠지.. 뒤로 갈수록 책에서 사용한 버전이랑 현재 버전이랑 바뀐게 많아서 불편할 것 같은데 그냥 새 책을 사는게 낫지 않을까 하는 고민이 든다. 일단 좀 더 이 책으로 공부해보고, 바뀐 게 많아서 계속 인터넷으로 자료를 찾고 있는 나를 발견하게 된다면 책을 사야겠다.