[안드로이드] 안드로이드 스튜디오 입문 (Navigation Menu 커스텀)

이번 시간에는 'Navigation Menu'를 직접 커스텀을 하여 구성해보겠습니다. 이번에도 'Empty Activity'로 'New Project'를 생성해줍니다.

 

activity_main 레이아웃 구성하기

먼저 'activity_main.xml'로 가서 수정을 하겠습니다. 기존의 layout을 지우고 'DrawerLayout'을 작성합니다. 그러면 아래에도 자동으로 변경되는 것을 볼 수 있습니다.

기존의 <TextView>를 지우고, <LinearLayout>를 작성한 후 내부에 <Button>을 작성하고 id를 써줍니다.

지금 이 화면은 실제 메인화면이 들어갑니다. 여기는 원하는 메인화면을 구현하면 됩니다.

 

activity_drawer 레이아웃 구성하기

그리고 화면을 하나 더 만들건데, 좌측의 파일에서 app - res - layout 안에 새로운 xml 파일을 생성해줍니다. 저는 파일 이름을  activity_drawer로 하겠습니다. 이제 실제 메뉴가 열렸을 때 상황을 생각을 해서 만들어보겠습니다. 슬라이드 메뉴를 직접 만든다고 생각하면 됩니다. 파일이 열리게 되면 기존의 레이아웃을 LinearLayout으로 변경하고 layout_width 또한 240으로 변경해줍니다. 

 

그다음으로는 'layout_gravity" 속성에 "start'를 입력하고 'background'에는 '#000000'을 입력하면 왼쪽 240dp가 검은색으로 변경됩니다. 아마 이 색은 원하지 않을 것입니다. 왼쪽의 사각형을 눌러 원하는 색으로 변경합니다.

이제 안에 들어갈 것들을 만들어봅시다. LinearLayout은  orientation 방향을 주는게 좋기 때문에 "vertical"로 설정하고, 내부에는 일단 Button과 TextView를 넣어줍니다. Button에는 메뉴를 종료할 수 있는 버튼도 작성해줍니다. 이렇게 버튼으로 영역을 만들어도 되지만 LinearLayout을 통해서도 영역을 만들어줄 수 있습니다. TextView 아래에 다음과 같이 작성해줍니다.

이렇게 작성하시면 화면엔 다음과 같이 뜨게 됩니다.

하지만 지금은 레이아웃 안의 내용들이 꽉 차있어 보기 별로입니다. 그래서 우리는 버튼과 내부 LinearLayout에 margin 값을 통해 약간의 여백을 줄 것입니다. 다음과 같이 작성하면 이런식으로 여백이 생기게 됩니다.

android:layout_margin="10dp"

그리고 잠깐 activity_main에 가서 drawerlayout에도 id를 작성해줍니다. 이렇게 되면 이 drawerlayout을 감싼 id가 생기는 것입니다. 그리고 아래에는 include를 써줄것입니다. 이것은 'activity_drawer' 레이아웃을 이쪽에 포함시킨다는 의미를 가지고 있습니다. 즉, activity_drawer이라는 레이아웃은 java 파일 이런곳에서 바로  쓰이는 것이 아니라 main xml에서 연결 시킨 것입니다.

 

MainActivity 기능 구현하기

이제 MainActivity.java로 가서 실제 기능을 구현해봅시다. 파일로 이동하여 DrawerLayout과 View를 선언을 하고 실제 생명주기 쪽에서 코드를 작성합니다. findViewById() 메소드를 이용하여 xml 파일에서 레이아웃에 설정한 것을 가져옵니다. 버튼의 setOnClickListener()를 이용해 버튼을 클릭했을 때 네비게이션 메뉴가 뜨도록 했습니다.

이제 drawerLayout도 리스너를 등록해줄것입니다. setOnClickListener() 아래에 다음과 같이 작성해줍니다.

drawerLayout.setDrawerListener(listener);

그럼 listener에 빨간색으로 에러가 뜨는데 이것을 onCreate 아래에 listener을 작성하면 됩니다. 아래과 같이 작성하면 자동으로 여러 메소드가 화면에 뜰것입니다. 

DrawerLayout.DrawerListener listener = new DrawerLayout.DrawerListener()

이곳은 DrawerListener라고 해서 왼쪽이나 오른쪽으로 슬라이드했을때 이곳에서 상태값을 받아옵니다.

 

onDrawerSlide : 슬라이드했을 때 호출됨.

onDrawerOpened : 오픈이 완료되었을 때 호출됨.

onDrawerClosed : 슬라이드가 닫혔을 때 호출됨.

onDrawerStateChanged : 어떠한 상태가 변경되었을때 호출됨.

 

지금은 이것을 작성할 필요는 없고, 나중에 특정 액션일때 기능을 추가한다면 여기 작성하면 됩니다. 리스너는 단지 만들어두면 좋기때문에 만들어놓는겁니다.

 

마저 작성해봅시다. setOnTouchListener를 구현해볼것입니다. 이것은 우리가 폰화면을 터치하고 손을 움직이고 손을 떼는 순간까지 모두 실행되는 함수입니다.

        drawerView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                return true;
            }
        });

현재 상태에선 '메뉴 열기' 버튼을 누르면 메뉴는 열리지만 메뉴를 닫을 때 버튼을 눌러도 닫히지 않습니다. 우리가 닫는 버튼을 설정 안해줬기 때문입니다. 이제 btn_close 버튼에 대한 메소드를 작성합시다. 위의 btn_open 버튼 아래에 btn_close 버튼의 기능을 추가합니다. 이것까지 추가하면 간단한 네비게이션 메뉴 구현에 성공한것입니다.

        Button btn_close = (Button)findViewById(R.id.btn_close);
        btn_close.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                drawerLayout.closeDrawers();
            }
        });

 

구현한 사진을 보여드리고 글을 마치겠습니다.

참고한 영상은 다음과 같습니다.

 

안드로이드 앱 개발 강의 #10

https://youtu.be/p4Np2ks6bW4