Download presentation
Presentation is loading. Please wait.
1
CHAP 7. 메뉴와 대화상자
2
안드로이드의 사용자 인터페이스 내비게이션바 액션바 제스처
3
메뉴의 종류 옵션 메뉴: 액션바에 표시된다. 컨텍스트 메뉴: 사용자가 화면의 요소를 길게 누르 면 나타나는 메뉴이다. 팝업메뉴
4
메뉴를 생성하는 방법 코드로 메뉴 생성하기 XML로 메뉴 생성하기
5
메뉴를 XML로 정의 리소스 식별자 아이콘 이미지 메뉴 타이틀
6
메뉴 팽창 메뉴 리소스를 팽창(inflate)하면 실제 메뉴가 생성
7
메뉴 리소스 팽창 @Override public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.mymenu, menu); return true; }
8
옵션 메뉴 현재 액티비티와 관련된 동작 2.3이상 2.3이하
9
옵션 메뉴 클릭 이벤트 처리
10
예제: 옵션 메뉴 생성 메뉴를 나타내는 XML 파일 생성
11
옵션 메뉴 생성 사용자가 옵션 키를 누르면 다음의 메소드가 호출된 다.
12
옵션 메뉴 이벤트 처리
13
실행 결과
14
코드로 옵션 메뉴 생성하기 #1
15
코드로 옵션 메뉴 생성하기 #2
16
컨텍스트 메뉴 UI의 특정 항목과 관련된 동작
17
컨텍스트 메뉴 종류 플로팅 컨텍스트 메뉴: 컨텍스트 액션 모드:
사용자가 항목 위에서 오래 누르기(long click)를 하면 메뉴가 대화 상자처럼 떠서 표시된다. 컨텍스트 액션 모드: 현재 선택된 항목에 관련된 메뉴가 액션바에 표시된다. 여러 항목을 선택하여 특정한 액션을 한꺼번에 적용할 수 있다.
18
컨텍스트 메뉴 사용자가 항목 위에서 “오래 누르기”(long-press)를 하면 컨텍스트 메뉴가 표시
PC에서 마우스 오른쪽 버튼을 눌렀을 때 나오는 메 뉴와 개념적으로 유사
19
컨텍스트 메뉴 예제 사용자 인터페이스 작성 <?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Only I can change my life. No one can do it for me." android:textSize="50px" android:typeface="serif" /> </LinearLayout>
20
컨텍스트 메뉴 예제 ... public class ContextMenuActivity extends Activity {
TextView text; public void onCreate(BundlesavedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); text = (TextView) findViewById(R.id.TextView01); registerForContextMenu(text); }
21
컨텍스트 메뉴 컨텍스트 메뉴는 다음과 같은 메소드가 호출되면서 생성된다. @Override
컨텍스트 메뉴는 다음과 같은 메소드가 호출되면서 생성된다. @Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu, v, menuInfo); menu.setHeaderTitle("컨텍스트 메뉴"); menu.add(0, 1, 0, "배경색: RED"); menu.add(0, 2, 0, "배경색: GREEN"); menu.add(0, 3, 0, "배경색: BLUE"); }
22
컨텍스트 메뉴 이벤트 처리 public boolean onContextItemSelected(MenuItem item) {
switch (item.getItemId()) { case 1: text.setBackgroundColor(Color.RED); return true; case 2: text.setBackgroundColor(Color.GREEN); case 3: text.setBackgroundColor(Color.BLUE); default: return super.onContextItemSelected(item); }
23
실행 결과
24
액션바 애플리케이션의 로고 표시 탭이나 드롭다운 리스트를 이용하여서 내비게이션 메뉴와 뷰 전환 기능을 제공한다.
탭이나 드롭다운 리스트를 이용하여서 내비게이션 메뉴와 뷰 전환 기능을 제공한다. 액션 오버플로우 액션버튼 앱아이콘 뷰컨트롤
25
액션바 예제 Menu xml에서 <menu xmlns:app=“ … “ 추가
<item app:showAsAction=“ “ 으로 변경 /res/drawable 폴더에 다음과 같은 아이콘을 복사
26
XML 파일
28
실행 결과
29
대화 상자 대화 상자(dialog)는 사용자에게 메시지를 출력하고 사용자로부터 입력을 받아들이는 아주 보편적인 사 용자 인터페이스
30
대화 상자의 종류 AlertDialog DatePickerDialog TimePickerDialog
31
대화 상자 생성, 표시, 제거 메카니즘 public class DialogTestActivity extends Activity { ... protected Dialog onCreateDialog(int id) { switch (id) { case DIALOG_PAUSED_ID: return new AlertDialog.Builder(AlertDialogTest.this).create(); } return null; showDialog(DIALOG_PAUSED_ID); ... dismissDialog(DIALOG_PAUSED_ID);
32
AlertDialog
33
AlertDialog
34
목록을 사용하는 대화상자 public class AlertDialogTest03 extends Activity {
protected Dialog onCreateDialog(int id) { switch (id) { case DIALOG_YES_NO_MESSAGE: final CharSequence[] items ={ "Red", "Green", "Blue" }; AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("색상을 선택하시오"); builder.setItems(items, new DialogInterface.OnClickListener(){ public void onClick(DialogInterface dialog, int item) { Toast.makeText(getApplicationContext(), items[item], Toast.LENGTH_SHORT).show();}} ); AlertDialog alert = builder.create(); return alert; } return null; ...
35
라디오 버튼을 사용하는 대화상자 public class AlertDialogTest03 extends Activity {
라디오 버튼을 사용하는 대화상자 public class AlertDialogTest03 extends Activity { protected Dialog onCreateDialog(int id) { switch (id) { case DIALOG_YES_NO_MESSAGE: final CharSequence[] items ={ "Red", "Green", "Blue" }; AlertDialog.Builder builder = new AlertDialog.Builder(this) builder.setTitle("색상을 선택하시오") builder.setSingleChoiceItems(items, -1, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int item) { Toast.makeText(getApplicationContext(), items[item], Toast.LENGTH_SHORT).show(); } }); AlertDialog alert = builder.create(); return alert; return null; ...
36
DatePickerDialog 날짜와 시간을 입력받는 대화 상자
37
DatePickerDialog
38
DatePickerDialog
39
커스텀 대화 상자 사용자가 마음대로 대화 상자의 내용을 디자인할 수 있는 대화 상자
40
예제: 로그인 대화 상자
41
대화 상자를 XML로 정의
42
코드
43
실행 결과
44
알림 기능 알림기능(notification)은 어떤 이벤트가 발생하였을 때, 앱이 사용자에게 전달하는 메시지이다.
45
예제: 버튼을 누르면 알림을 보내는 앱
46
코드
47
실행 결과
48
Lab: 예약 앱 작성 식당 예약 앱
49
사용자 인터페이스 #1
50
사용자 인터페이스 #2
Similar presentations
