02 뷰와 레이아웃

뷰(View)는 컨트롤이나 위젯으로 불리는 UI 구성 요소입니다.

뷰그룹(ViewGroup)은 뷰를 여러 개 포함하고 있는 것입니다.

 

뷰그룹은 뷰를 상속받아서 뷰그룹도 뷰처럼 다룰 수 있어 뷰그룹 안에 뷰그룹이 들어갈 수도 있습니다.

 

뷰와 뷰그룹의 역할을 구분하기 위해 뷰의 종류에 따라 다른 이름으로 부르기도 합니다.

뷰 중 일반적인 컨트롤의 역할을 하는 것을 위젯이라고 부르며, 뷰그룹 중에서 내부에 뷰들을 포함하고 있으면서 그것들을 배치하는 역할을 하는 것을 레이아웃이라고 합니다.

 

 

버튼과 레이아웃 계층도

 

위 계층도를 보시면 layout도 View를 상속받습니다. 따라서 레이아웃도 배치할 수 있고 배치된 레이아웃 안에서 위젯들을 배치할 수 있습니다.

 

 

뷰는 화면의 일정 영역을 차지하기 때문에 모든 뷰는 반드시 크기 속성을 가지고 있어야 합니다.

<Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Button"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

 

xml 코드를 보시면 

 

<시작 태그

    속성1="속성1값"

    속성2="속성2값"

/끝 태그>

 

로 구성되어있는 것을 알 수 있습니다.

 

여기서 android:는 안드로이드의 기본 API에서 정의한 속성이라는 의미입니다. 

layout_width, layout_height가 view의 폭과 높이를 결정하는 필수 속성입니다.

위 코드에서는 가로, 세로 값으로 wrap_content가 왔는데 이 속성에는 다음 3가지 값이 올 수 있습니다.

 

구분	설명
wrap_content	뷰에 들어 있는 내용물의 크기에 자동 맞춤
match_parent	뷰를 담고 있는 뷰그룹의 여유 공간을 꽉 채움
숫자	dp, px의 단위가 오며, 그 수치만큼의 공간을 사용함

 

 

왼쪽은 둘다 wrap_content, 가운데는 가로만 match_parent, 오른쪽은 둘다 match_parent

 

 

이번에는 레이아웃에 대해 다뤄보겠습니다.

 

프로젝트를 생성하면, 디폴트로 제약 레이아웃(Constraint Layout)으로 설정됩니다.

제약 레이아웃의 가장 큰 특징은 뷰의 크기와 위치를 결정할 때 제약 조건을 사용한다는 것입니다.

이때 제약 조건이란, 뷰가 레이아웃 안의 다른 요소와 어떻게 연결되는지 알려주는 것으로, 뷰의 연결점과 대상을 연결합니다.

 

뷰를 만들고 아무런 제약을 주지 않으면 다음과 같은 투명한 동그라미가 됩니다.

 

제약을 주면 파란 동그라미로 활성화됩니다.

 

 

뷰를 클릭하고 화면의 오른쪽을 보면 아래와 같은 기호가 보입니다.

 

 

 

첫번째 사진은 wrap_content로, 가운데는 match_parent, 오른쪽은 특정 지정 값을 의미합니다.

 

 

 

 

여러 뷰들을 배치한 후 반영되는 xml 코드를 보는 법을 다뤄보도록 하겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

첫번째 줄은 파일이 XML 형식으로 된 것임을 알려줍니다.

그 다음 태그가 화면 전체를 감싸고 있는 레이아웃이며 최상위 레이아웃입니다.

 

xmlns:android는 안드로인드 기본 SDK에 포함되어 있는 속성을 사용합니다.

xmlns:app는 외부 라이브러리에 포함되어 있는 속성을 사용합니다.

앞서 설명한 android:는 xmlns:android로 지정된 정보를 참조하여 사용한드는 의미입니다.

따라서 layout_width, layout_height 속성은 실제로는 안드로이드 기본  SDK에 들어 있는 속성을 사용한다는 의미가 됩니다.

 

태그 속성 중 android:id 속성이 있는데 이는 뷰를 구분하는 구분자 역할을 합니다.

 

제약 레이아웃에서 하나의 뷰를 다른 뷰와 연결할 때 사용하는 XML 속성의 이름은 다음과 같은 규칙을 갖습니다.

layout_constraint[소스 뷰 연결점]_[타깃 뷰 연결점]="[타깃 뷰 id]" 처럼 표현합니다.

 

 

위 배치를 XML 코드로 나타내면 다음과 같습니다.

 

app:layout_constraintTop_toBottonOf="@+id/button"

이는 아래 버튼의 위에서 출발해 위 버튼의 아래와 연결한다는 뜻입니다.

 

 

 

가이드라인을 추가해서 생긴 태그를 확인해보겠습니다.

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="85dp" />

Guidline 클래스는 외부 라이브러리에 들어 있어 패키지 이름인 androidx.constraintlayout.widget을 함께 붙여줍니다. 태그에는 필수 속성인 width, height가 있고, id 값으로 @+id/guideline2를 가집니다. orientation이라는 속성을 가지는데 이 속성도 가이드라인에서 필수 속성입니다.