Android UI

Download Report

Transcript Android UI 

android
Android-UI
(DMI) Kang GiHoon
Android UI
DMI--Kang Gihoon
Android UI 구성요소




View 를 기준으로 파생되어 각 Widget과 ViewGroup을 구성한다.
Widget 은 button등과 같이 단독 view이다.
ViewGroup의 ListView등은 하나이상의 view로 구성된 view들의 집합이다.
ViewGroup의 Layout은 포함하고 있는 View에 대한 배치에 대한 정책들을 가지고 있다.
TextView, EditText, Button,
CheckBox, RadioButton
다른 View들을 포함하는 상위 클래스
AlertDialoge,
ProgressDialogue
OptionMenu
ContextMenu
ListView, GridView, Gallery
,Sppener,ScrollView 등
LinearLayout,FrameLayout,
RelativeLayout,TableLayout
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);
DMI--Kang Gihoon
Android UI - Widget
 View class 에서 상속된 Class중에 ViewGroup을 상속하지 않는 클래스를 지칭
ViewGroup 제외한 각 class의 subclass






TextView
Button
EditText
CheckBox
RadioButton
....
DMI--Kang Gihoon
Android UI - TextView
 Text를 표현해주는 View
 텍스트를 편집 할 수 없음.
속성
내용
text
보여줄 텍스트
lines
높이가 두줄
textSize
12px
width, height
TextView 넓이/높이
autoLink
텍스트뷰에 포함된 URL,전화번호,
지리적주소등 표현
web/email/phone/map/all
(all일 경우 모두 자동링크)
background 등..
DMI--Kang Gihoon
Android UI - Button
 기본적인 Text Button
 View에서 상속받은 onClick 이벤트 발생을 통해 어떤 일을 수행.
속성 /Event
내용
text
버튼의 텍스트
gravity
버튼내의 텍스트의 정렬
(top,bottom,left,right)
onClick
버튼이 Click 했을때 이벤트 callback 처
리
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()
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 상호 겹침
불가능
DMI--Kang Gihoon
Android UI – LinearLayout

담고 있는 view들을 수평 또는 수직으로 일괄 배열
 orientation = “vertical” : 수직으로 배열

orientation = “horizontal” : 수평으로 배열
vertical
<?xml version="1.0" encoding="utf-8"?>
<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" />
horizontal
<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" />
DMI--Kang Gihoon
Android UI – RelativeLayout
 각 view 에 대한 상대 위치 정보로 view 들을 배치
 xml의 상위 View들은 하위 View들의 객체를 참조 할수 없음.

View들간의 overlay 가능.
[false/true 값을 가지는 값 : 부모 컨테이너 내부에서 위치 결정]
[기준 컨테이너를 참조하여 배열]
DMI--Kang Gihoon
Android UI – RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5px" >
<!-- EditText나 Button들의 id(@id/edittext, @id/ok, @id/cancel)를 사용할 수 없음 -->
<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" />
</RelativeLayout>
DMI--Kang Gihoon
Android UI – TableLayout
 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
DMI--Kang Gihoon
Android UI – FrameLayout
 왼쪽상단을 기준의 모든 view 들이 overlay
 일반적으로 View들을 동적으로 보였다 안보였다 할 경우 사용.

ex) Progress 진행 상태 View 보여주고 없어짐.
<?xml version="1.0" encoding="utf-8"?>
<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="나도 겹치자." />
</FrameLayout>
DMI--Kang Gihoon
Android UI – Menu
 Activity 상에서 Menu 버튼을 클릭했을때 나타내는 메뉴
 메뉴는 크게 Option 메뉴 와 Context 메뉴로 구성됨.
 xml 로 메뉴파일 정의 가능 : res > menu 폴더 생성 후 menu관련 xml 파일 생성
[OptionMenu]
메뉴 옵션
내용
OptionMenu
*Menu 버튼 Click시 하단에 나타남
*onOptionsItemSelected () 에서 메뉴 생성
*onOptionsItemSelected() : event 처리
ContextMenu
*registerForContextMenu(view) 를 등록하고 해
당 view를 길게 터치했을 경우 발생
*menuitem의 checkable 속성으로 checkbox 출력
여부 표시
*onCreateOptionsMenu() 에서 메뉴생성
*onContextItemSelected() : event 처리
[ContextMenu]
<?xml version="1.0" encoding="utf-8"?>
<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="아따 안녕하신가?"
Menu xml 정의
android:checkable="true"
android:checked="false"/>
</menu>
DMI--Kang Gihoon
Android UI – Dialog
AlertDialog
ProgressDialog
[Time/Data]Dialog
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)
ProgressDialog
Progress Wheel or Progress Bar
DatePickerDialog
날짜 설정
TimePickerDialog
시간설정
[버튼생성 순서]
setPositiveButton()
setNeutralButton()
setNegativeButton()
[back 버튼 눌러도 안 닫히게 할려면]
AlertDialg.Builder serCancelable
(boolean cancelable) => false
* showDialoge 의 id에 따라 onCreateDialoge에서 생성
*실제 dialoge생성시 onPrepareDialog() 를 호출
여기서 다이얼로그 상태 변경시 처리 가능
[Activity]
[Dialoge 보이기]
showDialog(int id)
[Dialoge 생성]
onCreateDialog (int id)
onPrepareDialog()
[Dialoge 안보이기/삭제]
dismissDialog(int id)
removeDialog(int id)
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 사용하여 데이터 표현 가능.
DMI--Kang Gihoon
Android UI – Custom ListView
 기존 Adapter를 상속하여 CustomAdapter 구현

기존 ArrayAdapter 등을 상속하여 실제 row를 보여줄때 호출하는 getView() 함수 재정의.
 추상class인 BaseAdapter를 상속하여 CustomAdapter 구현

getCount() / getItem() / getItemId() / getView() 함수 재정의
 CustomAdapter 는 사용자 정의의 view를 담당할 xml파일과 view에 해당하는 Data를 매핑
<?xml version="1.0" encoding="utf-8"?>
<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"
></ImageView>
<TextView
android:text="@+id/TextView01"
android:id="@+id/rowTextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
[View]
Adapter
getView()
[Datas]
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};
DMI--Kang Gihoon
Android UI – Gallery (AdapterView)
 ImageView의 List를 표현하는 컨테이너
 BaseAdapter를 상속을 통해 ImageAdapter 표현
 Gallery 내의 액자 표현을 위해 각 imageView 마다 android:galleryItemBackground 배경 설정.
DMI--Kang Gihoon
Android UI – WebView




WebPage를 표현하는 View
local 페이지 및 원격 URL 페이지 호출.
페이지내의 javascript 및 link 제어 가능
*AndroidManifest.xml 파일에 인터넷 연결 permission 설정


<uses-permission android:name="android.permission.INTERNET"></uses-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ㄱ 방생 했을 경
우등.
클릭시
전화걸기 화면으로
이동
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
[Message Queue]
UI Thread
Handler
DMI--Kang Gihoon
Android UI – Thread




Handler 객체의 생성은 사용자 thread 외부 에서 생성 해야함.
사용자 Thread는 handler.sendMessage(msg) 를 통해 Handler에게 Message 전송
Handler는 handleMessage(Message msg) 를 통해 Message 전달 받음.
handler.obtainMessage() 는 Handler에서 세팅된 메시지 값을 전달 받은 Message
사용자 정의
Thread
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);
}
Handler
handle = new Handler() {
@Override
//사용자 정의 Thread에서 받은 데이처 처리
public void handleMessage(Message msg) {
textView.setText(“OK”);
}
};
}
});
DMI--Kang Gihoon