[Android] 레이아웃 : ConstraintLayout, LinearLayout, RelativeLayout

모든 내용은 Do it! 안드로이드 앱 프로그래밍을 바탕으로 정리한 것입니다. 

 

ConstraintLayout  : 제약조건 기반 모델

[ 제약 조건(Constraint) ]

View가 레이아웃 안의 다른 요소와 어떻게 연결되는지 알려주는 것으로, 뷰의 연결점(Anchor Point)과 대상(Target)을 연결함

• 연결점은 핸들(Side Constraint Handle)이라고도 부름
• 버튼 왼쪽을 부모 레이아웃과 연결하는 경우, 부모 레이아웃이 Target이 되어 연결점과 연결됨
• 버튼이 레이아웃 안에서 어디에 위치하고 있는지 결정하려면 적어도 왼쪽과 위쪽이 연결되어 있어야 함

타깃(Target)이 될 수 있는 것들은

• 같은 부모 레이아웃 안에 들어있는 다른 View의 연결점
• 부모 레이아웃의 연결점
• 가이드라인(Guideline)

대상 View와 타깃의 연결점(Anchor Point)이 될 수 있는 것들은

• 위쪽(Top), 아래쪽(Bottom), 왼쪽(Left or Start), 오른쪽(Right or End)
• 가로축의 가운데(CenterX), 세로축의 가운데(CenterY)
• 베이스라인(BaseLine) : 텍스트를 보여주는 View인 경우에만 적용

따라서 Constraint를 이용하려면 대상 View와 타깃을 연결하고, 연결선 사이로 마진(Margin) 속성을 부여하면 됨

* 마진(Margin) : 연결점과 타깃과의 거리

 

[ 화면 가운데 View 배치하기 ]

View는 가로축과 세로축을 기준으로 배치됨

→ 가로축에 해당하는 왼쪽과 오른쪽에 모두 연결선이 만들어지는 경우 : 가로 가운데 정렬

→ 세로축에 해당하는 위쪽과 아래쪽에 모두 연결선이 만들어지는 경우 : 세로 가운데 정렬

* 이때 마진값은 고려되지 않음

 

어느 한쪽으로 치우치게 만들고 싶다면??

• 세로 방향 바이어스(Vertical Bias) : 레이아웃 속성에서 왼쪽 끝에 있는 줄
• 가로 방향 바이어스(Horizontal Bias) : 레이아웃 속성에서 아래쪽 끝에 있는 줄
• 바이어스 값 : 화면을 비율로 나눈 후 어느 곳에 위치시킬지를 결정하는 값
  • 한쪽으로 얼마나 치우져 있는지를 나타는 것으로, 기본 값 = 50
  • XML 파일에서는 0 ~ 1 사이의 소수값 / 디자인 화면에서는 0 ~ 100 사이의 %로 나타냄

 

[ 가이드라인(Guideline) ]

여러 개의 View를 일정한 기준 선에 정렬할 때 사용

예전에 화면 전체에 layout_marginRight, layout_marginLeft에 각각 마진 값을 넣었는데 실제로 앱을 실행해봤을 때 적용되지 않은 채로 실행되어 당황스러웠던 적이 있었다. 그때는 View에 하나하나 마진 값을 적용하여 해결했지만 앞으로는 가이드라인을 사용할 것!

 

View처럼 화면에 추가할 수 있지만 그 크기가 0이고 화면에 보이지 않기 때문에 레이아웃에서 없는 것으로 간주됨

∴ 화면 배치를 위해 추가되었지만 실제 화면의 구성 요소는 아닌 것

• layout_constraintGuide_begin : 세로 방향인 경우 왼쪽부터, 가로 방향인 경우 위쪽부터의 거리 지정
• layout_constraintGuide_end :  세로 방향인 경우 오른쪽부터, 가로 방향인 경우 아래쪽부터의 거리 지정
• layout_constarintGuide_percent : layout_constraintGuide_begin 속성 대신 지정하되 % 단위로 거리 지정

[Add Vertical Guideline] 으로 세로 가이드라인을 만들고 Button의 왼쪽을 가이드라인에, 위쪽은 각각의 위쪽에 연결해주었음

이때 가이드라인과 연결된 View의 마진 값을 0으로 해야 가이드라인과 완전히 붙게 UI를 만들 수 있음 

 

[ 배치 속성 ] 

• app:layout_constraint[소스 View 연결점]_[타깃 View 연결점] = "[타킷 View의 id]"
  • android:id 속성으로 id를 설정한 뒤, 해당 id를 작성하여 타깃으로 설정
  • 이때 id는 @+id 형식으로 입력되어야 함
  • Left 대신 Start, Right 대신 End를 사용할 수 있음

 

---

LinearLayout : 박스(Box) 모델

[ 방향 설정 ]

layout_width, layout_height 속성과 함께 필수 속성

• orientation : 방향 설정 속성 - 가로(horizontal), 세로(vertical) 

 

[ View 정렬 ]

일반적인 정렬(align)은 순서대로 놓인다는 의미로 이해할 수 있는데, 안드로이드에서는 gravity라는 속성 이름을 사용

→ '어느 쪽에 무게 중심을 놓을 것인가'의 의미

• layout_gravity : 부모 컨테이너에  View가 모두 채워지지 않아 여유 공간이 생겼을 때 여유 공간 안에서 View를 정렬함
  • View의 layout_width, layout_weight 속성을 wrap_content로 만든 후에 사용 가능
• gravity:  View 안에 표시하는 내용물을 정렬함
  • View가 화면에서 차지하는 영역이 충분히 큰 경우에 생기는 여유 공간 안에서 내용물을 어떻게 정렬할 것인지 결정
  • TextView 안에서의 텍스트나 ImageView 안에서 이미지를 정렬하는 것
• baselineAligned 
  • text의 first line을 align하도록 되어 있는데, 이렇게 되면 레이아웃이 이상해질 수 있음
  • 디폴트가 true이기 때문에 해당 설정을 바꾸려면 최상단에 선언하고 값을 false로 변경
  • orientation:horizontal 일 때만 적용되는 속성

 

[ 여유 공간 분할 ]

• layout_weight : 부모 컨테이너에 남아있는 여유 공간을 분할하여 기존에 추가했던 View들에게 할당
  • layout_width, layout_height가 wrap_content로 설정 → 남아있던 여유 공간을 비율로 분할
  • layout_width나 layout_height를 0dp으로 설정 → 부모 컨테이너의 공간을 비율로 분할

→ linearlayout에서 같은 비율로 꽉 채우고 싶은 경우, wrap_content & layout_weight = 1

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:baselineAligned="false">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="텍스트1"
            android:padding="3dp"
            android:background="#d4fcdf"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="텍스트2"
            android:padding="3dp"
            android:background="#edcef5"
            android:layout_weight="1"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:baselineAligned="false">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="텍스트1"
            android:padding="3dp"
            android:background="#d4fcdf"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="텍스트2"
            android:padding="3dp"
            android:background="#edcef5"
            android:layout_weight="2"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:baselineAligned="false">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="텍스트1"
            android:padding="3dp"
            android:background="#d4fcdf"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="텍스트2"
            android:padding="3dp"
            android:background="#edcef5"
            android:layout_weight="2"/>
    </LinearLayout>
</LinearLayout>

 

---

RelativeLayout : 규칙(Rule) 기반 모델

RelativeLayout으로 만들 수 있는 화면은 대부분 ConstraintLayout에서 만들 수 있기 때문에 사용을 권장하지 않음

이 레이아웃은 부모 컨테이너나 다른 View와의 상대적인 위치를 이용해 View의 위치를 결정할 수 있도록 함

 

[ 부모 컨테이너와 상대적 위치를 이용한 배치 속성 ]

• layout_alignParentTop : 부모 컨테이너의 위쪽과 View의 위쪽을 맞춤
• layout_alignParentBottom : 부모 컨테이너의 아래쪽과 View의 아래쪽을 맞춤
• layout_alignParentLeft : 부모 컨테이너의 왼쪽과 View의 왼쪽을 맞춤
• layout_alignParentRight : 부모 컨테이너의 오른쪽과 View의 오른쪽을 맞춤
• layout_centerHorizontal : 부모 컨테이너의 수평 방향 중앙에 배치
• layout_centerVertical : 부모 컨테이너의 수직 방향 중앙에 배치
• layout_centerInParent : 부모 컨테이너의 수평과 수직 방향 중앙에 배치

 

[ 다른 View와의 상대적 위치를 이용한 배치 속성 ]

• layout_above : 지정한 View의 위쪽에 배치함
• layout_below : 지정한 View의 아래쪽에 배치함
• layout_toLeftOf : 지정한 View의 왼쪽에 배치함
• layout_toRightOf : 지정한 View의 오른쪽에 배치함
• layout_alignTop : 지정한 View의 위쪽과 맞춤
• layout_alignBottom : 지정한 View의 아래쪽과 맞춤
• layout_alignLeft : 지정한 View의 왼쪽과 맞춤
• layout_alignRight : 지정한 View의 오른쪽과 맞춤
• layout_alignBaseline : 지정한 View와 내용물의 아래쪽 기준선을 맞춤

 

 

 

※ 이전 View와 레이아웃에 대한 설명 포스팅

안드로이드의 View와 레이아웃