07. 메뉴와 대화상자 제목. 07. 메뉴와 대화상자 제목 메뉴를 작성하고 사용하는 방법을 배운다. 토스트의 다양한 출력 방법을 알아본다. 대화상자의 사용법을 익힌다.

Presentation on theme: "07. 메뉴와 대화상자 제목. 07. 메뉴와 대화상자 제목 메뉴를 작성하고 사용하는 방법을 배운다. 토스트의 다양한 출력 방법을 알아본다. 대화상자의 사용법을 익힌다."— Presentation transcript:

1

2 07. 메뉴와 대화상자 제목

3 메뉴를 작성하고 사용하는 방법을 배운다. 토스트의 다양한 출력 방법을 알아본다. 대화상자의 사용법을 익힌다.

4

5 1. 메뉴 메뉴 개요 메뉴는 사용자에게 여러 개 중 하나를 선택할 수 있는 방식을 제공
옵션 메뉴(Option Menu)와 컨텍스트 메뉴(Context Menu) 두 가지로 구분 메뉴를 사용하는 방법은 메뉴 XML 파일을 생성한 후 Java에서 호출하는 방법과, XML 파일 없이 Java 코드만으로 메뉴를 생성하는 방법이 있음

6 1. 메뉴 ▶ XML을 이용한 옵션 메뉴 옵션 메뉴는 키패드의 “MENU”버튼을 누르면 나타남. 옵션 메뉴 설정 순서

7 1. 메뉴 ▶ XML을 이용한 옵션 메뉴 onCreateOptionMenu() 메소드 기본 형식
onOptionsItemSelected( ) 메소드 기본 형식 인플래이터(Inflater)는 풍선에 바람을 넣어서 실제 객체로 만들어 사용한다는 의미로, 메뉴 인플래이터(MenuInflater) 개체는 메뉴 XML 파일을 Java 코드에서 가져와서 사용하는 것이다.

8 1. 메뉴 ▶ XML을 이용한 옵션 메뉴 [실습7-1] 배경색 변경 앱 만들기 (1/8)
간단히 옵션 메뉴를 만들고, 옵션 메뉴를 클릭하면 레이아웃의 배경색이 바뀌는 프로젝트를 만들자. 또 서브 메뉴를 만드는 방법도 살펴보자. 프로젝트 정보 프로젝트 이름 : Project7_1 패키지 이름 : com.cookandroid.project7_1 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project7_1Activity 레이아웃 이름 : main 타이틀 : Project7_1

9 1. 메뉴 ▶ XML을 이용한 옵션 메뉴 [실습7-1] 배경색 변경 앱 만들기 (2/8) 화면 디자인
바깥의 LinearLayout의 id를 baseLayout으로 지정 TextView 1개와 Button 1개를 생성. 버튼의 id는 button1

10 1. 메뉴 ▶ XML을 이용한 옵션 메뉴 [실습7-1] 배경색 변경 앱 만들기 (3/8) 메뉴 XML 추가
[menu] 폴더에 menu1.xml 추가

11 1. 메뉴 ▶ XML을 이용한 옵션 메뉴 [실습7-1] 배경색 변경 앱 만들기 (4/8) 메뉴 XML 코딩

12 1. 메뉴 ▶ XML을 이용한 옵션 메뉴 [실습7-1] 배경색 변경 앱 만들기 (5/8) Java 코딩 1
main.xml의 레이아웃과, 버튼에 대응할 전역 변수 2개 메인 함수인 onCreate() 안에서 위젯변수 2개의 위젯 대입

13 1. 메뉴 ▶ XML을 이용한 옵션 메뉴 [실습7-1] 배경색 변경 앱 만들기 (6/8)
onCreateOptionsMenu() 오버라이드

14 1. 메뉴 ▶ XML을 이용한 옵션 메뉴 [실습7-1] 배경색 변경 앱 만들기 (7/8) Java 코딩 2
자동완성된 코드에 나머지를 코딩. 거의 고정된 코드임.

15 1. 메뉴 ▶ XML을 이용한 옵션 메뉴 [실습7-1] 배경색 변경 앱 만들기 (8/8) Java 코딩 3
onOptionsItemSelected()를 자동완성후 코딩

16 1. 메뉴 ▶ XML을 이용한 옵션 메뉴 [직접 풀어보기 7-1] [실습 7-1]을 다음과 같이 변경하자.
레이아웃은 RelativeLayout을 사용하고, 텍스트뷰, 에디트텍스트, 이미지뷰 3개를 적절히 배치한다. 에디트텍스트에 각도를 입력하고, 옵션 메뉴의 [그림 회전]을 선택하면 해당 각도만큼 이미지뷰가 회전된다. 한라산/추자도/범섬 옵션 메뉴는 라디오버튼과 같이 세 개 중 하나만 체크되도록 하고, 선택하면 이미지뷰가 해당 이미지로 바뀌도록 한다. (이미지나 이미지이름은 아무거나 사용해도 된다.)

17 1. 메뉴 ▶ Java 코드만 이용한 옵션 메뉴 방식 onCreateOptionsMenu() 메소드 안에서 메뉴 XML 파일에 접근하는 대신에 직접 Menu.add() 메소드로 메뉴 항목을 추가

18 1. 메뉴 ▶ XML을 이용한 컨텍스트 메뉴 컨텍스트 메뉴 개요 컨텍스트 메뉴 설정 순서
컨텍스트 메뉴는 위젯을 롱클릭하면 나타남 옵션 메뉴는 1개만 사용가능했으나, 컨텍스트 메뉴는 각 위젯별로 메뉴를 등록할 수 있으므로 여러 개 사용 가능. 화면 중앙에 나타나면 Windows의 팝업창과 비슷함. 컨텍스트 메뉴 설정 순서

19 1. 메뉴 ▶ XML을 이용한 컨텍스트 메뉴 컨텍스트 메뉴 XML 파일
위젯별 컨텍스트 메뉴를 onCreateContextMenu() 메소드에 if문으로 등록해야 함

20 1. 메뉴 ▶ XML을 이용한 컨텍스트 메뉴 [실습7-2] 배경색 변경 및 버튼 변경 앱 만들기 (1/6)
[실습 7-1]과 비슷한 작동을 하는 컨텍스트 메뉴를 만든다. <배경색 변경>버튼을 롱클릭하면 배경색을 변경하는 3가지 컨텍스트 메뉴가 나오고, <버튼 변경>버튼을 롱클릭하면 버튼의 회전과 크기를 변경하는 2가지 컨텍스트 메뉴가 나오게 한다. 프로젝트 정보 프로젝트 이름 : Project7_2 패키지 이름 : com.cookandroid.project7_2 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project7_2Activity 레이아웃 이름 : main 타이틀 : Project7_2

21 1. 메뉴 ▶ XML을 이용한 컨텍스트 메뉴 [실습7-2] 배경색 변경 및 버튼 변경 앱 만들기 (2/6) 화면 디자인
Button 2개를 생성. 버튼의 id는 button1, button2

22 1. 메뉴 ▶ XML을 이용한 컨텍스트 메뉴 [실습7-2] 배경색 변경 및 버튼 변경 앱 만들기 (3/6) 메뉴 XML 추가
[menu] 폴더에 menu1.xml, menu2.xml 추가

23 1. 메뉴 ▶ XML을 이용한 컨텍스트 메뉴 [실습7-2] 배경색 변경 및 버튼 변경 앱 만들기 (4/6) Java 코딩 1
main.xml의 레이아웃과, 버튼 2개에 대응할 전역 변수 3개 메인 함수인 onCreate() 안에서 위젯변수 3개의 위젯 대입 2개의 버튼 위젯변수를 registerForContextMenu() 에 등록

24 1. 메뉴 ▶ XML을 이용한 컨텍스트 메뉴 [실습7-2] 배경색 변경 및 버튼 변경 앱 만들기 (5/6) Java 코딩 2
onCreateContextMenu()를 자동으로 오버라이딩하고 내부를 코딩 어떤 위젯을 선택했는지에 따라 인플레이트하는 메뉴 XML 파일을 다르게 함

25 1. 메뉴 ▶ XML을 이용한 컨텍스트 메뉴 [실습7-2] 배경색 변경 및 버튼 변경 앱 만들기 (6/6) Java 코딩 3
실제로 동작할 메소드 onContextItemSelected( )를 같은 방식으로 자동완성한 후 코딩 메소드의 내용은 [실습 7-1]의 onOptionsItemSelected( )와 거의 비슷함. 단 [예제 7-5]의 14행과 17행의 button1을 button2로 변경

26 1. 메뉴 ▶ XML을 이용한 컨텍스트 메뉴 [직접 풀어보기 7-2]
[실습 7-2]에서 실습한 컨텍스트 메뉴를 메뉴 XML 파일 없이 Java 코드로만 완성하자. [예제 7-6]을 참조한다.

27 2. 토스트 토스트 개요 일반적인 형태 토스트의 위치 변경 사용자가 인식해야 할 작은 메시지를 줄 때 편리
프로그래머가 디버깅 용도로 사용하기에도 적당 일반적인 형태 토스트의 위치 변경

28 2. 토스트 토스트 예제

29 3. 대화상자 ▶ 기본 대화상자 개요 화면에 메시지를 보낸 후, 확인/취소 등의 사용자 선택을 받음 일반적인 사용 방법

30 3. 대화상자 ▶ 기본 대화상자 기본 대화상자 예제 1 : 버튼 없음

31 3. 대화상자 ▶ 기본 대화상자 기본 대화상자 예제 2 : 버튼 1개와 클릭 시 작동코드

32 3. 대화상자 ▶ 목록 대화상자 목록 대화상자 예제 1 : 기본 목록 대화상자

33 3. 대화상자 ▶ 목록 대화상자 목록 대화상자 예제 2 : 라디오버튼 목록 대화상자

34 3. 대화상자 ▶ 목록 대화상자 목록 대화상자 예제 3 : 체크박스 목록 대화상자

35 3. 대화상자 [실습7-3] 사용자 정보 입력 앱 만들기 (1/9)
그림과 색상이 들어간 예쁜 토스트와 사용자 정보를 입력받는 대화상자를 만든다. 프로젝트 정보 프로젝트 이름 : Project7_3 패키지 이름 : com.cookandroid.project7_3 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project7_3Activity 레이아웃 이름 : main 타이틀 : Project7_3

36 3. 대화상자 [실습7-3] 사용자 정보 입력 앱 만들기 (2/9) 화면 디자인
텍스트뷰 2개와 Button 1개를 생성. 위젯의 id는 tvName, tv , button1

37 3. 대화상자 [실습7-3] 사용자 정보 입력 앱 만들기 (3/9) 대화상자용 레이아웃 XML 추가 (1/2)
[layout] 폴더에 [Android XML Layout File] 추가 : 파일명은 dialog1.xml

38 3. 대화상자 [실습7-3] 사용자 정보 입력 앱 만들기 (4/9) 대화상자용 레이아웃 XML 추가 (2/2)
텍스트뷰, 에디트텍스트, 텍스트뷰, 에디트텍스트의 순서로 생성 위젯의 id는 에디트텍스트에만 dlgEdt1, dlgEdt2로 지정

39 3. 대화상자 [실습7-3] 사용자 정보 입력 앱 만들기 (5/9) 토스트용 XML 추가 : 파일명 toast1.xml
이미지뷰, 텍스트뷰, 이미지뷰의 순서로 생성 텍스트뷰에 id를 toastText1으로 지정 레이아웃의 배경색은 빨간색으로 지정

40 3. 대화상자 [실습7-3] 사용자 정보 입력 앱 만들기 (6/9) Java 코딩 1
main.xml의 텍스트뷰 2개, 버튼1개에 대응할 전역 변수 3개 dialog1.xml의 에디트텍스트에 대응할 전역 변수 2개 toast1.xml의 텍스트뷰 1개에 대응할 전역 변수 1개 dialog1.xml과 toast1.xml을 인플레이트할 View 변수 2개 메인 함수인 onCreate() 안에서 main.xml의 위젯변수 3개의 위젯 대입

41 3. 대화상자 [실습7-3] 사용자 정보 입력 앱 만들기 (7/9) Java 코딩 2
button1 변수를 클릭했을 때, 리스너를 작성 onClick() 메소드 안에 대화상자를 만들고 <확인>과 <취소>버튼을 추가 <확인>, <취소> 버튼의 클릭시 실행할 내용은 일단 null로 입력

42 3. 대화상자 [실습7-3] 사용자 정보 입력 앱 만들기 (8/9) Java 코딩 3
대화상자의 <확인> 버튼을 클릭했을 때, 대화상자에서 입력한 사용자 이름과 이메일이 본 화면(main.xml)의 텍스트뷰에 써지도록 코딩

43 3. 대화상자 [실습7-3] 사용자 정보 입력 앱 만들기 (9/9) Java 코딩 4
<취소> 버튼을 클릭했을 때, toast1.xml이 토스트 메시지로 나오도록 설정

44 3. 대화상자 [직접 풀어보기 7-3] [실습 7-3]을 다음과 같이 변경하자.
main.xml의 텍스트뷰를 에디트텍스트로 변경하자. <여기를 클릭>을 누르면, main.xml의 에디트텍스트 내용이 대화상자의 에디트텍스트에 보이도록 한다. 대화상자에서 <확인>을 누르면 다시 대화상자의 에디트텍스트 내용이 main.xml의 에디트텍스트 내용으로 변경되도록 한다. 대화상자에서 <취소>를 누르면 토스트가 화면 임의의 위치에 랜덤하게 나타나도록 한다.

45 옵션 메뉴 설정과 컨텍스트 메뉴 설정 단계

46 메뉴 XML 파일 형식 대화상자 설정 순서 토스트의 일반적인 사용 형식

47