[Mobile/Android] 레이아웃(Layout)

avtivity가 한 화면을 구성하는 단위이고, 화면에 버튼과 같은 위젯들을 추가하기 위해선 위젯들이 어떻게 배치되는지 알아야 합니다.
그러니까 Layout은 아주 기본적이면서 아주 중요하겠죠? 🙂

안드로이드에서 제공하는 레이아웃은 대표적으로 5가지가 있습니다.(이것들만으로도 대부분의 화면을 만들 수 있습니다.)

1. 제약 레이아웃(ConstraintLayout) : 제약 조건을 사용해 뷰(View)를 배치한다.
2. 리니어 레이아웃(LinearLayout) : 세로 또는 가로방향으로 View를 배치한다.
3. 상대 레이아웃(RelativeLayout) : 다른 View와의 상대적인 위치를 이용해 배치한다. (이걸 확장시킨게 제약 레이아웃)
4. 프레임 레이아웃(FrameLayout) : 가장 상위에 있는 하나의 View(또는 ViewGroup)만 보여주도록 배치한다.
5. 테이블 레이아웃(TableLayout) : HTML에서의 테이블 배치와 유사하다. (많이 사용되지는 않음)

1. 제약 레이아웃 ( ConstraintLayout )

---

제약 레이아웃은 상대 레이아웃을 확장시킨 것입니다. 아래 그림에서 왼쪽의 버튼을 자신의 부모 레이아웃의 왼쪽과 위쪽 벽면에 연결시켰습니다. 연결시키는 점을 연결점이라고 하고, 연결시키는 대상을 타겟(target)이라고 합니다. 타겟에 대한 margin 값을 설정해서 간격을 조정할 수 있습니다. 말로하는 것보다 그냥 그림으로 보는게 훨씬 쉽습니다.

[그림 1] 제약 레이아웃

하나의 기준점을 두고 거기에 맞춰 배치할 수도 있다. Guideline 선을 하나 두고 버튼 2개를 이 선에 연결시켜 배치한다.

2. 리니어 레이아웃 (LinearLayout)

---

리니어 레이아웃은 가장 직관적인 방법입니다. Vertical(수직), Horizontal(수평) 2가지 방향의 리니어 레이아웃이 있고, 리니어 레이아웃 안에 리니어 레이아웃을 중첩시킴으로써 좀 더 복잡한 화면을 만들 수 있다. 아래 그림은 내가 임의로 중첩시켜 만들어봤는데 좌측에 리니어 레이아웃이 어떤 식으로 중첩되어 있는지 나타나있다.

[그림 2] 리니어 레이아웃

아래 코드는 위의 중첩 레이아웃에서의 한 버튼의 코드인데, 속성 중에 android:layout_weight="1" 속성 값을 설정해야 자신이 속한 리니어 레이아웃에서 차지하는 영역 비율(?)을 맞출 수 있다.

<Button
    android:id="@+id/button3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:text="Button" />