[08-D2][UI 설계] Widget, View, Layout 개론

[08-D2][UI 설계] Widget, View, Layout 개론

[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": 뷰를 부모에서 하단에 배치