7.메뉴와 대화상자

(1) 메뉴

메뉴는 사용자가 여러 개 중 하나를 선택하도록 하여 사용자의 명령을 받아들이는 간편한 방식입니다. 

안드로이드의 메뉴는 옵션 메뉴(option menu)와 컨텍스트 메뉴(context menu)로 구분합니다.

 

① 옵션메뉴

옵션 메뉴를 사용하는 방법에는 메뉴 XML 파일을 생성 후 Java에서 호출하는 방법과 XML 없이 Java코드만 메뉴를 생성하는 방법이 있습니다.

 

(1) XML을 이용해서 옵션 메뉴

XML

메뉴 XML 파일의 형식은 다음과 같습니다.

 

<menu>

    <item

        android:id="@+id/항목1 아이디"

        android:title="항목1의 제목" />

    <item

        android:id="@+id/항목2 아이디"

        android:title="항목2의 제목" />

</menu>

 

 

 

java코드

Activity 클래스에서 오버 라이딩하는 onCreateOptionMenu() 메소드는 앱이 실행되면 메뉴의 내용을 XML 파일에서 자동으로 읽어옵니다.

형식은 다음과 같습니다.

 

public boolean onCreateOptionsMenu(Menu menu) {

    super.onCreateOptionsMenu(menu);          // 상위 클래스의 생성자 실행

    MenuInflater minflater = getMenuInflater();    // 메뉴 인플레이터를 생성하고 

    minflater.inflate(R.menu.XML메뉴아이디, menu);      // 앞에서 작성한 메뉴 XML 파일을 등록

    return true;

}

 

 

Inflater(인플레이터)

인플레이터는 '부풀리는 장치'라는 뜻입니다.

비유하자면 풍선에 바람을 넣어서 실제 객체로 만들어 사용하듯이 정적으로 존재하는 XML 파일(풍선)을 java 코드에서 접근하여(바람을 넣어) 실제 객체로 만들어서 사용하는 것이라고 볼 수 있습니다.

 

 

Activity 클래스에서 오버라이딩하는 onOptionsItemSelected() 메소드는 메뉴를 선택할 때 어떤 동작을 할지 담고 있습니다.

onOptionsItemSelected()는 옵션 메뉴가 선택될 때마다 호출됩니다.

형식은 다음과 같습니다.

public boolean onOptionsItemSelected(MenuItem item) {

    switch (item.getItemId()) {

    case R.id.항목1의아이디:

        ....항목1을 선택했을 때 실행할 코드

        return true;    // 이 메소드의 기능을 실행했다는 의미로 true를 반한 (메소드에 대한 반환임)

    ....

    }

    return false;   

// 옵션 메뉴를 부르고 메뉴의 항목을 선택하지 않을 경우에는 메소드의 기능을 실행한 것이 아니므로 false를 반환

}

 

 

옵션 메뉴의 코딩 예제는 다음과 같습니다.

우선 XML의 큰 틀부터 잡습니다.

 

activity_main.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/baselo">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="오른쪽 위 메뉴 버튼을 누르세요." />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="버튼" />
</LinearLayout>

 

이제 menu를 위한 xml 코드를 만들어야 하는데 우선 menu폴더를 만들고 menu형 XML 파일을 만들어야 합니다.

 

Project Tree의 [app] - [res]에서 오른쪽 마우스를 클릭 후 [New] -> [Android Resource Directory]를 선택합니다.

 

디렉토리 이름을 설정하고 type을 'menu'로 설정한 후 [ok]를 누릅니다.

 

[res]아래 [menu]라는 디렉토리가 생성되었습니다.

[menu]에서 오른쪽 마우스 클릭 후 [new] -> [Menu resource file]을 클릭합니다.

 

파일 이름을 설정 후 [ok] 버튼을 누르면 됩니다.

 

생성된 menu XML 파일에 코딩을 하면 됩니다.

 

optionmenu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/itemRed"
        android:title="배경색(RED)" />
 
    <item
        android:id="@+id/itemGreen"
        android:title="배경색(GREEN)" />
 
    <item
        android:id="@+id/itemBlue"
        android:title="배경색(BLUE)"  />
 
    <item
        android:title="버튼 변경 >>" >
        <menu>
            <item
                android:id="@+id/subrotate"
                android:title="버튼 90도 회전" />
            <item
                android:id="@+id/subsize"
                android:title="버튼 가로축 2배 확대" />
        </menu>
    </item>
</menu>

 

 

MainActivity.java

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
 
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.LinearLayout;
 
public class MainActivity extends AppCompatActivity {
    LinearLayout baseLayout;
    Button button1;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("배경색 바꾸기");
        baseLayout = (LinearLayout) findViewById(R.id.baselo);
        button1 = (Button) findViewById(R.id.button1);
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        MenuInflater mif = getMenuInflater();
        mif.inflate(R.menu.optionmenu, menu);
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.itemRed:
                baseLayout.setBackgroundColor(Color.RED);
                return true;
            case R.id.itemGreen:
                baseLayout.setBackgroundColor(Color.GREEN);
                return true;
            case R.id.itemBlue:
                baseLayout.setBackgroundColor(Color.BLUE);
                return true;
            case R.id.subrotate:
                button1.setRotation(90);
                return true;
            case R.id.subsize:
                button1.setScaleX(2);
                return true;
        }
        return false;
    }
}

위젯변수.setRotation(각도크기); : 위젯을 해당 각도 값만큼 회전 시킴 (한 번만 해당 각도만큼 회전 시킴)

 

위젯변수.setScaleX(배수); : 위젯의 가로축(x축)을 배수만큼 늘림

 

결과는 다음과 같이 메뉴 아이콘이 생기고 메뉴 아이콘을 누르면 설정한 코드대로 동작합니다.

 

 

 

(2) 메뉴 XML 없이 java 코드만 이용한 옵션 메뉴

메뉴 XML 파일 없이 java코드로만 생성할 수 있습니다.

onCreateOptionMenu() 메소드 안에서 메뉴 XML 파일에 접근하는 대신 직접 menu.add() 메소드로 메뉴 항목을 추가할 수 있습니다.

 

activity_main.xml은 그대로 두고 optionmenu.xml을 삭제한 후 MainActivity.java를 다음과 같이 수정하면 위의 결과와 같이 나옵니다.

 

MainActivity.java

import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.SubMenu;
import android.widget.Button;
import android.widget.LinearLayout;
 
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
    LinearLayout baseLayout;
    Button button1;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("배경색 바꾸기");
        baseLayout = (LinearLayout) findViewById(R.id.baselo);
        button1 = (Button) findViewById(R.id.button1);
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
 
        menu.add(0,1,0, "배경색(RED)");
        menu.add(0,2,0,"배경색(GREEN");
        menu.add(0,3,0,"배경색(BLUE)");
 
        SubMenu smenu = menu.addSubMenu("버튼 변경 >>");
        smenu.add(0,4,0,"버튼 45도 회전");
        smenu.add(0,5,0,"버튼 가로축 2배 확대");
 
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case 1:
                baseLayout.setBackgroundColor(Color.RED);
                return true;
            case 2:
                baseLayout.setBackgroundColor(Color.GREEN);
                return true;
            case 3:
                baseLayout.setBackgroundColor(Color.BLUE);
                return true;
            case 4:
                button1.setRotation(90);
                return true;
            case 5:
                button1.setScaleX(2);
                return true;
        }
        return false;
    }
}

바뀐 부분은 29~35줄이고 Switch문의 case문 id 부분만 바뀌었습니다.

 

menu.add(그룹id, 항목id, 순번, "제목") : 메뉴 추가

SubMenu : 서브메뉴 (메뉴 안에 메뉴 만들기)

 

 

 

② 컨텍스트 메뉴

키패드의 메뉴 버튼을 누를 때 나타나는 옵션 메뉴와 달리 레이아웃 또는 위젯을 롱클릭했을 때 화면 중앙에 나타납니다.

윈도우 팝업창과 비슷합니다.

 

메뉴 XML 파일은 컨텍스트 메뉴가 나오게 할 위젯마다 별도의 파일로 만들어야 합니다.

메뉴 XML의 문법은 옵션 메뉴와 동일합니다.

java 코드에서는 onCreateContextMenu() 메소드를 사용합니다.

onCreateContextMenu() 메소드에는 위젯 별로 컨텍스트 메뉴가 나타나야 하므로 위젯별 컨텍스트 메뉴를 if문으로 등록합니다.

java코드 형식은 다음과 같습니다.

 

public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) {
    super.onCreateContextMenu(menu, v, menuInfo);

 

    MenuInflater mif = getMenuInflater();        // 메뉴 인플레이터 생성

    if(v==위젯1변수) {

        mif.inflate(R.menu.첫번째메뉴XML파일, menu);     //위젯에 맞는 메뉴 파일을 인플레이트함

    }

    if(v==위젯2변수) {

        mif.inflate(R.menu.두번째메뉴XML파일, menu);

    }

}

 

 

activity_main

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/baselo"
    android:orientation="vertical">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="배경색 변경" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:text="버튼 변경" />
</LinearLayout>

 

 

colormenu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/itemRed"
        android:title="배경색(RED)" />
    <item
        android:id="@+id/itemGreen"
        android:title="배경색(GREEN)" />
    <item
        android:id="@+id/itemBlue"
        android:title="배경색(BLUE)" />
</menu>

 

 

changemenu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/subrotate"
        android:title="버튼 90도 회전" />
    <item
        android:id="@+id/subsize"
        android:title="버튼 2배 확대" />
</menu>

 

 

MainActivity.java

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
 
import android.graphics.Color;
import android.os.Bundle;
import android.view.ContextMenu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
 
public class MainActivity extends AppCompatActivity {
    LinearLayout baselayout;
    Button button1, button2;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("컨텍스트 메뉴");
        baselayout = (LinearLayout) findViewById(R.id.baselo);
        button1 = (Button) findViewById(R.id.button1);
        registerForContextMenu(button1);
        button2 = (Button) findViewById(R.id.button2);
        registerForContextMenu(button2);
    }
    public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
        super.onCreateContextMenu(menu, v, menuInfo);
 
        MenuInflater mif = getMenuInflater();
        if(v==button1){
            menu.setHeaderTitle("배경색 변경");
            mif.inflate(R.menu.colormenu, menu);
        }
        if(v==button2){
            mif.inflate(R.menu.changemenu, menu);
        }
    }
 
    @Override
    public boolean onContextItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.itemRed:
                baselayout.setBackgroundColor(Color.RED);
                return true;
            case R.id.itemGreen:
                baselayout.setBackgroundColor(Color.GREEN);
                return true;
            case R.id.itemBlue:
                baselayout.setBackgroundColor(Color.BLUE);
                return true;
            case R.id.subrotate:
                button1.setRotation(90);
                return true;
            case R.id.subsize:
                button1.setScaleX(2);
                return true;
        }
        return false;
    }
}

 

위젯 설정한 버튼을 꾹 누르면 Context메뉴가 나와서 설정한 동작들을 실행할 수 있습니다.

 

 

 

 

(2) Toast(토스트)

토스트는 화면에 잠깐 나타났다가 사라지는 작은 메시지입니다.

일반적인 사용형태는 다음과 같습니다.

 

Toast.makeText(Context context, String message, int duration).show();

 

context는 표시할 화면을 나타내며 현재 화면(액티비티)을 표시하기 위해 액티비티명.this 를 주로 사용합니다.

message는 출력할 메시지입니다.

duration은 화면에 나타나는 시간이며 Toast.LENGTH_LONG이나 Toast.LENGTH_SHORT중 하나를 사용합니다.

 

토스트는 기본적으로 화면의 중앙 하단 부근에 나타나는데, setGravity() 메소드를 사용하면 위치를 변경할 수 있습니다.

 

Toast.setGravity(int gravity, int xOffset, int yOffset);

 

gravity는 위, 중앙, 아래 등을 지정하고 xOffset과 yOffset으로 떨어진 거리를 나타냅니다.

 

 

activity_main.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="메시지 출력" />
 
</LinearLayout>

 

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.view.Display;
import android.view.Gravity;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.Toast;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("토스트 연습");
 
        final Button button1 = (Button) findViewById(R.id.button1);
 
        button1.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v){
                Toast tmsg = Toast.makeText(MainActivity.this, "토스트입니다.", Toast.LENGTH_SHORT);
 
                Display display = ((WindowManager) getSystemService(WINDOW_SERVICE)).getDefaultDisplay();
                int xOffset = (int) (Math.random()*display.getWidth());
                int yOffset = (int) (Math.random()*display.getHeight());
 
                tmsg.setGravity(Gravity.TOP | Gravity.LEFT, xOffset, yOffset);
                tmsg.show();
            }
        });
    }
}

23 : 토스트 메시지를 만듦. "토스트입니다."라고 출력하게 함

 

현재 안드로이드폰의 디스플레이의 정보를 getSystemService() 메소드로 구한 후 getWidth()는 화면 폭을 ,getHeight()는 화면 높이를 돌려줍니다.

 

Math.random() : 0~1 임의 수를 구함

 

 

 

 

 

(3) 대화상자

대화상자(dialog)는 화면에 메시지를 나타낸 후 확인이나 취소 같은 사용자의 선택을 받아들이는 경우에 사용합니다.

안드로이드에서 대화상자를 생성할 때는 AlertDialog.Builder 클래스를 주로 사용합니다.

 

activity_main.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="대화상자" />
</LinearLayout>

 

 

① 기본적인 대화상자 java코드

MainActivity.java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
 
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final Button button1 = (Button) findViewById(R.id.button1);
        button1.setOnClickListener(new View.OnClickListener(){
           public void onClick(View v){
               AlertDialog.Builder adb = new AlertDialog.Builder(MainActivity.this);
               adb.setTitle("대화상자제목");
               adb.setMessage("이곳이 내용입니다.");
               adb.setIcon(R.mipmap.ic_launcher);
               adb.show();
           }
        });
    }
}

핵심코드

AlertDialog.Builder adb = new AlertDialog.Builder(MainActivity.this);

adb.setTitle("대화상자제목");

adb.setMessage("이곳이 내용입니다.");   //내용입력

adb.setIcon(R.mipmap.ic_launcher);     // 아이콘 설정

adb.show();      // 대화상자 보여주기

 

결과는 버튼을 누르면 다음과 같습니다.

 

 

 

② 버튼 1개인 대화상자 Java 코드

adb.setPositiveButton("확인",null);

위의 Java 핵심코드에서 위의 코드 한 줄만 더 넣으면 결과는 다음과 같습니다.

setPositiveButton("문자열", 리스너); 형태에 리스너 부분에 null값을 넣으므로 '확인'버튼을 누르면 대화상자만 닫힐 뿐 다른 일은 일어나지 않습니다.

 

대화상자의 '취소' 역할을 하는 메소드도 있습니다.

setNegativeButton("문자열", 리스너);

setPositiveButton과 마찬가지로 코딩하면 됩니다.

 

 

 

 

③ 대화상자 버튼을 클릭하면 동작하는 Java 코드

setPositiveButton부분 코드 줄을 다음과 같이 사용하면 됩니다.

 

setPositiveButton("확인", new DialogInterface.OnClickListener() {

    public void onClick(DialogInterface dialog, int which) {

        Toast.makeText(액티비티명.this, "토스트내용", Toast.LENGTH_SHORT).show();

    }

}

 

 

 

 

④ 기본 목록 대화상자의 Java 코드

대화상자에 리스트 형태의 목록을 출력하고 그중 하나를 선택하게 할 수 있습니다.

예제는 다음과 같습니다.

 

MainActivity.java

import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final Button button1 = (Button) findViewById(R.id.button1);
        button1.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v){
                final String[] fruitsArray = new String[] {"사과", "바나나","딸기"};
                AlertDialog.Builder adb = new AlertDialog.Builder(MainActivity.this);
                adb.setTitle("목록 중 가장 선호하는 과일은?");
                adb.setIcon(R.mipmap.ic_launcher);
                adb.setItems(fruitsArray, new DialogInterface.OnClickListener(){
                    public void onClick(DialogInterface dialog, int which){
                        button1.setText(fruitsArray[which]);
                    }
                });
                adb.setPositiveButton("닫기",null);
                adb.show();
            }
        });
    }
}

핵심코드

adb.setItems(fruitsArray, new DialogInterface.OnClickListener(){

                    public void onClick(DialogInterface dialog, int which){

                        button1.setText(fruitsArray[which]);

                    }

                });

 

 

결과는 다음과 같습니다.

 

버튼을 눌러서 대화상자를 열고 목록에서 '사과'를 클릭하면 버튼의 텍스트가 '사과'로 바뀝니다.

대화상자의 항목의 선택과 동시에 대화상자가 닫힙니다.

 

 

 

 

⑤ 라디오버튼 목록 대화상자의 Java코드

항목을 선택해도 대화상자가 닫히지 않도록 하려면 setItems() 대신 setSingleChoiceItems()를 사용해서 라디오 버튼과 같은 형태로 출력하면 됩니다.

 

④에서의 핵심코드를 다음과 같이 바꾸면 됩니다.

 

adb.setSingleChoiceItems(fruitsArray,0,new DialogInterface.OnClickListener(){
                    public void onClick(DialogInterface dialog, int which){
                        button1.setText(fruitsArray[which]);
                    }
                });

 

결과는 다음과 같습니다.

라디오 버튼의 목록을 선택 후 '닫기' 버튼을 누르면 대화상자 버튼이 선택한 단어로 바뀌어 있습니다.

 

 

 

 

 

⑥ 체크박스 목록 대화상자 Java코드

라디오 버튼과 달리 여러 개를 동시에 선택하려면 setMultiChoiceItems()를 사용합니다.

 

button클릭 부분을 다음과 같이 바꾸면 됩니다.

 

MainActivity.java

public void onClick(View v){
                final String[] fruitsArray = new String[] {"사과", "바나나","딸기"};
                final boolean[] checkArray = new boolean[] {true, false, false};
                AlertDialog.Builder adb = new AlertDialog.Builder(MainActivity.this);
                adb.setTitle("목록 중 가장 선호하는 과일은?");
                adb.setIcon(R.mipmap.ic_launcher);
                adb.setMultiChoiceItems(fruitsArray, checkArray, new DialogInterface.OnMultiChoiceClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int which, boolean b) {
                        button1.setText(fruitsArray[which]);
                    }
                });
                adb.setPositiveButton("닫기",null);
                adb.show();
            }

여러 개 체크할 수 있으며 마지막에 체크된 항목이 버튼에 나타납니다.