[Android] 안드로이드 옵션 메뉴 (Option Menu) 생성

 

안드로이드 앱에서 사용하는 메뉴 중 옵션 메뉴에 대해서 알아 봅니다.  메뉴 목록을 xml 파일로 구성하는 경우 Root 요소는 menu이고 자식 요소는 item 입니다.  그룹으로 묶는 경우에는 group 요소가 사용되는 경우도 있습니다.

 

메뉴 리소스 XML

요소	설명
<menu>	메뉴 항목의 컨테이너로 root node로 생성한다. <item>과 <group> 요소를 이용하여 메뉴를 구성 한다.
<item>	하나의 메뉴 항목을 나타낸다. 하위 메뉴를 생성하기 위해 <menu> 요소를 포함할 수 있다.
<group>	<item> 요소를 묶어 관리할 수 있는 투명 컨테이너.

 

<item> 속성

메뉴의 구현은 텍스트나 이미지로 하는데 모두 item 요소를 이용해서 표현 합니다. 여기에 설명한 속성 이외에도 많은 설정 값들이 있습니다.

속성	설명
android:id	item의 고유한 리소스 ID로 애플리케이션에서 이 ID를 통해 해당 항목을 인식 하고 사용 한다.
android:icon	메뉴에 이미지를 사용하는 경우 @drawable의 참조
android:title	메뉴에 사용할 문자열
android:showAsAction	앱 바에서 작업 항목으로 나타나는 시기와 방법을 지정

 

android:showAsAction

item의 속성 값에서 보다 다양한 설정을 하기 위해서는 showAsAction 속성을 이용 합니다.

속성	설명
ifRoom	앱 바에 표시할 공간이 있으면 표시하고 아니면 더보기 메뉴에 포함 된다.
withText	아이콘과 android:title에서 정의한 텍스트를 표시
never	앱 바에 공간이 있어도 배치하지 않고 더보기 메뉴에 포함
always	항상 앱 바에 배치. 다른 UI와 겹쳐질 수 있다.
collapseActionView	접기 기능을 사용할 수 있다.(API level 14)

 

 

Activity Method

xml로 구현된 메뉴 layout은 Activity에서 다음 함수들을 이용하여 사용 합니다.

함수	설명
onCreateOptionsMenu()	메뉴 객체를 생성하고 초기화 한다.
onPrepareOptionsMenu()	메뉴가 화면에 보여질 때 마다 호출되는 함수.
onOptionsItemSelected()	Menu Item을 선택 하였을 때 호출되어 Item 객체가 넘어온다.
onOptionsMenuClosed()	메뉴가 활성화 되어 있을 때 이전 버튼이나 다른 영역을 터치하여 메뉴를 닫을 때 호출되는 함수.

 

간단한 메뉴를 예제로 하나 만들어 보고 참고로 다음과 같은 메뉴도 만들어 봅니다.

1. 프로젝트 생성

옵션 메뉴를 테스트 하기 위한 프로젝트를 생성 합니다.

Empty Activity를 선택 하고

대충 프로젝트 명을 입력하고 Finish 합니다.

 

2. 메뉴 xml 작성

프로젝트가 생성되면 메뉴를 위한 xml 파일을 생성해야 하는데 처음에는 res 폴더에 menu 폴더가 없기 때문에 xml 파일과 폴더를 동시에 생성 합니다.

프로젝트에 마우스를 놓고 우측버튼을 클릭한 후 New > Android Resource File 을 선택 합니다.

파일명은 자유롭게 생성하고 여기서는 menu_option로 하였습니다.  Resource Type은 Menu를 선택해 줍니다.  이제 [OK] 버튼을 클릭하면 menu 폴더와 xml 파일이 생성 됩니다.

menu_option.xml 파일이 생성 되었습니다.  

처음에는 메뉴가 Design 보기로 나와 있는데 여기서 좌측에 있는 palette를 이용하여 메뉴를 구성 할 수도 있고 Code를 선택해서 텍스트로 입력을 해도 됩니다.

간단하게 다음과 같이 메뉴 구성을 하였습니다.

 

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:id="@+id/menu1"

        android:title="menu1"

        app:showAsAction="never">

    </item>

    <item

        android:id="@+id/menu2"

        android:title="menu2"

        app:showAsAction="never">

    </item>

</menu>

android:showAsAction에서 빨간색으로 오류가 발생 한다면 마우스를 올려놓고

Update to app:showAsAction을 선택해 주면 됩니다.

그리고 showAsAction 값을 always와 never로 설정 하는 경우의 모습은 아래와 같습니다.

showAsAction을 always로 한 경우

showAsAction을 never로 한 경우

둘 중 하나를 선택해서 작성해 줍니다.

 

3. MainActivity.java 코딩

이제 메뉴 xml을 사용하여 Activity에 실제 코딩을 진행 하는데 두 개의 함수를 사용하기 위해 추가해 줍니다.

onCreateOptionsMenu()

onOptionsItemSelected()

실제 코딩 내용은 별거 없습니다.

 

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu_option, menu);
    return true;
}

 

MenuInflater는 xml 리소스를 메뉴 객체로 변환하는 작업을 합니다.  생성한 menu_option.xml을 읽어와 menu에 맵핑해 줍니다.

 

@Override

public boolean onOptionsItemSelected(@NonNull MenuItem item) {

    switch(item.getItemId()) {

        case R.id.menu1:

            Toast.makeText(this, "menu1 select", Toast.LENGTH_SHORT).show();

            break;

        case R.id.menu2:

            Toast.makeText(this, "menu2 select", Toast.LENGTH_SHORT).show();

            break;

    }

    return super.onOptionsItemSelected(item);

}

 

사용자가 선택한 메뉴 item을 id를 반환해 주어 선택된 메뉴에 맞는 기능을 하도록 코딩해주는 부분 입니다. 

 

4. 실행

지금까지 만든 프로젝트를 실행해 봅니다.

더보기 메뉴를 선택하면 작성한 메뉴가 나타나고 하나씩 클릭해 봅니다.

menu1을 선택한 경우 토스트 문구가 나옵니다.

menu2를 선택한 경우의 토스트 문구 입니다.

5. 전체 소스

전체 소스라고 해봐야 2개 밖에 없습니다.

 - menu_option.xml

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:id="@+id/menu1"

        android:title="menu1"

        app:showAsAction="never">

    </item>

    <item

        android:id="@+id/menu2"

        android:title="menu2"

        app:showAsAction="never">

    </item>

</menu>

  

- MainActivity.java

package copycoding.tistory.optionmenu;



import androidx.annotation.NonNull;

import androidx.appcompat.app.AppCompatActivity;



import android.os.Bundle;

import android.view.Menu;

import android.view.MenuInflater;

import android.view.MenuItem;

import android.widget.Toast;



public class MainActivity extends AppCompatActivity {



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    }



    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        MenuInflater inflater = getMenuInflater();

        inflater.inflate(R.menu.menu_option, menu);

        return true;

    }



    @Override

    public boolean onOptionsItemSelected(@NonNull MenuItem item) {

        switch(item.getItemId()) {

            case R.id.menu1:

                Toast.makeText(this, "menu1 select", Toast.LENGTH_SHORT).show();

                break;

            case R.id.menu2:

                Toast.makeText(this, "menu2 select", Toast.LENGTH_SHORT).show();

                break;

        }

        return super.onOptionsItemSelected(item);

    }

}

 

 

6. 참고

앞에서 말한데로 group과 submenu를 추가한 경우도 알아 봅니다.  단순히 메뉴용 xml만 수정하면 됩니다.

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:id="@+id/menu1"

        android:checkable="true"

        android:title="menu1"

        app:showAsAction="never">

    </item>

    <item

        android:id="@+id/menu2"

        android:enabled="false"

        android:title="menu2"

        app:showAsAction="never">

    </item>

    <!-- menu group -->

    <group android:id="@+id/group_delete">

        <item android:id="@+id/menu_archive"

            android:title="group menu1" />

        <item android:id="@+id/menu_delete"

            android:title="group menu2" />

    </group>

    <item

        android:id="@+id/menu3"

        android:title="menu3"

        app:showAsAction="never">

        <!-- "file" submenu -->

        <menu>

            <item

                android:id="@+id/submenu1"

                android:checkable="true"

                android:title="sub menu1"

                app:showAsAction="never">

            </item>

            <item

                android:id="@+id/submenu2"

                android:enabled="false"

                android:title="sub menu2"

                app:showAsAction="never">

            </item>

        </menu>

    </item>

</menu>

 

실행 결과 입니다.

- copy coding -