Android Android-UI (DMI) Kang GiHoon. DMI--Kang Gihoon Android UI.

Presentation on theme: "Android Android-UI (DMI) Kang GiHoon. DMI--Kang Gihoon Android UI."— Presentation transcript:

1 android Android-UI (DMI) Kang GiHoon

2 DMI--Kang Gihoon Android UI

3 DMI--Kang Gihoon Android UI 구성요소  View 를 기준으로 파생되어 각 Widget 과 ViewGroup 을 구성한다.  Widget 은 button 등과 같이 단독 view 이다.  ViewGroup 의 ListView 등은 하나이상의 view 로 구성된 view 들의 집합이다.  ViewGroup 의 Layout 은 포함하고 있는 View 에 대한 배치에 대한 정책들을 가지고 있다. TextView, EditText, Button, CheckBox, RadioButton 다른 View 들을 포함하는 상위 클래스 ListView, GridView, Gallery,Sppener,ScrollView 등 LinearLayout,FrameLayout, RelativeLayout,TableLayout AlertDialoge, ProgressDialogue OptionMenu ContextMenu

4 DMI--Kang Gihoon Android UI – View 생성  android 에서 UI 디자인은 주로 xml 형태로 구성된다.  xml 로 구성된 각 내용은 차후 객체화 되어 android 내부의 구별된 id 정보를 바탕으로 application 내에서 참조된다.  R.layout.main : res 의 layout 디렉토리의 xml 파일의 파일 참조  R.id.button1 : res 의 layout 디렉토리의 xml 파일내의 widget id 참조  Button button = (Button)findViewById(R.id.Button01);  물론 Application 내에서 동적으로 각 view 의 객체를 생성 할 수도 있다.  Inflator 를 통해 xml 로 구성된 view 파일을 동적으로 생성 할 수 있다.  Button button = new Button(context);

5 DMI--Kang Gihoon Android UI - Widget  View class 에서 상속된 Class 중에 ViewGroup 을 상속하지 않는 클래스를 지칭 ViewGroup 제외한 각 class 의 subclass  TextView  Button  EditText  CheckBox  RadioButton ....

6 DMI--Kang Gihoon Android UI - TextView  Text 를 표현해주는 View  텍스트를 편집 할 수 없음. 속성 내용 text 보여줄 텍스트 lines 높이가 두줄 textSize12px width, height TextView 넓이 / 높이 autoLink 텍스트뷰에 포함된 URL, 전화번호, 지리적주소등 표현 web/email/phone/map/all (all 일 경우 모두 자동링크 ) background 등..

7 DMI--Kang Gihoon Android UI - Button  기본적인 Text Button  View 에서 상속받은 onClick 이벤트 발생을 통해 어떤 일을 수행. 속성 /Event 내용 text 버튼의 텍스트 gravity 버튼내의 텍스트의 정렬 (top,bottom,left,right) onClick 버튼이 Click 했을때 이벤트 callback 처 리

8 DMI--Kang Gihoon Android UI – Button 의 종류  기본 Button 외 ImageButton / CheckBox/ RadioButton 등 Button 의 종류 내용 Button 텍스트버튼 oncClick 이벤트 Checkbox onClick 이벤트 isChecked() RadioButton onCheckedChanged 이벤트 isChecked() * 보통 RadionGroup 안에서 표현되어 사용 되어짐 *radioGroup.group.getCheckedRadioButtonId() => 그룹중에 checked 된 아이디. ImageButton 이니지를 표시할 수 있는 버튼 onClick 이벤트 setImageResource() 및 setImageBitmap() 등을 통해 버튼이미지 변경가능. ToggleButton On/Off 상태 표시 버튼 onClick 이벤트 isChecked()

9 DMI--Kang Gihoon Android UI – Layout  View 의 배치에 대한 정책들을 담고 있다.  ViewGroup 으로 부터 파생된 5 가지 Layout 을 사용  Layout 하위에 Layout 을 만들수 있는 계층구조 가능  보통 XML 형식으로 layout 을 디자인 하여 layout 다자이너와 개발자를 분리 한다. Layout 의 종류 내용 LinearLayout 수평 또는 수직적으로 view 들을 일렬로 배열 View 들간 상호 겹침 불가능 RelativeLayout 상위 view 들을 참조하여 상대적으로 배치 View 들간 상호 겹침가능 AbsoluteLayout 좌표를 이용한 배치거의 사용안함. FrameLayout 안드로이드의 기본 layout 으로 view 들을 frame 으로 관리 View 상호 겹침 가능 TableLayout Row/Column 형태의 Table 형태로 View 들을 배치 View 상호 겹침 불가능

10 DMI--Kang Gihoon Android UI – LinearLayout  담고 있는 view 들을 수평 또는 수직으로 일괄 배열  orientation = “vertical” : 수직으로 배열  orientation = “horizontal” : 수평으로 배열 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="URL" android:paddingTop="15px" android:paddingRight="10px" /> <EditText android:id="@+id/edittext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="http://www.chol.com" /> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="OK" /> <Button android:id="@+id/cancel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Cancel" /> vertical horizontal

11 DMI--Kang Gihoon Android UI – Relative Layout  각 view 에 대한 상대 위치 정보로 view 들을 배치  xml 의 상위 View 들은 하위 View 들의 객체를 참조 할수 없음.  View 들간의 overlay 가능. [false/true 값을 가지는 값 : 부모 컨테이너 내부에서 위치 결정 ][ 기준 컨테이너를 참조하여 배열 ]

12 DMI--Kang Gihoon Android UI – Relative Layout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5px" > <TextView android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="URL" android:paddingTop="15px" android:paddingRight="10px" /> <EditText android:id="@+id/edittext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_toRightOf="@id/label" android:layout_alignBaseline="@id/label" android:text="http://www.chol.com" /> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignRight="@id/edittext" android:layout_below="@id/edittext" android:text="OK" /> <Button android:id="@+id/cancel" android:layout_width="80px" android:layout_height="wrap_content" android:layout_toLeftOf="@id/ok" android:layout_below="@id/edittext" android:text="Cancel" />

13 DMI--Kang Gihoon Android UI – Table Layout  TableRow 가 행분리 기준  TableRow 안의 View 의 항목의 수가 cloumn 의 수  각 row 는 가장 많은 column 을 기준으로 정렬된다.  첫번째 row, 첫번째 column 은 index 는 0 부터 시작한다. 속성 내용 [TableLayout] stretchColumns 컬럼의 크기를 늘리고자 할 때 사용 ex) stretchColumns = “*” => 모든 컬 럼에 적용. [TableLayout] shrinkColumns 테이블 크기가 컨테이너의 크기를 넘어갈때 특정 컬럼 또는 여러개, 전체 컬럼의 사이즈 를 줄일때 사용 (,) 로 구분하여 복수개 컬럼 지정가능 전체 컬럼대상일 경우 * 사용 [Column Widget] layout_span 해당 column 을 몇개까지 확장 할 것인가를 나타냄 (css 의 colspan 가 비슷한 개념.) [Column Widget] layout_column 배치하려는 column 번호를 나타냄 ex) 2 이면 해당 위젯을 3 번째 컬럼부터 배 치 stretchColumns = * layout_span = 2 layout_column = 2

14 DMI--Kang Gihoon Android UI – Frame Layout  왼쪽상단을 기준의 모든 view 들이 overlay  일반적으로 View 들을 동적으로 보였다 안보였다 할 경우 사용.  ex) Progress 진행 상태 View 보여주고 없어짐. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <EditText android:text = " 뭐시여 " android:id="@+id/name" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="ex) name" /> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="~~~~~~~~~ 또겹친다요." /> <Button android:id="@+id/cancel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 나도 겹치자." />

15 DMI--Kang Gihoon Android UI – Menu  Activity 상에서 Menu 버튼을 클릭했을때 나타내는 메뉴  메뉴는 크게 Option 메뉴 와 Context 메뉴로 구성됨.  xml 로 메뉴파일 정의 가능 : res > menu 폴더 생성 후 menu 관련 xml 파일 생성 메뉴 옵션 내용 OptionMenu *Menu 버튼 Click 시 하단에 나타남 *onOptionsItemSelected () 에서 메뉴 생성 *onOptionsItemSelected() : event 처리 ContextMenu *registerForContextMenu(view) 를 등록하고 해 당 view 를 길게 터치했을 경우 발생 *menuitem 의 checkable 속성으로 checkbox 출력 여부 표시 *onCreateOptionsMenu() 에서 메뉴생성 *onContextItemSelected() : event 처리 [OptionMenu] [ContextMenu] <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/MnuHi" android:title=" 안녕하세요.?" android:checkable="true" android:checked="false"/> <item android:id="@+id/MnuBye" android:title=" 아따 안녕하신가 ?" android:checkable="true" android:checked="false"/> Menu xml 정의

16 DMI--Kang Gihoon Android UI – Dialog AlertDialog ProgressDialog[Time/Data]Dialog

17 DMI--Kang Gihoon Android UI – Dialoge  Dialoge 의 종류 Dialoge 내용 AlertDialog 대부분 Dialgoue UI 제공 Title / Text Message One, Two, or Three Buttons List of Selectable Items(Optional Checkboxes, or Radio Buttons) [ 버튼생성 순서 ] setPositiveButton() setNeutralButton() setNegativeButton() [back 버튼 눌러도 안 닫히게 할려면 ] AlertDialg.Builder serCancelable (boolean cancelable) => false ProgressDialogProgress Wheel or Progress Bar DatePickerDialog 날짜 설정 TimePickerDialog 시간설정 [Dialoge 보이기 ] showDialog(int id) [Dialoge 보이기 ] showDialog(int id) [Dialoge 생성 ] onCreateDialog (int id) onPrepareDialog() [Dialoge 생성 ] onCreateDialog (int id) onPrepareDialog() * showDialoge 의 id 에 따라 onCreateDialoge 에서 생성 * 실제 dialoge 생성시 onPrepareDialog() 를 호출 여기서 다이얼로그 상태 변경시 처리 가능 [Dialoge 안보이기 / 삭제 ] dismissDialog(int id) removeDialog(int id) [Dialoge 안보이기 / 삭제 ] dismissDialog(int id) removeDialog(int id) [Activity]

18 DMI--Kang Gihoon Android UI – ListView (AdapterView)  ViewGroup 의 하위 클래스의 비어 있는 컨테이너  ListAdapter 를 통해 데이터와 데이터를 표현한 View 를 셋팅한다.  ListAdapter 의 하위 클래스등를 사용하여 Adapter 세팅.  ArrayAdapter : 단순한 텍스트 view 리스트 표현  SimpleAdapter : xml 형태로 정의된 view 들을 ArrayList 의 내부 map 형태를 가진 data 와 매핑.  SimpleCursorAdapter : xml 형태로 정의된 view 들을 데이터베이스 cursor 형태의 data 와 매핑. Dialoge 내용 ListView 생성 ArrayAdapter adapter = new ArrayAdapter(getApplicationContext(), android.R.layout.simple_list_item_single_choice, datas); listView.setAdapter(adapter) ; ListView 이벤트 OnItemClickListener() Callback 구현 => onItemClick() : 리스트중 선택된 row 가 클릭되었을 경우 발생. Adapter 데이터 표현기본 내장된 android view 사용하여 데이터 표현 가능.

19 DMI--Kang Gihoon Android UI – Custom ListView  기존 Adapter 를 상속하여 CustomAdapter 구현  기존 ArrayAdapter 등을 상속하여 실제 row 를 보여줄때 호출하는 getView() 함수 재정의.  추상 class 인 BaseAdapter 를 상속하여 CustomAdapter 구현  getCount() / getItem() / getItemId() / getView() 함수 재정의  CustomAdapter 는 사용자 정의의 view 를 담당할 xml 파일과 view 에 해당하는 Data 를 매핑 <LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" > <ImageView android:id="@+id/rowImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon" > <TextView android:text="@+id/TextView01" android:id="@+id/rowTextView01" android:layout_width="wrap_content" android:layout_height="wrap_content"> getView() String[] datas = {"SM3","SM5","SM7","SONATA","AVANTE","listView"}; Integer[] images = {R.drawable.car1,R.drawable.car2,R.drawable.car3,R.drawable.car4,R.drawable.car5,R.drawable.car6}; [View] [Datas] Adapter

20 DMI--Kang Gihoon Android UI – Gallery (AdapterView)  ImageView 의 List 를 표현하는 컨테이너  BaseAdapter 를 상속을 통해 ImageAdapter 표현  Gallery 내의 액자 표현을 위해 각 imageView 마다 android:galleryItemBackground 배경 설정.

21 DMI--Kang Gihoon Android UI – WebView  WebPage 를 표현하는 View  local 페이지 및 원격 URL 페이지 호출.  페이지내의 javascript 및 link 제어 가능  *AndroidManifest.xml 파일에 인터넷 연결 permission 설정  메뉴 옵션 내용 loadUrl(String url) * 외부 페이지 호출 loadDataWithBaseURL (String baseUrl, String data, String mimeType, String encoding, String historyUrl) *local html 페이지 내용 WebView 에 적용 setWebViewClient(WebViewClient webviewClient) WebViewClient 상속을 통해 특정 html 파일 컨트롤 -ex) href=“tel:010~” 링크를 전화걸기로 연결 가능. => shouldOverrideUrlLoading() setWebChromeClient(WebChromeCl ient webChromeClient) WebChromeClient 상속을 통해 크롬 브라우저 의 이벤트 처리 ex) javascript 으 alert ㄱ 방생 했을 경 우등. 클릭시 전화걸기 화면으로 이동

22 DMI--Kang Gihoon Android UI – Thread  android 에서 main thread 가 5 초정도 응답없을 경우 ANR (Application Not Response) 오류메시지 발생  네트웍 자원등 오래 걸리는 작업을 위해 Thread 사용 필수  안드로이드 UI 컨트롤은 안드로이드 내부 UI 쓰레드 메커니즘에 의해 관리 ( 큐잉방식 )  사용자 정의 Thread 에서 안드로이드 view 직접 컨트롤시 에러발생  사용자 정의 Thread 는 Handler 또는 View 의 post() 를 통해 view 컨트롤 해야함. View 사용자 정의 Thread 사용자 정의 Thread UI Thread [Message Queue ] Handler

23 DMI--Kang Gihoon Android UI – Thread 사용자 정의 Thread 사용자 정의 Thread Handler Thread worker = new Thread(new Runnable() { public void run() { Message msg = null; for(nProgress = 0; nProgress<=100; nProgress+=10) { msg = handler.obtainMessage(); //Handler 에게 메시지 전달 handler.sendMessage(msg); } }); handle = new Handler() { @Override // 사용자 정의 Thread 에서 받은 데이처 처리 public void handleMessage(Message msg) { textView.setText(“OK”); } };  Handler 객체의 생성은 사용자 thread 외부 에서 생성 해야함.  사용자 Thread 는 handler.sendMessage(msg) 를 통해 Handler 에게 Message 전송  Handler 는 handleMessage(Message msg) 를 통해 Message 전달 받음.  handler.obtainMessage() 는 Handler 에서 세팅된 메시지 값을 전달 받은 Message