Android 앱/UI & Layout

1. about Layout

arvigoes 2020. 9. 21. 22:47

View & ViewGroup & Layout

안드로이드에서 모든 사용자 인터페이스의 요소는 View 클래스(android.view.View)의 서브 클래스이다.

안드로이드에서 기본적으로 제공되는 어러 뷰 클래스 이외에도 계승을 통해 다양한 구성도 가능 하다.

기본적으로 제공되는 view 에는 button, textveiw checkbox 등이 있다.

이를 가르켜 widget(위젯) 또는 component(컴포넌트) 라고 부른다. 

 

ViewGroup은 그림 1과 같이 View와 다른 ViewGroup 객체의 레이아웃 구조를 정의하는 투명 컨테이너이다.

ViewGroup 을 계승받는 객체는  composite view (복합뷰) 라 부른다.

Img. 1 UI 레이아웃을 정의하는 뷰 계층

ViewGroup 또한 view 클래스를 계승 받는다.

위에서 언급했든이 UI 를 구성하는 모든 요소는 View 를 계승 받는다

 

레이아웃은 ViewGroup 를 계승받아 구성된 서브 클래스 이다.

컨테이너 뷰 로써 자식 뷰들은 화면에 위치시키는 방법을 제어하는 목적으로 설계되었다.

SDK에는 여러 레이아웃 들이 포함되어 있으며, 안드로이드 사용자 인터페이스 디자인 에서 사용될 수 있다.

 

결론은 View ViewGroup Layout 은 모두 View 클래스를 계승 받는다.

View 가 사용 될 수 있는 곳에는 ViewGroup Layout 을 모두 사용 할 수 있다.

(제약이 있을지는 아직 모르지만 차차 알아 보도록 하자)

 

클래스 상속 개념이 어느정도 있다면 여기에 대해 좀 더 이해가 쉬울듯하다.

 

안드로이드 SDK 에서 기본 제공 되는 Layout

LinearLayout - 선형 레이아웃

Relative 레이아웃과 더불어 가장 많이 사용하는 레이아웃 중 하나이다

여러 하위 요소를 하나의 가로 방향 또는 세로 방향 행으로 정리하는 레이아웃. 이 레이아웃은 창의 길이가 화면 길이를 웃도는 경우 스크롤바를 생성한다

 

RelativeLayout - 상대적 레이아웃

여러 하위 객체의 위치를 서로 상대적으로 나타내거나(하위 객체 A가 하위 객체 B의 왼쪽), 상위와 상대적으로 나타낼 수 있도록 해준다(상위의 맨 위에 맞춰 정렬).

 

TableLayout - 테이블 레이아웃

table 형태의 위젯을 배치하는 레이아웃이다.

여기서 말하는 table 은 식탁 테이블이 아니라 엑셀표 를 말한다.

<TableRow> 를 통해 행 단위로 화면을 구성하고, 각행중 최대로 열이 최대로 많은 것을 기준으로 모두 동일한 열을 가진다.

이때 각 행이나 각 열은 hight 와 width 가 동일한 사이즈로 배분을 받아 layout_width, layout_hight 가 의미가 없다.

 

FaramLayout - 프레임 레이아웃

좌측상단을 기준으로 위젯을 차곡 차곡 쌓기만하는 단순한 레이아웃다.

단순한 만큼 하나의 위젯만 표현되는 경우에 자주 사용한다.

 

AbsoluteLayout - 앱솔루트 레이아웃

각 위젯을 좌표를 기반으로 배치 해준다.

고정좌표라 다양한 환경의 UI 구성에는 적합하지않아 사용되는 경우가 드물다.

 

GridLayout - 그리드 레이아웃

TableLayout 의 상위 버젼이다.

TableLayout 은 merge 가 열단위로만 가능 하지만 GridLayout 은 행단위 merge 도 가능하다.

 

CoordinatorLayout - 코디네이터 레이아웃

FrameLayout 을 상속받아 만들어졌다.

화면의 위에 있는 앱바의 모습과 기능을 다른 뷰와 연동하여 함께 사용할때 사용하도록 만들어졌다.

 

ConstraintLayout - 콘스트레인트 레이아웃 

위젯의 위치와 크기를 유연하게 조절 하기 편하게 만들어주는 레이아웃이다.

이 레이아웃에 배치되는 뷰들은 여러 제약(Constraint) 을 적용하여 각 뷰의 위치와 크기를 결정한다.

이러한 제약은 곧 레이아웃 속성으로 사용된다. 

 

참고: 하나 이상의 레이아웃을 또 다른 레이아웃에 중첩하여 UI 디자인을 이룰 수도 있지만, 레이아웃 계층을 가능한 한 얕게 유지하도록 애써야 합니다. 중첩된 레이아웃이 적을수록 레이아웃이 더욱 빠르게 그려집니다(가로로 넓은 뷰 계층이 깊은 뷰 계층보다 낫습니다).

 

계층 구조

사용자 인터페이스의 각 영역은 화면의 직사각형 영역을 나타낸다.

뷰는 그 역영안에 그려지는 것에 대한 책임이 있으며 영역에서 발생하는 이벤트 (터치등)를 처리해야할 책임이 있다.

UI 화면은 뷰의 계층구조로 구성이 된다.

이 뷰의 계층구조는 최상위의 루트로 부터 이어져 내려오는 트리 구조로 구성된다.

계층구조로 자식의 영역은 부모의 뷰 영역을 벗어날 수 없다.

그림2. 주소록앱

이앱은 흔히 보는 주소록 앱과 유사한 뷰이다.

전체 리스트가 있고, 하나의 요소에 이미지와 이름 & 주소로 구성이 되어 있다.

 

그림3. 레이아웃 뷰

 사용자 인터페이스 화면은 아래와 같은 계층 구조로 구성이된다. 

UI를 구성하는 뷰들간의 관계를 가장 쉽게 이해 할 수 있게 해 주는 뷰 계층 구조 다이어그램이다.

UI 를 화면에 보일 때 안드로이드 런타임은 뷰 계층구조를 순회한다. 이때 루트 뷰 부터 트리를 타고 내려가면서 각 뷰를  보여준다.

UI 구성이 복잡하다면 그만큼 많은 시간이 소요된다.

 

'Android 앱 > UI & Layout' 카테고리의 다른 글

constaint layout (쉬움) - 위치의 결정  (0) 2021.03.12
view 크기 설정하는 값들  (0) 2021.03.03