듀다의 성장개발로그

[부스트코스] 안드로이드 프로그래밍 17 - 액션바 만들기 본문

안드로이드/부스트코스

[부스트코스] 안드로이드 프로그래밍 17 - 액션바 만들기

du-da 2020. 2. 28. 23:58

액션바는 여러 기능을 수행할 수 있는 아이콘들을 화면 상단에 담고 있는 부분입니다.

자주 쓰는 기능을 버튼으로 만들어 화면 상단에 모아놓으면 사용하기에도 편리하고 화면 구성도 효율적으로 할 수 있겠죠?

화면 상단에 버튼들을 추가하는 방법에는 여러 가지가 있습니다. 그 중 액션바를 추가하는 방법에 대해 알아보겠습니다.

아래의 그림에 새로고침, 검색, 설정 등의 아이콘이 보이실 겁니다. 이런 액션바를 추가하는 것은 레이아웃에서 이루어지는데요, 액션바를 위한 레이아웃 파일을 새로 만들어주어야 합니다.

 

메뉴 리소스 파일을 정의하기 위해, 메뉴 폴더를 새로 생성한 뒤 레이아웃을 만들었습니다.

메뉴 디렉토리는 res 디렉토리에서 new - directory를 클릭하면 출력되는 위의 팝업에 새 디렉토리 이름를 입력하기만 하면 만들어집니다.

이제 메뉴 리소스 파일에 액션바의 버튼들을 정의해야 합니다.

기본 레이아웃에서 버튼을 추가할 때와 마찬가지로, 자유롭게 추가하고 아이디 및 배경을 설정하기만 하면 됩니다.

저는 새로고침, 검색, 설정 버튼을 만들었습니다.

<?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/refresh"
    android:title="새로고침"
    android:icon="@drawable/menu_refresh"
    app:showAsAction="always"/>
<item
    android:id="@+id/menu_search"
    android:title="검색"
    android:icon="@drawable/menu_search"
    app:showAsAction="always"/>
<item
    android:id="@+id/setting"
    android:title="설정"
    android:icon="@drawable/menu_settings"
    app:showAsAction="always"/>

</menu>

그리고 소스파일에서 OnCreateOptionMenu를 오버라이드하여, 해당 메소드 안에서 메뉴 리소스 파일을 인플레이션해주면 액션바가 부착됩니다.

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

이렇게 추가된 액션바의 각 버튼은 onOptionsItemSelected메소드를 통해 접근 가능합니다.

이 메소드의 인자로 들어오는 MenuItem 변수를 getItemID 메소드로 아이디를 변수에 저장하면, 저장된 값을 비교하여 무슨 버튼이 클릭되었는지 구분할 수 있지요.

각 버튼을 switch조건문으로 구분해 토스트 메시지를 띄우는 예제입니다.

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        int curID = item.getItemId();
        switch (curID){
            case R.id.menu_refresh :
                Toast.makeText(this,"새로고침 메뉴 클릭됨", Toast.LENGTH_LONG).show();
                break;
            case R.id.menu_search :
                Toast.makeText(this, "검색 메뉴 선택함", Toast.LENGTH_LONG).show();
                break;
            case R.id.menu_settings :
                Toast.makeText(this, "설정 메뉴 선택됨", Toast.LENGTH_LONG).show();
            default :
                break;
        }

        return super.onOptionsItemSelected(item);
    }

이 앱을 실행하고 액션바의 각 버튼을 누르면 설정된 토스트 메시지가 출력되는 것을 확인할 수 있습니다.

 

+) 액션바를 보이지 않게 하는 방법

 

액션바를 보이지 않게 할 수 있습니다. 액션바를 감추는 주된 이유는 액션바 대신 다른 기능들을 사용하기 위함인데요. 여기 액션바를 감추는 두 가지 방법이 있습니다.

우선 첫번째 방법은 소스코드상에서 수행하는 방법입니다.

액션바 변수를 선언하고 그 변수에서 hide 메소드를 호출합니다.

아래의 단 두 줄로 액션바를 감출 수 있습니다.

ActionBar abar = getSupportActionBar();
abar.hide();

또 다른 방법은 한 줄로 액션바를 감출 수 있습니다.

res - values의 styles.xml파일의 내용을 수정하는 방법입니다.

 

해당 파일에 아래와 같은 코드가 들어가 있다고 할 때,

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

<styles name로 시작하는 4번째 라인에서

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

DarkActionBar를 NoActionBar로 바꿔주기만 하면 화면에서 액션바가 사라집니다. 참 쉽죠?