안드로이드 옵션 메뉴(Option Menu)란?

1. Menu
   1-1. Menu란?
   1-2. Option Menu란?
   1-3. Menu 파일 생성
2. Option Menu 만들기
3. 실행결과
4. 예제 코드

 

 

 

---

 

 

1. Menu

1-1. Menu란?

• Option Menu
  • 검색, 이메일 작성, 설정과 같이 앱 전체에 영향을 미치는 작업을 배치해야 함
  • 앱 우측 상단에 '⋮' 모양의 아이콘을 누르면 생기는 메뉴
  • ex) 유튜브 화질이나 속도 등 설정할 때 누르는 버튼
• Context Menu 
  • 요소를 길게 클릭하면 나타나는 플로팅 메뉴
  • ex) 사진을 꾹 누르면 나타나는 다운로드, 공유 등을 선택할 수 있는 메뉴
• Popup Menu
  • 요소를 클릭하면 나타나는 팝업 메뉴
  • 팝업 메뉴의 작업은 해당 콘텐츠에 직접적으로 영향을 미쳐서는 안 됨

 

안드로이드에는 Menu라고 불리는 인터페이스 구성요소가 있다.

외형적으로는 전부 똑같이 생겼는데 용도와 사용법에 따라 나뉘게 된다.

3개의 포스팅에 나눠서 업로드를 할 예정이고 오늘은 Option Menu에 대해 적어보려고 한다.

 

 

1-2. Option Menu란?

브라우저에서 Option Menu를 사용하고 있는 예시

 

백문이 불여일견. 눈으로 확인하자

브라우저에서 저렇게 '⋮' 버튼이 있는 거를 자주 봤을 것이다. 아니면 유튜브에서도 많이 봤을 것이다.

저 버튼을 옵션 메뉴라고 한다.

옵션 메뉴에는 주로 앱 전체에 영향을 미치는 작업들을 배치한다.

 

강제사항은 아니지만 구글의 권장사항이기 때문에 웬만하면 따라주자.

사용자들의 머릿속에는 "아 저렇게 생긴 버튼을 누르면 설정을 바꿀 수 있을 거야"라는 게 학습되어 있다.

누가 가르쳐준 적도 없지만 수많은 앱을 사용하면서 생긴 학습 결과이다.

그러니 사용자가 앱 사용을 할 때 헷갈리지 않게 권장사항을 따르도록 하자.

 

 

1-3. Menu 파일 생성

res - New - Directory

 

옵션 메뉴를 쓰든 컨텍스트 메뉴를 쓰든 팝업 메뉴를 쓰든

menu 디렉터리를 만들고 파일을 만드는 과정은 전부 동일하다.

우선 res 디렉터리 밑에 menu라는 이름의 디렉터리를 생성해주자.

 

 

menu - New - Menu Resource File

 

디렉터리를 생성했다면 이제 XML 파일을 만들어 줄 차례이다.

위 사진을 보고 파일을 생성해주자.

이름은 원하는 대로 생성해주면 된다.

나는 menu_option, menu_context, menu_popup 이 규칙대로 이름을 지었다.

 

 

파일 생성 완료

 

파일이 생성되었다.

이제 XML 코드를 추가해보자.

 

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_item_login"
        android:title="로그인"
        />
    <item
        android:id="@+id/menu_item_setting"
        android:title="설정"
        />
    <item
        android:id="@+id/menu_item_help"
        android:title="고객센터"
        />
</menu>

메뉴에 들어갈 옵션들을 <item> 태그를 이용해 추가하자.

id랑 title 속성 정도만 넣어줘도 되지만 다음 2가지 속성도 참고로 알아두자. (더 많은 속성이 있지만 생략)

 

• icon: 항목의 아이콘을 설정한다.
• showAsAction: 항목이 앱 바에서 작업 항목으로 표시되어야 하는 시기와 방법을 지정한다.

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/file"
          android:title="@string/file" >
        <!-- "file" submenu -->
        <menu>
            <item android:id="@+id/create_new"
                  android:title="@string/create_new" />
            <item android:id="@+id/open"
                  android:title="@string/open" />
        </menu>
    </item>
</menu>

만약 메뉴 항목 안에 하위 메뉴를 구현하고 싶다면 menu 태그 안에 item을 넣어주면 된다.

(잘 쓰이지 않을 것 같으니 이런 것도 가능하구나 정도만 알고 넘어가자)

 

 

메뉴의 항목에 하위 메뉴가 있는 경우

 

메뉴 항목 안에 하위 메뉴가 있는 경우가 무엇인지 텍스트로만 읽으면 감이 안 올 거 같아서 사진을 가져왔다.

스마트폰 앱 중에서 찾고 싶었는데 못 찾음 ㅠ

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_save"
          android:icon="@drawable/menu_save"
          android:title="@string/menu_save" />
    <!-- menu group -->
    <group android:id="@+id/group_delete">
        <item android:id="@+id/menu_archive"
              android:title="@string/menu_archive" />
        <item android:id="@+id/menu_delete"
              android:title="@string/menu_delete" />
    </group>
</menu>

<group> 태그는 메뉴 항목들이 특정한 특징을 공유하도록 한다.

모든 항목 표시 또는 숨기기 같은 특징들을 공유하는데 요새는 잘 쓰이지 않는 과거 스마트폰 때 사용하던 기능이라고 한다.

 

group 태그에 대한 자세한 설명은 공식문서를 참고하자.

 

2. Option Menu 만들기

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu_option, menu)
        return true
    }

액티비티에서 onCreateOptionsMenu 메서드를 오버라이딩하자.

아까 만들었던 menu_option.xml 파일을 여기서 inflate 하면 된다.

inflate는 XML 리소스를 프로그래밍 가능한 객체로 변환하는 것이라 생각하면 된다.

 

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item?.itemId) {
            R.id.menu_item_login -> {
                Toast.makeText(this, "로그인 선택 됨", Toast.LENGTH_SHORT).show()
                return true
            }
            R.id.menu_item_setting -> {
                Toast.makeText(this, "설정 선택 됨", Toast.LENGTH_SHORT).show()
                return true
            }
            R.id.menu_item_help -> {
                Toast.makeText(this, "고객센터 선택 됨", Toast.LENGTH_SHORT).show()
                return true
            }
        }

        return super.onOptionsItemSelected(item)
    }

onOptionsItemSelected를 오버라이딩 하면 각 메뉴 아이템이 클릭됐을 때 할 작업을 설정할 수 있다.

위 예제에서는 간단하게 토스트 메시지를 띄워주었다.

 

 

3. 실행결과

Option Menu를 눌러 아이템을 클릭한 모습

 

실행결과는 위와 같다.

 

 

4. 예제 코드

GitHub - juhwankim-dev/SelfStudy: 코틀린으로 공부한 것들을 올리는 공간입니다.

예제로 사용한 코드를 깃허브에 올려두었다.

 

 

 

---

💡 느낀 점

• 햄버거 메뉴 버튼, 네비게이션 바 등등... Menu Option을 대체할 수 있는 기능들이 많은데 굳이 써야 하나?라는 생각을 했었는데 오늘 공부하면서 그 용도가 조금씩 다르다는 것을 알게 됐다.
• 공부를 안 했다면 마구마구 혼용해서 썼을 듯... 

📘 참고한 자료

• 옵션메뉴 컨텍스트메뉴 팝업메뉴 차이점이 뭔가요? - 안드로이드 Q&A
• Menu - 안드로이드 공식문서

---