[Android] 안드로이드 레이아웃 - ConstraintLayout(컨스트레인트 레이아웃) 사용 방법

안녕하세요 이번에 사용해 볼 레이아웃은 Constraint Layout입니다.

Constraint Layout은 View에 제약조건을 걸어 사용하는 Layout으로 RelativeLayout과 유사하지만 좀 더 간편하고, 유연하면서 빠르고 LinearLayout의 속성도 가지고 있는 레이아웃입니다.

 

RelativeLayout의 사용 방법이 궁금하다면 아래에 게시글을 보시면 됩니다~!

[Android] 안드로이드 레이아웃 - RelativeLayout(렐러티브 레이아웃) 사용 방법

 

속성을 한번 보겠습니다.

<!-- View의 상대적인 위치 -->
app:layout_constraintTop_toTopOf="@id/view"	<!-- view의 상단과 현재 view의 상단을 맞춤 -->
app:layout_constraintBottom_toBottomOf="@id/view"	<!-- view의 하단과 현재 view의 하단을 맞춤 -->
app:layout_constraintLeft_toLeftOf="@id/view"	<!-- view의 왼쪽과 현재 view의 왼쪽을 맞춤 -->
app:layout_constraintStart_toStartOf="@id/view"	<!-- view의 시작과 현재 view의 시작을 맞춤 -->
app:layout_constraintRight_toRightOf="@id/view" <!-- view의 오른쪽과 현재 view의 오른쪽을 맞춤 -->
app:layout_constraintEnd_toEndOf="@id/view"	<!-- view의 끝과 현재 view의 끝을 맞춤 -->
app:layout_constraintLeft_toRightOf="@id/view"	<!-- view의 오른쪽과 현재 view의 왼쪽을 맞춤 -->
app:layout_constraintStart_toEndOf="@id/view"	<!-- view의 끝과 현재 view의 시작점을 맞춤 -->
app:layout_constraintRight_toLeftOf="@id/view" <!-- view의 왼쪽과 현재 view의 왼쪽을 맞춤 -->
app:layout_constraintEnd_toStartOf="@id/view"	<!-- view의 시작과 현재 view의 끝을 맞춤 -->

app:layout_constraintBaseLine_toBaseLineOf="@id/view"	<!-- view의 기본라인과 현재 view의 기본라인을 맞춤 -->
app:layout_constraintBaseLine_toTopOf="@id/view"	<!-- view의 상단과 현재 view의 기본라인을 맞춤 -->
app:layout_constraintBaseLine_toBottomOf="@id/view"	<!-- view의 하단과 현재 view의 기본라인을 맞춤 -->

위의 속성들을 이용하여 View들에게 제약을 걸어 위치를 지정할 수 있습니다.

앞서 Relative Layout을 설명할 때 말했듯이 Left와 Right 보다는 Start와 End를 사용하시기 바랍니다.

 

그러면 위의 속성을 봤을 때 Relative와 비슷하다는 것은 이해가 갈 텐데 Linear의 속성을 가지고 있는 건 이해가 가지 않을 겁니다. 아래의 디자인을 만들며 비교해 보도록 하겠습니다.

LinearLayout

<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:orientation="horizontal"
    app:layout_constraintTop_toTopOf="parent">

    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:background="#aaaaaa" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#8844AA" />

    <View
        android:id="@+id/view3"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:background="#AAFF00" />
</LinearLayout>

ConstraintLayout

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="100dp">

    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:background="#aaaaaa"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#8844AA"
        app:layout_constraintEnd_toStartOf="@id/view3"
        app:layout_constraintStart_toEndOf="@id/view1" />

    <View
        android:id="@+id/view3"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:background="#AAFF00"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

보시면 LinearLayout의 경우에는 가중치를 주어서 남는 공간을 채웠습니다. 그리고 ConstraintLayout의 경우에는 좌/우의 제약을 통해 빈 공간을 채울 수 있습니다.

 

그러면 모든 상황에 다른 Layout대신 ConstraintLayout을 사용하면 될까요? 물론 만들 수는 있을 겁니다. 하지만 ConstraintLayout은 제약을 통해 위치를 지정해 줍니다. 즉 제약이 너무 많아지게 된다면 코드는 길어질 수밖에 없기 때문에 상황에 따라 사용하기 편리한, 내가 익숙한 Layout을 사용하는 것이 좋다고 생각됩니다.

 

그러면 이번에는 제약을 걸어 여러가지 위치를 지정해 보겠습니다. 지난번 만들었던 RelativeLayout과 동일한 디자인을 해보도록 하겠습니다.

ConstraintLayout Example

<androidx.constraintlayout.widget.ConstraintLayout
	android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2a222222">

    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="#7461ac" />

    <View
        android:id="@+id/view2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/view1"
        android:background="#999999" />

    <View
        android:id="@+id/view3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toTopOf="@id/view1"
        app:layout_constraintEnd_toStartOf="@id/view5"
        android:background="#a015bb" />

    <View
        android:id="@+id/view4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toTopOf="@id/view3"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="#113366" />

    <View
        android:id="@+id/view5"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toBottomOf="@id/view1"
        app:layout_constraintEnd_toStartOf="@id/view4"
        android:background="#77aa00" />
</androidx.constraintlayout.widget.ConstraintLayout>

저는 ConstraintLayout과 LinearLayout을 자주 사용하고 RelativeLayout은 사용을 하지 않는 편입니다.

다음에는 TableLayout을 사용해 보겠습니다.

 

다른 궁금한 점, 잘못된 점이 있다면 댓글을 남겨주세요!