CHAP 7. 메뉴와 대화상자

안드로이드의 사용자 인터페이스 내비게이션바 액션바 제스처

메뉴의 종류 옵션 메뉴: 액션바에 표시된다. 컨텍스트 메뉴: 사용자가 화면의 요소를 길게 누르 면 나타나는 메뉴이다. 팝업메뉴

메뉴를 생성하는 방법 코드로 메뉴 생성하기 XML로 메뉴 생성하기

메뉴를 XML로 정의 리소스 식별자 아이콘 이미지 메뉴 타이틀

메뉴 팽창 메뉴 리소스를 팽창(inflate)하면 실제 메뉴가 생성

메뉴 리소스 팽창 @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.mymenu, menu); return true; }

옵션 메뉴 현재 액티비티와 관련된 동작 2.3이상 2.3이하

옵션 메뉴 클릭 이벤트 처리

예제: 옵션 메뉴 생성 메뉴를 나타내는 XML 파일 생성

옵션 메뉴 생성 사용자가 옵션 키를 누르면 다음의 메소드가 호출된 다.

옵션 메뉴 이벤트 처리

실행 결과

코드로 옵션 메뉴 생성하기 #1

코드로 옵션 메뉴 생성하기 #2

컨텍스트 메뉴 UI의 특정 항목과 관련된 동작

컨텍스트 메뉴 종류 플로팅 컨텍스트 메뉴: 컨텍스트 액션 모드: 사용자가 항목 위에서 오래 누르기(long click)를 하면 메뉴가 대화 상자처럼 떠서 표시된다. 컨텍스트 액션 모드: 현재 선택된 항목에 관련된 메뉴가 액션바에 표시된다. 여러 항목을 선택하여 특정한 액션을 한꺼번에 적용할 수 있다.

컨텍스트 메뉴 사용자가 항목 위에서 “오래 누르기”(long-press)를 하면 컨텍스트 메뉴가 표시 PC에서 마우스 오른쪽 버튼을 눌렀을 때 나오는 메 뉴와 개념적으로 유사

컨텍스트 메뉴 예제 사용자 인터페이스 작성 <?xml version="1.0" encoding="UTF-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/LinearLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/TextView01" 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>

컨텍스트 메뉴 예제 ... public class ContextMenuActivity extends Activity {         TextView text;         @Override         public void onCreate(BundlesavedInstanceState) {              super.onCreate(savedInstanceState);              setContentView(R.layout.main);              text = (TextView) findViewById(R.id.TextView01);               registerForContextMenu(text);         }

컨텍스트 메뉴 컨텍스트 메뉴는 다음과 같은 메소드가 호출되면서 생성된다. @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"); }

컨텍스트 메뉴 이벤트 처리 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); }

실행 결과

액션바 애플리케이션의 로고 표시 탭이나 드롭다운 리스트를 이용하여서 내비게이션 메뉴와 뷰 전환 기능을 제공한다. 탭이나 드롭다운 리스트를 이용하여서 내비게이션 메뉴와 뷰 전환 기능을 제공한다. 액션 오버플로우 액션버튼 앱아이콘 뷰컨트롤

액션바 예제 Menu xml에서 <menu xmlns:app=“ … “ 추가 <item app:showAsAction=“ “ 으로 변경 /res/drawable 폴더에 다음과 같은 아이콘을 복사

XML 파일

실행 결과

대화 상자 대화 상자(dialog)는 사용자에게 메시지를 출력하고 사용자로부터 입력을 받아들이는 아주 보편적인 사 용자 인터페이스

대화 상자의 종류 AlertDialog DatePickerDialog TimePickerDialog

대화 상자 생성, 표시, 제거 메카니즘 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);

AlertDialog

AlertDialog

목록을 사용하는 대화상자 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; ...

라디오 버튼을 사용하는 대화상자 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; ...

DatePickerDialog 날짜와 시간을 입력받는 대화 상자

DatePickerDialog

DatePickerDialog

커스텀 대화 상자 사용자가 마음대로 대화 상자의 내용을 디자인할 수 있는 대화 상자

예제: 로그인 대화 상자

대화 상자를 XML로 정의

코드

실행 결과

알림 기능 알림기능(notification)은 어떤 이벤트가 발생하였을 때, 앱이 사용자에게 전달하는 메시지이다.

예제: 버튼을 누르면 알림을 보내는 앱

코드

실행 결과

Lab: 예약 앱 작성 식당 예약 앱

사용자 인터페이스 #1

사용자 인터페이스 #2