#6 내비게이션 메뉴 (Navigation Menu) 의 구성, 틀

안드로이드 스튜디오

- 내비게이션 메뉴 -

우리가 흔히 어플에서 화면을 왼쪽이나 오른쪽으로 슬라이드할 때

화면의 옆쪽에서 메뉴 바가 스르륵 나오는 것을 흔히 볼 수 있는데

바로 그 메뉴바가 내비게이션 메뉴라고 한다.

이번 포스팅에서는 내비게이션 메뉴를 하나하나 구성코드들을 살펴볼 것이다.

[ Navigation Menu ]

먼저 안드로이드 스튜디오에서 New -> New Project 를 눌러 새로운 프로젝트를 만들어주자

만들다보면 이런 메뉴가 뜰텐데 다음 그림과 같이 Navigation Drawer Activity라고 되어있는 틀을 선택해준다.

<그 외에도 여러 틀들이 있는데 원하는 화면을 쉽게 선택하여 쓸 수 있다>

만들면 기존 Empty Activity를 선택했을 때와는 다르게 content_main.xml 파일로 시작을 하게된다.

또한 프리뷰로 보는 화면도 다른 점을 알 수 있는데 실제로 빌드해서 안드로이드폰 내에서 화면을 좌측으로 슬라이드  해보면 메뉴바가 나타나는 것을 볼 수 있다.

    

<- 슬라이드 전 기본화면 // 슬라이드 하면 나오는 메뉴바 -> 

 특히 오른쪽 아래에 작은 원모양의 버튼이 있는데

이것을 FloatingActionButton 이라고 한다.

그럼 본격적으로 이 내비게이션 메뉴가 어떤 형태로 있는지 알아보자

제일 먼저 MainActivity.java 를 보면 

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        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).show();
            }
        });

        ~~~

OnCreate 메소드 안에 전에 설명한 FloatingActionButton 이 있는 것을 볼 수 있는데 바로 그 버튼을 관리할 수 있는 

부분이다.

현재 저 구문은 setOnClickListener로 버튼을 누를 경우 "Replace wih ~~ "라는 스낵바가 뜨도록 되어 있다.

여기서 스낵바(Snackbar)는 이전 포스팅에서 봤던 토스트(Toast)와 비슷한 성질을 가진 기능인데

토스트의 업그레이드 버전으로 보면 될 것이다.

< 이전 토스트를 만들어 본 구문이랑 비교해서 보면 굉장히 비슷한 점을 알 수 있다. />

즉, FloatingActionButton을 누를 때 우리가 원하는 명령을 주고 싶다면 저 부분에서 수정을 하면 된다는 점이다. 

그 다음으로 FloatingActionButton 구문의 아래에 있는 구문들을 살펴보면

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
        this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.addDrawerListener(toggle);
            toggle.syncState();

            NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
            navigationView.setNavigationItemSelectedListener(this);
            }

맨 윗줄 문장인 DrawerLayout drawer 부분에서 (R.id.drawer_layout); 이 부분을 'Ctrl + 클릭' 하면 자동으로 해당 아이디

선언된 파일로 이동하는데 바로 activity_main.xml 파일로 이동하게 된다.

<android.support.v4.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">

<activity_main.xml 에서 drawer_layout 의 설정부분 />

그리고 이 activty_main.xml 구문을 보면 <include 로 시작한 부분이 보일텐데 이곳이 바로 내비게이션 뷰라는 위젯을

DrawerLayout 안에 포함시키는 부분이다.

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

    // 실제 내비게이션뷰가 선언된 곳
    <android.support.design.widget.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" />

</android.support.v4.widget.DrawerLayout>

<activity_main.xml 의 drawer_layout 부분의 아래에 있는 구문/>

실제로 마우스로 <android.support.design.widget.NavigationView 로 시작하는 구문을 클릭해보면

프리뷰에 이런 식으로 파란 테두리가 보일텐데 저 테두리 부분이 바로 우리가 클릭한 구문을 나타내는 부분이다.

이렇게 보면 되겠고 그래서 MainActivity.java 파일 내에서 NavigationView navigationView = ~~; 이렇게 선언된

것을 볼 수 있을것이다.

다음으로 계속 MainActivity.java 의 아래 구문들을 살펴보자

@Override
public void onBackPressed() {
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    if (drawer.isDrawerOpen(GravityCompat.START)) {
        drawer.closeDrawer(GravityCompat.START);
    } else {
        super.onBackPressed();
    }
}

onBackPress() 는 안드로이드폰의 뒤로가기 버튼을 눌렀을 때 실행할 명령들을 담은 매소드라고 생각하면 된다.

위의 저 구문들을 살펴보면 DrawerLayout 아이디를 찾아주고

if (drawer.isDrawerOpen ~ ) 이 조건문은 "만약 drawerLayout 이 열려있다면" 이라는 의미이다.

그때 drawer.closeDrawer( ~ ); 는 'drawerLayout을 닫아줘라' 이런 의미가 된다.

그리고 else 문의 super.onBackPressed(); 는 'drawerLayout이 안 열려있으면 아예 해당 화면에서 뒤로 가라'

이런 의미가 된다.

그 다음 구문은 onCreateOptionMenu 메소드인데

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

이 메소드는 '시작할 때 옵션메뉴를 생성하는' 메소드인데

getMenuInflater().inflate ~ ; 구문은 팜플렛에서 기본적으로 있는 요소들을 가져오라는 의미가 된다.

실제로 (R.menu.main 이 부분을 Ctrl+ 클릭 해보면 main.xml 이라는 파일로 들어가지는데 그곳에서

옵션메뉴가 이런거다 라는 것을 확인해볼 수 있다.

그 아래에서는 이 옵션메뉴를 눌렀을 때 실행되는 명령이 쓰여있는 구문이다.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

기본적으로는 if 문 안에 return true; 로 아무것도 구현되지 않은 상태이다.

본격적으로 어플을 만들 때 이 부분에서 옵션메뉴에 기능을 추가하면 된다 이정도로 알고 넘어가자

이 다음이 내비게이션메뉴에서 가장 중요한 부분이 될 수가 있는데

바로 메뉴 안의 구성요소들이 선택될 때 실행할 명령들을 설정해 줄 수 있는 부분이다.

@Override
public boolean onNavigationItemSelected(MenuItem item) {
    // Handle navigation view item clicks here.
    int id = item.getItemId();

    if (id == R.id.nav_camera) {
        // Handle the camera action
    } else if (id == R.id.nav_gallery) {

    } else if (id == R.id.nav_slideshow) {

    } else if (id == R.id.nav_manage) {

    } else if (id == R.id.nav_share) {

    } else if (id == R.id.nav_send) {

    }

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawer.closeDrawer(GravityCompat.START);
    return true;
}

R.id. 뒤에 있는 문장들이 바로 메뉴에 있는 선택버튼들의 아이디들이다.

그리고 if - else if 문이 끝나고 drawer.closeDrawer( ~ ); 부분들은 이제 메뉴에서 버튼을 선택하고 각 버튼에서의 액션을 취하고 나면 drawerLayout을 닫는다 이런 의미이다.

실제로 어플을 이용할 때 메뉴에서 무언가를 선택하면 그 메뉴창이 닫히는 것을 볼 수 있는데 바로 그 역할이다.

그리고 다음과 같이 메뉴창에서 버튼의 이미지, 텍스트 등을 변경하는 곳은 

저 구문에서 R.id.nav_~ 부분을 Ctrl +클릭하면

activity_main_drawer.xml 파일로 들어가지게 되는데 이곳에서 메뉴안의 내용물들을 커스텀할 수 있는 곳이다.

실제로 메뉴 아이콘은 안드로이드에서 기본으로 제공해주는 drawable/ic_menu_~ 파일들을 쓰고 있는 것을 볼 수 있다.

추가로 app->res->layout 폴더를 보면 다음처럼 4개의 xml 파일들이 있는데

activity_main.xml 파일이 아래 3개의 파일들을 포함하고 있다고 보면 된다.

하나씩 들어가보고 프리뷰와 같이 들여다보면 대강 이해가 갈 것이다.