[Android] Layouts

ConstraintLayout

 

ConstraintLayout은 레이아웃 구성 시 뷰, 위젯 등의 위치와 크기를 유연하게

조절할 수 있게 만들어 주는 레이아웃입니다.

 

Constraint의 뜻을 보면 

제약, 조건, 제한, 구속이라는 뜻이 존재하는데 이는

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

 

여기서 말하는 제약이란.

특정 뷰 왼쪽으로 지정된 뷰를 오른쪽 사이드에 맞추거나 

뷰의 왼쪽 오른쪽을 각각 부모 레이아웃의 왼쪽 오른쪽에 맞추는 것 등을 말하며 이러한 각각의 제약은 

ConstraintLayout이 가지는 하나의 레이아웃 속성으로 매핑됩니다.

 

기본 속성 사용법

 

ConstraintLayout에서 제공하는 속성의 이름은 "layout_constraint"로

시작하며 이어서 구체적인 제약 조건이 명시됩니다.

layout_constraintXXX (XXX = 제약 조건)

예를 들어 A라는 왼쪽에 있는 뷰의 오른쪽에 배치하는 속성은 

"layout_constraint"에 "Left_toRightOf"라는 제약 조건을 결합한

 "layout_constraintLeft_toRightOf"입니다

속성을 넣기 전

 

속성을 넣은 후

---

LinearLayout

 

LinearLayout은 사용이 간편하고 표시 형태가 직관적이며 UI 요소들을 일렬로 배치할 수 있어서

안정감 있는 화면 구성이 가능합니다.

 

사용법

 

단순히 버튼 두 개만 넣어도 아래의 사진처럼 가로 방향으로 나열된 버튼을 확인할 수 있습니다.

수직 수평

 

orientation속성을 사용하여 View들의 배치 방향을 가로/세로로 바꿀 수 있습니다.

android:orientation="horizontal" //가로
android:orientation="vertical" //세로

weight를 이용한 영역 분할

 

위와 같이 View들이 LinearLayout의 왼쪽 영역에만 배치되어있고 가로/세로 전체 영역을 차지하도록 만든 방법에는

weight가 있습니다.

android:layout_weight

• 소수점 단위 사용 가능
• 특정 단위가 아닌 전체에 대한 비율의 개념으로 사용
• 지정하지 않은 기본 값은 0
• 가중치가 적용되는 방향의 width 또는 height 값이 0dp 이어야 함

 <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="Button" />
    
    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="Button" />

 

위의 코드를 입력해 보면 전체 (2+3+3)의 크기를 기준으로

각각의 button들이 2 : 3 : 3 만큼의 공간을 차지하게 됩니다.

 

또한 Layout부분에 아래의 코드를 추가하면 가중치의 값을 설정할 수 있으며

View의 가중치 총합이 아래 10이 되지 않을 경우 

공백이 포함된 화면을 구성할 수 있습니다.

android:weightSum="10"

여기서 공백의 가중치는 총 10-(2+3+3) = 2입니다.

---

FrameLayout

 

FrameLayout은 추가된 여러 뷰 위젯 중 하나를 Layout에 표시할 때 사용하는 레이아웃입니다.

Frame은 말 그대로 액자라는 것을 생각해보면 됩니다.

보통은 액자에 있는 사진을 빼고 새로운 사진을 끼워서 사용합니다.

FrameLayout의 주 용도는 액자처럼 화면에 표시될 View를 바꿔가며 표시하기 위함입니다.

 

FrameLayout에 처음에 표시될 뷰는 XML코드의 가장 마지막에 추가된 뷰입니다.

 

위와 같이 3개의 Button을 만들었지만 마지막에 배치된 Button3가 제일 앞에 있는 것을 확인하실 수 있습니다.

 

하지만 안드로이드에서는 여러 뷰를 동시에 표시해야 하는 확실한 의도가 없는 한

FrameLayout은 오직 하나의 뷰를 표시하게 만들도록 권고하고 있습니다.

 

---

TableLayout

 

TableLayout은 표 형태의 레이아웃을 만들 떄 사용하는 Layout입니다.

일반적인 표는 가로방향인 열과 세로방향은 행으로 구성됩니다.

 

TableLayout도 비슷하게 하나의 행을 추가할 떄는 <TableRow>라는 요소를 사용 하며 열을 추가하는 요소는 없지만

<TableRow>에 뷰를 추가하면 새로운 열이 추가 됩니다.

 <TableRow>
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />
		...x 3
    </TableRow>
    
    <TableRow>
        <Button
            android:id="@+id/button7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />
        ...x 2
    </TableRow>

    <TableRow>
        <Button
            android:id="@+id/button9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />
    </TableRow>

위와 같이 코드를 작성 하면 아래와 같이 배치가 되는 것을 확인할 수 있습니다.

 

열의 너비는 여러 개의 뷰 중 가장 큰 뷰의 너비에 맞춰집니다.

 

 

---