[안드로이드 스튜디오] 앱만들기 #7. Navigation Drawer Activity

[ 실행 화면 ]

 

---

 

원래 듣던 강의인 홍드로이드 강의를 따라 듣는데 아무래도 5년전 강의다보니...

댓글창에서도 androidx가 도입되면서 달라진 부분이 많다고 해서 이번 강의는 참고만 했다.

그리고 구글에서 Navigation Drawer Activity를 검색해보면서 관련 내용을 찾아보았다!

 

.

.

.

 

NavigationDrawer란?

 

 

앱을 사용하다보면 좌우측 상단 막대기 세개 등 메뉴 목록이 있는 앱이 있다.

이 화면을 바로가기 메뉴 화면이라고 하고,

안드로이드에서는 NavigationDrawer 라는 이름으로 제공하고 있다.

 

 

 

 

기본적으로 DrawerLayout 내부에 NavigationView를 추가하여 구현한다.

 

<include
    android:id="@+id/app_bar_main"
    layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 

 

include 부분으로 네비게이션을 포함시켰다.

투명한 상태의 View를 하나 올리고 그 위에 nav_view를 더 올린다고 생각하면 된다.

NavigationView는 사용자가 원하는 destination(fragment)까지 안내한다.

이 화면은 fragment로 구성하고 있다.

fragment는 따로 또 공부해보기!

 

 

---

 

[ 레이아웃 알아보기 ]

Navigation Drawer Activity 를 생성하면 기본적으로 생성되는 layout은 다음과 같다.

 

 

레이아웃 구조는 위 사진처럼 확인할 수 있다.

최상위 레이아웃 파일 : activity_main (DrawerLayout)

 

※ activity_main 구성 요소 2가지

android:id="@+id/app_bar_main"
android:id="@+id/nav_view"

 

 

※ app_bar_main 구성 요소

• toolbar (Toolbar)
• content_main (ConstraintLayout)
• fab (FloatingActionButton)

 

※ nav_view 구성 요소

• nav_header_main (LinearLayout) .xml
• activity_main_drawer.xml

 

menu 부분의 item을 클릭하면 NavController에 의해

content_main 내부의 fragment가 전환된다.

 

메뉴를 더 추가하거나 수정하고 싶다면 activity_main_drawer에서

 

위 사진처럼 <item /> 을 사용해서 추가해주면 된다!

 

 

※ fragment 레이아웃 파일 3가지

• fragment_gallery.xml
• fragment_home.xml
• fragment_slideshow.xml

 

그리고 actionbar의 menu 파일인 main.xml이 있다.

 

 

---

 

[ Java 코드 알아보기 ]

 

java 코드는 Fragment, ViewModel, Activity로 구성되어 있다.

Fragment와 ViewModel은 NavigationView를 통해 전환할 3개의 Fragment 구성 파일

 

 

[ MainActivity.java]

package com.example.naviactivity;

import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.view.Menu;

import com.google.android.material.snackbar.Snackbar;
import com.google.android.material.navigation.NavigationView;

import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.appcompat.app.AppCompatActivity;

import com.example.naviactivity.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    private AppBarConfiguration mAppBarConfiguration;
    private ActivityMainBinding binding;
    //강의에서는 binding의 개념이 도입되기 전인듯?

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        setSupportActionBar(binding.appBarMain.toolbar);
        binding.appBarMain.fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //snackbar는 toast 메시지랑 비슷한것, 더업그레이드 된 버전
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null)
                        .setAnchorView(R.id.fab).show();
            }
        });
        DrawerLayout drawer = binding.drawerLayout;
        //강의에서는 DrawerLayout drawer = findViewById(R.id.drawer_layout);
        NavigationView navigationView = binding.navView; //네비게이션 뷰의 선언
        //강의에서는 NavigationView navigationView = findViewById(R.id.nav_view);
        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        mAppBarConfiguration = new AppBarConfiguration.Builder(
                R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow)
                .setOpenableLayout(drawer)
                .build();
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment_content_main);
        NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);
        NavigationUI.setupWithNavController(navigationView, navController);
    }

    @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();
    }



}

 

 

 

 

https://developer.android.com/reference/androidx/navigation/ui/AppBarConfiguration.Builder

AppBarConfiguration.Builder  |  Android Developers

 

https://developer.android.com/reference/androidx/navigation/NavController

NavController  |  Android Developers

 

https://developer.android.com/reference/androidx/navigation/ui/NavigationUI

NavigationUI  |  Android Developers

 

 

※ onCreateOptionMenu() : ActionBar의 OptionMenu를 불러옴

https://ju-hy.tistory.com/53

ActionBar에 Menu 추가하기

 

 

※ onSupportNavigateUp()

NavController이 AppBarConfiguration을 통해 Up 버튼 클릭 시 수행할 action을 결정하도록 설정

https://developer.android.com/reference/androidx/navigation/ui/NavigationUI

NavigationUI  |  Android Developers

 

 

 

[ 참고 사이트 ]

https://ju-hy.tistory.com/57

Navigation Drawer Activity 살펴보기