<안드로이드 뷰, 뷰 그룹, 레이아웃> 개념 정리

/* 본 게시물은 '핵심만 골라 배우는 안드로이드 스튜디오 & 프로그래밍(Android Studio 2 Development Essentials) | 닐 스미스 지음' 의 내용을 토대로 작성되었습니다. */

# 서로 다른 안드로이드를 장치를 위한 디자인

---

 애플리케이션의 사용자 인터페이스는 가능한 한 많은 종류의 화면 크기에서 제대로 보일 수 있도록 신중하게 디자인되어야 한다. 이때 가장 중요한 것은 서로 다른 장치에서 레이아웃의 크기 조정이 올바르게 될 수 있게 하는 것이다.

 안드로이드 기반의 스마트폰과 태블릿은 사용자가 세로(portrait)와 가로(landscape) 방향 모두를 사용할 수 있다는 것이다. 따라서 디자인이 잘된 사용자 인터페이스라면 모든 방향에서 그런 변경에 적응할 수 있어야 하고, 사용 가능한 화면 공간을 잘 활용하기 위한 레이아웃을 조정할 수 있어야 한다.

# 뷰와 뷰 그룹

---

 안드로이드 사용자 인터페이스의 모든 요소는 View 클래스(android.view.View)의 서브 클래스다. 안드로이드 SDK에서는 사용자 인터페이스를 구성하는 데 사용할 수 있는 여러 뷰 클래스를 제공한다. // Button, CheckBox, ProgressBar, TextView 클래스 등

 그런 뷰들은 위젯(widget) 또는 컴포넌트(component) 라고도 한다. SDK에 제공되지 않는 위젯이 필요할 때는 기존 뷰 클래스의 서브 클래스를 만들거나 또는 View 클래스로부터 상속받는 아예 새로운 컴포넌트를 생성하여 새로운 뷰를 만들 수 있다.

 또한 뷰는 여러 개의 다른 뷰로 구성될 수 있으며 복합 뷰(composite view)라고도 한다. 이러한 뷰들은 안드로이드 ViewGroup 클래스(android.view.ViewGroup)로부터 상속받는다. // ViewGroupd 클래스 자신은 View의 서브 클래스다.

 예를 들면 RadioGroup이 있다. 이것은 여러 개의 RadioButton 객체들을 포함하여 항상 하나의 버튼만이 선택될 수 있게 한 것이다. 구조적인 관점에서 복합 뷰는 다른 뷰(자식 뷰(child view))들을 포함할 수 있는 하나의 부모 뷰(parent view)로 구성된다. // RadioGroup이 RadioButton 객체들을 포함하듯이.

 그리고 그 부모 뷰는 ViewGroup 클래스로부터 상속받으며, 컨테이너 뷰(container view) 또는 루트 요소(root element)라고도 한다. 또 다른 ViewGroup 기반 컨테이너 뷰로 레이아웃 매니저(layout manager)가 있다.

# 안드로이드 레이아웃 매니저

---

 안드로이드 SDK에서는 레이아웃(layout)이라고 하는 뷰들도 제공한다. 레이아웃은 컨테이너 뷰이므로 ViewGroup의 서브 클래스이며, 자식 뷰들은 화면에 위치시키는 방법을 제어하는 목적으로 설계되었다. 안드로이드 SDK에는 아래의 레이아웃 뷰들이 포함되어 있으며, 이것들은 안드로이드 사용자 인터페이스 디자인 내부에서 사용될 수 있다.

• LinearLayout - 선택된 방향(수직 또는 수평)에 따라 하나의 행이나 열에 자식 뷰를 배치한다. 각 자식 뷰에는 가중치(weight value)를 설정할 수 있다. 이것은 해당 자식 뷰가 다른 자식 뷰에 비해 얼마나 많은 레이아웃 공간을 차지할 것인지를 결정하는 값이다.
  
  
• TableLayout - 자식 뷰들을 격자 형태의 행과 열로 배치한다. 하나의 테이블에 있는 각 행은 TableRow 객체로 나타내며, 각 셀의 뷰 객체를 포함한다.
  
  
• FrameLayout - 일반적으로 하나의 뷰를 보여주기 위해 화면의 영역을 할당하는 것이 FrameLayout의 목적이다. 여러 개의 자식 뷰들이 추가될 때는 기본적으로 레이아웃 영역의 왼쪽 위 모서리를 기준으로 다른 뷰 위에 겹쳐서 나타난다.
   따라서 각 자식 뷰들의 위치를 달리하고자 할 때는 각 자식 뷰에 그래비티(gravity) 값을 설정하면 된다. 예를 들어, 어떤 자식 뷰에 center_vertical 그래비티 값을 설정하면 그 자식 뷰는 FrameLayout 뷰 영역의 수직 방향 중앙에 위치하게 된다.
  
  
• RelativeLayout - 가장 강력하고 유연한 레이아웃 매니저일 것이다. 이 레이아웃은 자식 뷰가 다른 자식 뷰와 자신을 포함하는 레이아웃 뷰 모두에 관련해서 자신에 지정된 마진(margin) 등에 따라 상대적으로 배치될 수 있게 해준다.
   예를 들어 자식 뷰 A는 자신을 포함하는 RelativeLayout 뷰의 수직과 수평 중앙에 위치하게 구성할 수 있다. 반면에 자식 뷰 B도 레이아웃 뷰 내부에 수평적으로 중앙에 있지만, 자식 뷰 A의 맨 위보다 30픽셀 높게 위치시킬 수 있다. 자식 뷰 A의 위치와 관련해서 상대적으로 자식 뷰 B의 수직적인 위치를 설정할 수 있기 때문이다.
   다양한 화면 크기와 방향에서 동작해야 하는 사용자 인터페이스를 디자인할 때 RelativeLayout 매니저가 사용될 수 있다.
  
  
• AbsoluteLayout - 자식 뷰가 자신을 포함하는 레이아웃 뷰의 특정 XY 좌표에 위치할 수 있게 해준다. 이 레이아웃은 사용하지 않는 편이 낫다. 화면 크기나 방향의 변화에 대응하는 유연성이 부족하기 때문이다. // 상대적으로 위치를 설정한 것과는 달리 딱 그 좌표에 위치하게끔 하는 기법으로, 레이아웃의 변화에 따라서 알아서 변화하거나 하는 등의 기능은 기대할 수 없다.
  
  
• GridLayout - GridLayout은 비교적 새로운 레이아웃 매니저로서 안드로이드 4.0의 일부로 소개되었다. GridLayout 인스턴스는 행과 열이 교차되는 셀을 포함하는 격자(grid)를 구성하며, 보이지 않는 라인들로 분할된다. 그다음에 자식 뷰들이 셀에 위치한다.
   자식 뷰들은 수평과 수직 모두 여러 개의 셀로 구성될 수 있다. GridLayout의 컴포넌트들 간격은 Space 뷰라는 특별한 타입의 뷰를 인접 셀에 두어서 구현하거나 마진 매개변수를 설정하여 구현할 수 있다.
  
  
• CoordinatorLayout - 안드로이드 5.0의 안드로이드 디자인 지원 라이브러리의 일부로 소개되었다. CoordinatorLayout은 애플리케이션 화면 위에 있는 앱 바(app bar)의 모습과 기능을 다른 뷰 요소와 함께 사용하기 위해 특별히 설계되었다. 
   안드로이드 스튜디오에서 새로운 프로젝트를 생성할 때 Basic Activity 템플릿을 선택하면 CoordinatorLayout 인스턴스를 사용해서 레이아웃의 부모 뷰가 구현된다.

 안드로이드 애플리케이션의 사용자 인터페이스에서 레이아웃을 사용할 때 주의해야할 점은 레이아웃이 다른 레이아웃 내부에 중첩될 수 있어서 어떤 복잡한 수준의 사용자 인터페이스 디자인도 생성할 수 있다는 점이다.

# 뷰 계층 구조

---

 사용자 인터페이스의 각 뷰는 화면의 직사각형 영역을 나타낸다. 뷰는 그 직사각형 안에 그려지는 것에 대한 책임이 있으며, 화면의 뷰 영역에서 발생하는 이벤트(터치 등)에 응답해야할 책임도 있다.

 사용자 인터페이스 화면은 뷰 계층 구조로 구성된다. 그리고 뷰 계층 구조는 계층 구조 트리(tree)의 맨 위에 위치한 루트(root) 뷰와 그 밑의 가지에 위치한 자식 뷰로 되어 있다. 컨테이너 뷰의 자식 뷰는 자신의 부모 뷰 위에 포개져서 화면에 나타나되, 부모 뷰의 화면 영역 경계 안에만으로 그 범위가 제한된다. 아래의 사용자 인터페이스를 살펴보면서 이해를 해보자.

 이 사용자 인터페이스에서는 버튼과 체크 상자 뷰가 위치하는 방법을 제어하는 레이아웃 뷰를 포함한다. 아래의 그림은 위와 동일한 사용자 인터페이스를 다른 관점으로 보여준다. 즉, 자식 뷰들과 관련된 레이아웃 뷰들을 나타내고 있다.

 사용자 인터페이스 화면은 맨 위에 루트 뷰를 갖는 뷰 계층 구조의 형태로 구성된다. 따라서 위의 그림은 아래와 같이 뷰 트리 형태로도 나타낼 수 있다.

 사용자 인터페이스를 구성하는 다양한 뷰들 간의 관계를 가장 분명하게 보여주는 것이 위와 같은 뷰 계층 구조 다이어그램(diagram)이다. 사용자 인터페이스가 화면에 보일 때 안드로이드 런타임은 뷰 계층 구조를 순회한다. 이때 루트 뷰에서 시작해서 트리의 아래로 내려가면서 각 뷰를 나타낸다.

# 요약

---

안드로이드 애플리케이션의 사용자 인터페이스 화면에 있는 각 요소는 뷰이며, 모든 뷰는 android.view.View 클래스의 서브 클래스다. 각 뷰는 장치 화면의 직사각형 영역을 나타내며, 그 직사각형 안에 나타나는 것에 대한 책임이 있고 또한 뷰의 경계 안에서 발생하는 이벤트(터치 등)를 처리하는 책임도 있다.

 여러 뷰를 결합시켜 하나의 복합 뷰(composite view)를 만들 수 있다. 복합 뷰 안에 있는 것들은 컨테이너 뷰(container view)의 자식들이다. 그리고 컨테이너 뷰는 android.view.ViewGroup 클래스의 서브 클래스다. // ViewGroup 자신은 android.view.View의 서브클래스다.

 사용자 인터페이스는 뷰 계층 구조의 형태로 생성된 뷰들로 구성된다. 안드로이드 SDK에는 사용자 인터페이스를 만드는 데 사용될 수 있는, 미리 생성된 뷰들이 많이 있다. // 텍스트 필드나 버튼과 같은 기본적인 컴포넌트들, 그리고 자식 뷰들의 위치를 제어하는 데 사용될 수 있는 다양한 종류의 레이아웃 매니저 등

 만약 미리 제공되는 것들만으로 부족하다면 커스텀 뷰를 만들 수도 있다. 기존 뷰에서 상속 및 결합시켜 만들거나 android.view.View 클래스로부터 상속받는 완전히 새로운 뷰 클래스를 생성하면 된다.