#7.메뉴와 대화상자 2021-02-05

- 요약 -

1. 안드로이드의 메뉴는 옵션 메뉴와 컨텍스트 메뉴로 구분됩니다.

 

2. 옵션 메뉴의 설정은 다음의 세 단계를 거칩니다.

1. 메뉴 폴더 생성 및 메뉴 XML 파일 생성, 편집

2. Kotlin 코딩 : onCreateOptionsMenu() 메소드 오버라이딩 (해당 메소드는 MainActivity클래스 에 커서를 두고 ctrl + O(코드 - 오버라이드 메소드)에서 찾아서 생성 가능)

3. Kotlin 코딩 : onOptionsItemSelected() 메소드 오버라이딩 (위에 상기된 방식과 동일 생성)

 

3. 컨텍스트 메뉴의 설정은 다음의 네 단계를 거칩니다.

1. 메뉴 폴더 생성 및 위젯의 메뉴 XML 파일 생성 , 편집

2. Kotlin 코딩 : onCreate()안에 registerForContextMenu()로 등록 - 메뉴를 사용할 위젯 등록

3. Kotlin 코딩 : onCreateContextMenu() 메소드 오버라이딩 (상기된 방식과 동일 생성)

4. Kotlin 코딩 : onContextItemSelected() 메소드 오버라이딩 ( 위와 동일 )

 

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

<menu>
	<item
    	android:id="@+id/item항목1"
        android:title="항목1 제목"/>
    <item
    	android:id="@+id/item항목2"
        android:title="항목2 제목"/>
</menu>

 

5. XML 파일 없이 Kotlin 코드만으로도 메뉴를 만들 수 있습니다.

(컨텍스트 메뉴, 옵션 메뉴 둘다 가능)

 

6. 토스트의 일반적인 사용 형식은 다음과 같습니다.

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

 

7. 대화상자의 설정 순서는 다음과 같습니다.

1. 대화상자 생성 : AlertDialog.Builder 클래스로 생성

2. 용도에 따른 설정 : setTitle() -> 제목 설정,  setMessage() -> 내용 입력,  setIcon() -> 아이콘 설정,  setPositiveButton() -> (OK)버튼 설정 setNegativeButton() -> (Cancel)버튼 설정,  setItems() -> 목록 출력,  setSingleChoiceitems() -> 라디오버튼 목록 출력 setMultiChoiceitems() -> 체크박스 목록 출력

3. 대화상자 화면 출력 : show()

 

8. 대화상자에 리스트 형태의 목록을 출력하고 그중 하나를 선택하게 할 수도 있습니다. setItems()는 일반적인 목록을, setSingleChoiceItems()는 라디오버튼 모양의 목록을, setMultiChoiceItems()는 체크박스 모양의 목록을 보여줍니다.

 

9. 토스트나 대화상자를 다양한 모양으로 나타낼 때는 레이아웃 XML 파일을 생성한 후 인플레이트하는 방식을 사용합니다.

 

- 연습문제 -

1. ( 1 ) 메뉴는 키패드의 메뉴 버튼을 누르면 화면 하단에 나오고, ( 2 ) 메뉴는 위젯을 롱클릭 하면 나온다.

답 : 

(1) - 옵션

(2) - 컨텍스트

 

2. '항목 1'과 '항목 2'로 구성된 XML 파일을 코딩하시오. 

먼저 menu 디렉터리와 메뉴 xml 파일을 2개 생성해줍니다.

[app] - [res(마우스 우측 버튼 클릭)] - [new] - [Android Resource Directory] - [Resource type을 menu 선택] - [ok]

[생성된 menu 디렉터리(마우스 우측 버튼 클릭)] - [new]- [Menu Resource File] - [optionmenu와 contextmenu를 각각 생성]

[optionmenu.xml]

[contextmenu.xml]

 

[activity_main.xml]

 

 

[MainActivity.kt]

registerForContextMenu()로 해당 위젯에 컨텍스트 메뉴를 등록합니다.

옵션 메뉴 생성 시 두가지 메소드를 오버라이딩 해줍니다.

1번은 메뉴 인플레이터를 생성하여 이전에 작성한 optionsmenu xml파일을 등록하는 과정입니다.

2번은 각 아이템 항목 마다 동작 상태를 나타낸 것이며 아이템 항목을 클릭하면 3번에 코드가 작성한 내용이 동작합니다.

 

1번은 컨텍스트 메뉴를 특정 위젯에 등록하는 과정입니다. 2번의 경우 파라미터 View v 가 롱클릭한 위젯으로 위의 코드에서는 버튼을 롱클릭 하면 해당 컨텍스트 메뉴가 출력됩니다. (if문을 활용하여 많은 컨텍스트 메뉴를 위젯에 등록 할 수 있습니다 :))

3번은 아이템 클릭 시 동작하는 코드이며 옵션 메뉴와 동일합니다.

 

[실행화면]

컨텍스트 메뉴

 

옵션 메뉴

 

3.  2번의 XML 파일에 대응되는 onOptionsItemSelected()를 코딩하시오.

: (상단의 코드는 항목 1 항목 2 항목 3으로 구성된 컨텍스트메뉴와 옵션메뉴 입니다. onOptionsItemSelected() 메소드는 옵션메뉴의 아이템 클릭시 작동 코드에 대한 메소드입니다. :-() )

 

4. 옵션 메뉴를 선택하면 동물 사진이 바뀌는 프로젝트를 메뉴 XML 파일 없이 작성하시오.

 

[activity_main.xml]

 

[MainActivity.kt]

 

★ add()메소드의 파라미터는 그룹 id, 항목 id, 순번(순서), 제목 순으로 지정하면 됩니다.

항목 id가 onOptionsItemSelected()의 item.itemId의 각 id와 같게 설정하시면 됩니다 :)

 

5. 버튼을 클릭하면 임의의 위치에 이미지가 들어간 토스트가 나오는 프로젝트를 작성하시오.

[app] - [res] - [layout(마우스 우측 버튼 클릭)] - [new] - [Layout Resource File] - [Root element를 LinearLayout으로 변경] - [file name 입력] - [ok]

 

[activity_main.xml]

 

[toast_image.xml]

 

[MainActivity.kt]

(★ 부가 설명)

1.

toastView = View.inflate(this@MainActivity, R.layout.toast_image, null)  : toast_image.xml 파일을 인플레이트하여 toastView(View 타입)변수에 대입합니다.

2.

var toast = Toast(this@MainActivity) var display = (getSystemService(Context.WINDOW_SERVICE) as WindowManager).defaultDisplay var xOffset = (Math.random() * display.width).toInt() var yOffset = (Math.random() * display.height).toInt() toast.setGravity(Gravity.TOP or Gravity.LEFT, xOffset, yOffset) toast.view = toastView toast.show() : 빈 토스트 변수를 생성합니다. 임의의 위치를 구합니다.(현재 안드로이드폰의 디스플레이를 getSystemService()메소드로 구한 후 getWidth()는 화면 너비를, getHeight()는 화면 높이를 돌려줍니다. Math.random()은 0 ~ 1사이에 임의의 수를 구할 수 있습니다. 이를 사용해 임의의 Offset값을 구하고 setGravity() 메소드로 화면 왼쪽(Gravity.LEFT)와 상단(TOP)으로부터 각각 xOffset, yOffset만큼 떨어진 곳에 위치를 지정합니다. 이후 인플레이트한 뷰를 토스트로 사용합니다. 토스트를 화면에 출력합니다.

 

6. 초기화면에서 라디오버튼으로 네 가지 동물 이름을 선택할 수 있고, <그림보기>를 클릭하면 그림이 대화상자로 나오는 프로젝트를 작성하시오.

 

먼저 imgview.xml이라는 레이아웃을 추가해 줍니다. (이름은 뭐든 상관 없습니다 :))

 

[activity_main.xml]

 

[imgview.xml]

 

[MainActivity.kt]

 

• 라디오 그룹 위젯 변수 1
• 라디오 버튼 위젯 변수 4
• 버튼 위젯 변수 1
• 대화상자 위젯 뷰 1
• 이미지 뷰 1

< 부가 설명 >

1. imgView.xml 파일을 인플레이트 하여 dialogView에 대입합니다.

2. when()문으로 다중 분기를 하여 선택된 라디오 버튼의 id값에 따라 이미지를 추가합니다. 또한 아이디 값에 해당하는 text값을 strTitle에 저장합니다.

3. 대화상자를 생성하고 대화상자의 뷰를 imgView로 설정하고 화면에 출력합니다.

 

[결과화면]

 

 

 

 

이상 마치겠습니다! :)) 즐거운 주말 보내세요~