[01] UI 설계(Widget, View, Layout) 개론
View ---+--- View(Widget): 안드로이드가 제공하는 콘트롤, TextView, EditText, Button....
|
+--- Custom View: 기존의 View 를 상속받아 변경하거나 새롭게 생성.
|
+--- ViewGroup --- Layout: View를 배치하고 그룹화 함, LinearLayout, RelativeLayout, TableLayout....
1. UI 설계 방법
- 자바소스상에서 class상에 직접 지정하는 경우와 XML을 이용하는
방법이 있으며 개발과 유지보수의 장점 때문에 XML이 많이 사용된다.
XML을 UI 설계로 이용하는 대표적인 언어는 Flex등이 있다.
2. View
- Widget은 View로 되어있으며 View는 트리구조(상속)를 이루고 있다.
- 모든 안드로이드의 비주얼 콤포넌트는 View 클래스로부터 내려온다.
- View는 Widget, Control이라고 부르기도 한다.
- View --> ViewGroup --> Layout 의 관계를 갖는다.
3. Layout
- ViewGroup class의 확장
- View를 담는 컨테이너 역활을 함.
[02] View
- 화면을 구성하는 UI를 제공한다.
- API: http://developer.android.com/reference/android/view/View.html
1. 공통 XML 속성
- View는 많은 공통 속성과 메소드를 가지고 있는데 TextView의 속성이 대부분의 View에
그대로 적용된다.
android:id : View의 아이디
android:layout_width : 부모뷰를 기준으로 한 폭의 의 크기
android:layout_height : 부모뷰를 높이로한 뷰의 높이
android:padding : 외곽선과 뷰안의 내용과의 간격
android:visibility : 초기화면 표시 여부
android:background : Widget의 배경색을 #RGB, #ARGB, #RRGGBB, #AARRGGBB로 지정
android:clickable : 클릭 가능 여부
android:longClickable : 롱 클릭 가능 여부
android:focusable : 키보드 포커스의 가능 여부
2. 공통 메소드
setEnabled() : Widget의 사용 가능 여부 지정
isEnabled() : Widget이 사용 가능 상태인지 확인
requestFocus(): 해당 Widget으로 입력 포커스 이동
isFocused() : Widget이 현재 포커스를 가지고 있는지 확인
setFocus() : Widget에 focus를 지정
getParent() : 상위 위젯이나 컨테이너 추출
findViewById(): 지정한 id에 대한 위젯 추출
getRootView() : 최상위 컨테이너 추출
3. 레이블
- import android.widget.TextView;
- View --> TextView
- 단순한 문자열의 출력.
- 출력 문자열은 변경할 수 없다.
3. 버튼
- import android.widget.Button;
- 터치 및 클릭 이벤트를 처리한다.
- View --> TextView --> Button
- TextView를 상속받으며 사용자의 tab(터치) 이벤트를 주로 처리한다.
4. 이미지
- import android.widget.ImageView;
- View --> ImageView: 이미지를 넣을 수 있는 View Class
- View --> ImageView --> ImageButton: 이미지를 넣을 수 있는 버튼 클래스
5. 입력 필드
- import android.widget.EditText;
- View --> TextView --> EditText
- 문자를 입력 받을 수 있는 기능 제공
1) XML 속성
android:autoText : 자동 철자 교정
android:capitalize : 첫 글자를 대문자로 변환
android:digits : 특정 숫자만 입력
android:singleLine : 여러줄을 입력받을 것인지 지정
android:numeric : 숫자만 입력 가능
android:password : 패스워드 입력 형태 지정
android:phoneNumber: 전화번호 입력
android:inputMethod: 특정 형식의 입력 지정
6. 체크 박스
- import android.widget.CheckBox;
- View --> TextView --> Button --> CompoundButton
--> RadioButton --> CheckBox
- 취미같은 다중 선택 가능
7. 라디오 버튼
- import android.widget.RadioButton;
- View --> TextView --> Button --> CompoundButton --> RadioButton
- 성별같은 단일 선택만 가능
- RadioGroup에 의해 RadioButton의 그룹화 가능
[03] Layout
- android.view.ViewGroup class 상속 받음.
1. 공통 특성
android:layout_height : 부모 뷰 기준, 자식 뷰에 적용, 뷰의 높이.
android:layout_width : 부모 뷰 기준, 자식 뷰에 적용, 뷰의 너비, 자식뷰의 경우 필수임.
android:layout_margin : 부모 뷰 기준, 뷰의 상하 좌우의 여백 공간.
android:layout_marginTop : 부모 뷰 기준, 뷰의 위쪽 여백 공간.
android:layout_marginBottom: 부모 뷰 기준, 뷰의 아래쪽 여백 공간.
android:layout_marginRight : 부모 뷰 기준, 뷰의 오른쪽 여백 공간 .
android:layout_marginLeft : 부모 뷰 기준, 뷰의 왼쪽 여백 공간.
android:gravity : 자식 뷰 기준, View로 부터의 위치.
android:layout_gravity : 부모 뷰 기준, 현재 View의 위치.
2. AbsoluteLayout: View가 x,y좌표에 의해서 배치, 레이아웃이 깨질 수 있고 화면의
구성요소가 서로 잘 맞아 떨어저야함으로 잘 사용되지 않는다.
안드로이드 SDK 1.5 R1부터 폐기 대상으로 분류되어 더이상 사용되지 않는다.
3. FrameLayout: View를 좌측 상단에 배치, 여러개의 View가 있는 경우 겹쳐서 보임으로
Layout의 효과는 떨어짐, 사용 빈도는 적음.
4. LinearLayout: 직선형의 배치 방식, View를 수평 또는 수직의 라인을 View를 배치,
입력 양식에 많이 사용된다.
android:orientation: 뷰가 출력될 방향을 지정한다.
5. RelativeLayout: 다른 콘트롤에 비례해서 콘트롤의 위치 지정.
- 뷰를 위치를 설정하기위해 여러번 선언 가능.
- 부모뷰를 기준으로
android:layout_marginRight="20px" : 뷰를 부모의 오른쪽에서 일정 간격 떨어짐
android:layout_marginTop="60px" : 뷰를 부모의 위쪽에서 일정 간격 떨어짐
android:layout_alignParentTop="true" : 뷰를 부모에서 상단에 배치
android:layout_centerHorizontal="true" : 뷰를 부모에서 수평 중앙에 배치
android:layout_alignParentRight="true" : 뷰를 부모에서 오른쪽에 배치
android:layout_alignParentLeft="true" : 뷰를 부모에서 왼쪽에 배치
android:layout_centerVertical="true" : 뷰를 부모에서 수직 중앙에 배치
android:layout_centerInParent="true" : 뷰를 수직, 수평의 중앙에 배치
android:layout_alignParentBottom="true": 뷰를 부모에서 하단에 배치
- 주변에 배치된 뷰를 기준으로
android:layout_toRightOf="@id/idname" : 주변 특정 뷰의 오른쪽에 배치
android:layout_toLeftOf="@id/idname" : 주변 특정 뷰의 외쪽에 배치
android:layout_alignBaseline="@id/idname": 주변 특정 뷰와 같은 라인에 배치
android:layout_below="@id/idname" : 주변 특정 뷰의 아래에 배치
android:layout_above="@id/idname" : 주변 특정 뷰의 위에 배치
android:layout_alignRight="@id/idname" : 주변 특정 뷰의 오른쪽에 배치
android:layout_alignLeft="@id/idname" : 주변 특정 뷰의 왼쪽에 배치
android:layout_alignTop="@id/idname" : 주변 특정 뷰의 위쪽에 배치
- 예) [TEL][SMS]의 경우
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btnSms"
android:layout_marginLeft="1px"
android:text="SMS"
android:textSize="16px"
android:layout_alignParentRight="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btnTel"
android:layout_marginLeft="6px"
android:text="TEL"
android:textSize="16px"
android:layout_toLeftOf="@id/btnSms"
/>
6. TableLayout: 행과 열의 격자를 이용해 View의 배치.
- 아래의 레이아웃 특성을 조합하여 사용
android:stretchColumns="1" : 두번째 컴럼의 크기를 남는 공간으로 늘림(확장).
android:stretchColumns=" 늘리려는 column 번호(0~), *"
android:shrinkColumns=" 필요한 공간만 사용하고 줄이고자 하는 column 번호(0~), *"
android:stretchColumns="1" android:shrinkColumns="*": 모든 컬럼의 값을 전부
필요한 만큼만 사용하고 1번째 컬럼을 남은 공간으로 전부 확대
android:collapseColumns=" 숨기고자 하는 column 번호(0~), *"
android:layout_span=" 차지하려는 Column 수", 셀 합치기
android:layout_span="2": 컬럼 2개를 합침.
이름:[ ]의 경우 2번째 입력란을 확대함.
android:layout_marginTop="60px" : 뷰를 부모의 위쪽에서 일정 간격 떨어짐
android:layout_alignParentTop="true" : 뷰를 부모에서 상단에 배치
android:layout_centerHorizontal="true" : 뷰를 부모에서 수평 중앙에 배치
android:layout_alignParentRight="true" : 뷰를 부모에서 오른쪽에 배치
android:layout_alignParentLeft="true" : 뷰를 부모에서 왼쪽에 배치
android:layout_centerVertical="true" : 뷰를 부모에서 수직 중앙에 배치
android:layout_centerInParent="true" : 뷰를 수직, 수평의 중앙에 배치
android:layout_alignParentBottom="true": 뷰를 부모에서 하단에 배치