340 likes | 608 Views
CHAP 7 . 메뉴와 대화상자. 메뉴의 종류. 옵션 메뉴 : 사용자가 MENU 키를 누를 때 나타난다 . 컨텍스트 메뉴 : 컨텍스트 메뉴는 사용자가 화면을 일정 시간 이상으로 길게 누르면 나타나는 메뉴이다. 옵션 메뉴. 현재 액티비티와 관련된 동작. 컨텍스트 메뉴. UI 의 어떤 항목과 관련된 동작. 팝업 메뉴. 뷰에 부착된 모달 메뉴 (modal menu) API 레벨 11 부터 제공 팝업 메뉴의 용도 오버플로우 스타일 메뉴 제공 서브 메뉴의 역할 드롭다운 메뉴.
E N D
메뉴의 종류 • 옵션 메뉴: 사용자가 MENU 키를 누를 때 나타난다. • 컨텍스트메뉴: 컨텍스트 메뉴는 사용자가 화면을 일정 시간 이상으로 길게 누르면 나타나는 메뉴이다.
옵션 메뉴 • 현재 액티비티와 관련된 동작
컨텍스트 메뉴 • UI의 어떤 항목과 관련된 동작
팝업 메뉴 • 뷰에 부착된 모달 메뉴(modal menu) • API 레벨 11부터 제공 • 팝업 메뉴의 용도 • 오버플로우 스타일 메뉴 제공 • 서브 메뉴의 역할 • 드롭다운 메뉴
메뉴도 XML로 정의 res/menu.xml <?xmlversion="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/new_game" android:icon="@drawable/icon" android:title="새로운 게임" /> <item android:id="@+id/quit" android:icon="@drawable/icon" android:title="취소" /> </menu> 리소스식별자 아이콘 이미지 메뉴 타이틀
메뉴 팽창 • 메뉴 리소스를 팽창(inflate)하면 실제 메뉴가 생성
메뉴 리소스 팽창 @Override publicbooleanonCreateOptionsMenu(Menu menu) { MenuInflaterinflater = getMenuInflater(); inflater.inflate(R.menu.menu, menu); returntrue; }
옵션 메뉴 • 옵션 메뉴는 액티비티의 옵션을 설정하는 메뉴 • 버전 3.0이상에서는 MENU 버튼과 액션 바의 2가지 방법으로 옵션 메뉴를 사용할 수 있다.
옵션 메뉴 생성 • 사용자가 옵션 키를 누르면 다음의 메소드가 호출된다. @Override publicbooleanonCreateOptionsMenu(Menu menu) { MenuInflaterinflater = getMenuInflater(); inflater.inflate(R.menu.menu, menu); returntrue; }
옵션 메뉴 이벤트 처리 @Override publicbooleanonOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { caseR.id.new_game: Toast.makeText(this, "새로운 게임 선택", Toast.LENGTH_SHORT).show(); returntrue; caseR.id.quit: Toast.makeText(this, "취소 선택", Toast.LENGTH_SHORT).show(); returntrue; default: returnsuper.onOptionsItemSelected(item); } }
컨텍스트 메뉴 • 사용자가 항목 위에서 “오래 누르기”(long-press)를 하면 컨텍스트 메뉴가 표시 • PC에서 마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴와 개념적으로 유사
컨텍스트 메뉴 예제 • 사용자 인터페이스 작성 <?xmlversion="1.0" encoding="UTF-8"?> <LinearLayoutxmlns: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 ContextMenuActivityextends Activity { TextViewtext; @Override public void onCreate(BundlesavedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); text= (TextView) findViewById(R.id.TextView01); registerForContextMenu(text); }
컨텍스트 메뉴 • 컨텍스트 메뉴는 다음과 같은 메소드가 호출되면서 생성된다. @Override publicvoidonCreateContextMenu(ContextMenu menu, View v, ContextMenuInfomenuInfo) { 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"); }
컨텍스트 메뉴 이벤트 처리 publicbooleanonContextItemSelected(MenuItem item) { switch (item.getItemId()) { case1: text.setBackgroundColor(Color.RED); returntrue; case 2: text.setBackgroundColor(Color.GREEN); returntrue; case 3: text.setBackgroundColor(Color.BLUE); returntrue; default: returnsuper.onContextItemSelected(item); } }
서브 메뉴 • 메뉴 안의 메뉴 <?xmlversion="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/file" android:icon="@drawable/file" android:title="file"> <menu> <item android:id="@+id/create_new" android:title="new"/> <item android:id="@+id/open" android:title="open"/> </menu> </item> </menu>
코드로 서브 메뉴 생성 • 기존의 메뉴에 동적으로 서브 메뉴 추가 @Override publicbooleanonCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); SubMenu sub = menu.addSubMenu("file"); sub.add(0, 1, 0, "new"); sub.add(0, 2, 0, "open"); returntrue; }
대화 상자 • AlertDialog • ProgressDialog • DatePickerDialog • TimePickerDialog
대화 상자생성, 표시, 제거 메카니즘 publicclassDialogTestActivityextends Activity { ... protected Dialog onCreateDialog(int id) { switch (id) { case DIALOG_PAUSED_ID: returnnewAlertDialog.Builder(AlertDialogTest.this).create(); ... } returnnull; } ... showDialog(DIALOG_PAUSED_ID); ... dismissDialog(DIALOG_PAUSED_ID); ... }
AlertDialog 제목 텍스트 메시지 버튼 (또는 체크박스 목록)
AlertDialog AlertDialog.Builder builder =newAlertDialog.Builder(this); builder.setTitle("종료 확인 대화 상자") .setMessage("애플리케이션을 종료하시겠습니까?") .setCancelable(false) .setPositiveButton("Yes", newDialogInterface.OnClickListener() { publicvoid onClick(DialogInterface dialog, int whichButton) { AlertDialog2Activity.this.finish(); } }) .setNegativeButton("No", new DialogInterface.OnClickListener() { publicvoid onClick(DialogInterface dialog, int whichButton) { dialog.cancel(); } }); AlertDialog alert = builder.create(); return alert;
목록을 사용하는 대화상자 publicclass AlertDialogTest03 extends Activity { protected Dialog onCreateDialog(int id) { switch (id) { case DIALOG_YES_NO_MESSAGE: finalCharSequence[] items ={ "Red", "Green", "Blue" }; AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("색상을 선택하시오"); builder.setItems(items, new DialogInterface.OnClickListener(){ publicvoid onClick(DialogInterface dialog, int item) { Toast.makeText(getApplicationContext(), items[item], Toast.LENGTH_SHORT).show();}} ); AlertDialog alert = builder.create(); return alert; } returnnull; } ...
체크박스를 사용하는 대화상자 publicclass AlertDialogTest03 extends Activity { protected Dialog onCreateDialog(int id) { switch (id) { case DIALOG_YES_NO_MESSAGE: finalCharSequence[] items ={ "Red", "Green", "Blue" }; AlertDialog.Builder builder = new AlertDialog.Builder(this) builder.setTitle("색상을 선택하시오") builder.setSingleChoiceItems(items, -1, new DialogInterface.OnClickListener() { publicvoid onClick(DialogInterface dialog, int item) { Toast.makeText(getApplicationContext(), items[item], Toast.LENGTH_SHORT).show(); } }); AlertDialog alert = builder.create(); returnalert; } returnnull; } ...
ProgressDialog ProgressDialog dialog = ProgressDialog.show(MyActivity.this, "", "Loading. Please wait...", true, true);
ProgressDialog ... publicclass AlertDialog4Activity extends Activity { @Override protectedvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button b = (Button) findViewById(R.id.Button01); b.setOnClickListener(newOnClickListener() { publicvoid onClick(View v) { ProgressDialog dialog = ProgressDialog.show(this, "", "로딩 중입니다. 기다려주세요.", true, true); // 작업을 한다. //dialog.dismiss(); 작업이 끝나면 dismiss()를 호출 } }); } }
ProgressBar ... public class AlertDialog5Activity extends Activity { protected voidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button b = (Button) findViewById(R.id.Button01); b.setOnClickListener(new OnClickListener() { public voidonClick(View v){ ProgressDialogprogressDialog; progressDialog= newProgressDialog(AlertDialog5Activity.this); progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL); progressDialog.setMessage("Loading..."); progressDialog.show(); progressDialog.setProgress(30); } }); } }
커스텀대화 상자 • 사용자가 마음대로 대화 상자의 내용을 디자인할 수 있는 대화 상자
XML로 대화 상자의 내용을 선언 <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/layout_root" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:padding="10dp" > <ImageView android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginRight="10dp" /> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="fill_parent" android:textColor="#FFF" /> </LinearLayout>
커스텀 대화상자 예제 ... publicclassCustomDialogActivityextends Activity staticfinalintDIALOG_CUSTOM_ID = 0; @Override publicvoidonCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); Button b = (Button) findViewById(R.id.button1); b.setOnClickListener(newOnClickListener() publicvoid onClick(View v) showDialog(DIALOG_CUSTOM_ID); );
@Override protected Dialog onCreateDialog(int id) { Dialog dialog = null; switch (id) { caseDIALOG_CUSTOM_ID: dialog = new Dialog(this); dialog.setContentView(R.layout.custom_dialog); dialog.setTitle("Custom Dialog"); TextView text = (TextView) dialog.findViewById(R.id.text); text.setText("Hello, this is a custom dialog!"); ImageView image = (ImageView) dialog.findViewById(R.id.image); image.setImageResource(R.drawable.android); break; } return dialog; } }