[Do it! 안드로이드 앱 프로그래밍 #13] 액션바 사용하기

13 액션바 사용하기

13-1 화면에 메뉴 기능 넣기

앱의 상단 타이틀 부분에 [메뉴] 버튼을 배치할 수 있는데 그것을 옵션 메뉴(Option Menu)라고 부른다. 옵션 메뉴와 다르게 입력 상자를 길게 눌러 나타나는 '복사하기', '붙여넣기' 등의 팝업 형태의 메뉴는 컨텍스트 메뉴(Context Menu)라고 한다. 옵션 메뉴는 각각의 화면마다 설정할 수 있으며 컨텍스트 메뉴는 각각의 뷰마다 설정할 수 있다. 둘의 사용 방법이 거의 유사하므로 여기선 옵션 메뉴만 알아본다.

 

옵션 메뉴는 액션바(Action Bar)에 포함되어 보이도록 만들어져 있다. 여기서 액션바는 앱의 제목(Title)이 보이는 위쪽 부분을 말한다. 옵션 메뉴를 추가하기 위해서는 다음의 두 메서드를 재정의 해야 한다.

 

public boolean onCreateOptionsMenu (Menu menu)

public void onCreateContextMenu (Contextmenu menu, View v, ContextMenu.ContextMenuInfo menuInfo)

 

app > res > 우클릭 > New > Directory > Directory name에 menu 입력 > OK

안드로이드 스튜디오는 menu 폴더 안에 메뉴를 위한 XML 파일이 만들어진다는 것을 미리 알고 있다. 따라서 메뉴를 위한 XML 파일은 반드시 menu 폴더 안에 들어 있어야 한다.

 

app > res > menu > 우클릭 > New > Menu resuurce file > File name에 menu_main.xml 입력 > OK

메뉴 XML 파일은 소스 코드에서 인플레이션한 후 메뉴에 설정할 수 있다.

 

▼ XML 파일에 <item> 태그 추가하기

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/menu_refresh"
        android:title="새로고침"
        android:icon="@drawable/refresh"
        app:showAsAction="always"
        />

    <item android:id="@+id/menu_search"
        android:title="검색"
        android:icon="@drawable/search"
        app:showAsAction="always"
        />

    <item android:id="@+id/menu_settings"
        android:title="설정"
        android:icon="@drawable/settings"
        app:showAsAction="always"
        />

</menu>

 

▼ XML 파일 인플레이션하고 이벤트 처리하기

public class MainActivity extends AppCompatActivity {

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int curId = item.getItemId();
        switch (curId){
            case R.id.menu_refresh:
                Toast.makeText(this, "새로고침 메뉴가 선택되었습니다.", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_search:
                Toast.makeText(this, "검색 메뉴가 선택되었습니다.", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_settings:
                Toast.makeText(this, "설정 메뉴가 선택되었습니다.", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

 

 

13-2 액션바 좀 더 살펴보기

이번에는 액션바에 검색어를 입력할 수 있는 입력상자를 넣어볼 것이다. 우선 액션바 안에 넣을 입력상자를 위한 XML 레이아웃을 생성한다.

app > res > layout > 우클릭 > New > Layout resource file > File name에 search_layout.xml 입력 > OK

 

▼ 액션바 안에 넣을 입력상자를 위한 XML 레이아웃 만들기

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="검색"
        android:textSize="16sp"
        android:textColor="#ffad8745"
        />

    <EditText
        android:id="@+id/editText"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:imeActionId="1337"
        android:imeOptions="actionDone"
        android:inputType="text" />

</LinearLayout>

imeOptions="actionDone"은 입력상자에 검색어를 입력한 후 키패드에서 [완료] 키를 누르면 검색 기능을 수행할 수 있도록 하는 속성이다.

imeActionId="1337"은 버튼이 클릭되었을 때 전달되는 값을 지정하는 속성이다.

 

이렇게 만든 XML 레이아웃을 액션바에 넣어서 보여주려면 액션바에 추가된 검색 메뉴 아이템이 화면에 보일 때 이 레이아웃이 보이게 설정해야 한다. menu_main.xml 파일을 복사해온 후 코드를 수정한다.

 

▼ 검색 메뉴 아이템의 레이아웃 설정하기

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/menu_refresh"
        android:title="새로고침"
        android:orderInCategory="101"
        android:icon="@drawable/refresh"
        app:showAsAction="always"
        />

    <item android:id="@+id/menu_settings"
        android:orderInCategory="102"
        android:title="설정"
        android:icon="@drawable/settings"
        app:showAsAction="always"
        />

    <item android:id="@+id/menu_search"
        android:title="검색"
        android:orderInCategory="103"
        app:showAsAction="always"
        app:actionLayout="@layout/search_layout"
        />

</menu>

이제 MainActivity.java 파일을 수정한다. EditText 객체에 사용자가 검색어를 입력하고 [완료] 키를 눌렀을 때 원하는 기능이 수행될 수 있도록 코드를 수정한다.

 

▼ [완료] 키를 눌렀을 때 토스트 메시지 띄우기

public class MainActivity extends AppCompatActivity {
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        
        // XML로 정의된 메뉴 정보를 인플레이션하여 메모리에 로딩
        getMenuInflater().inflate(R.menu.menu_main, menu);

        // 메뉴 아이템 중에서 검색을 위해 정의한 아이템을 뷰 객체로 참조
        View v = menu.findItem(R.id.menu_search).getActionView();
        
        // 검색을 위한 메뉴 아이템 안에 정의한 입력상자 객체 참조
        if(v != null){
            EditText editText = v.findViewById(R.id.editText);

            // 입력상자 객체에 리스너 설정
            if(editText != null){
                editText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
                    @Override
                    public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                        Toast.makeText(getApplicationContext(), "입력됨.", Toast.LENGTH_LONG).show();
                        return true;
                    }
                });
            }
        }
        return true;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

액션바에 검색창 만들기