[Android] ConstraintLayout : 뷰의 상대적인 위치를 잡는 레이아웃 (feat. RelativeLayout)

날짜:


 

왜 2개를 묶었냐하면, RelativeLayout은 ConstraintLayout에 밀려서 이젠 기본 레이아웃에도 빠져있기 때문에 RelativeLayout을 따로 다루기는 애매하고, 안 다루기엔 어쨌거나 사용하는 프로젝트가 있을 수도 있어서 그냥 한꺼번에 묶어서 설명하는 것이 좋겠다고 생각했습니다. 무엇보다 RelativeLayout을 사용해본 적이 없어서 그냥 간단하게 이것 저것 해보고 난 후기를 쓰는 것이라고 보면 될 것 같습니다. 사실 상 ConstraintLayout 위주로만 얘기하지 않을까 싶네요.




RelativeLayout 사용 후기 (?)

저도 이번 기회에 처음 써봤는데, 그냥 ConstraintLayout의 구버전 같은 느낌이 들었습니다. 그런 것치곤 너무 복잡하고 속성도 많더군요. 그래서 그냥 대충 어떤 것인지만 보겠습니다.

일단 RelativeLayout은 부모를 기준으로, 또는 다른 뷰를 기준으로 얼만큼 떨어져있는지를 결정하는 레이아웃입니다. 가령 부모의 시작 지점을 기준으로 margin을 얼마 만큼 줄 지, 다른 뷰를 기준으로 얼마 만큼, 어떤 방향으로 떨어질 지, 혹은 어떻게 정렬할 지를 결정하는 레이아웃입니다. 그냥 쉽게 말해 예전 수학 시간의 4분면에서 x, y 좌표가 어떻게 되는 지로 생각한다면 좀 이해하기 쉬울 것 같습니다.

 

사실 저희가 프로젝트를 시작할 때 MainActivity와 activity_main.xml 이 자동으로 생성되어서 ConstraintLayout을 맨 처음 접하게 될 것입니다. 그걸 생각해보면 생김새가 매우 비슷합니다.

layout_alignParentTop이나 layout_alignParentStart 등을 true로 하면 해당 방향에 현재 뷰를 연결해주게 됩니다. 직접 코드를 적을 필요는 없고 그냥 뷰를 화면에 끌어다 놓으면 알아서 속성을 세팅해줍니다. (물론 IDE가 임의로 위치를 정해주기 때문에 개발자가 좀 더 확실하게 방향을 지정하기는 해야합니다.)

상황에 맞춰 Start, End, Top, Bottom을 사용할 것인지 말 것인지 결정한 후에 margin의 수치를 변경만 해주면 될 것 같네요. 속성에 관해서는 아래의 링크에서 확인하면 될 것 같습니다.







ConstraintLayout

RelativeLayout도 분명 좋은 레이아웃이지만, ConstraintLayout이 나온 지금, 기존에 RelativeLayout을 사용하고 있던 프로젝트를 제외하고는 굳이 저걸 사용할 필요는 없을 것 같습니다. 좀 더 간단명료하게 상대적인 위치를 정할 수 있기 때문입니다. 또한 이전에 얘기했던 LinearLayout이나 FrameLayout의 기능도 충분히 대체할 수 있습니다.

기본적인 사용 방법은 이전 글에서 설명한 적이 있어서 자세하게는 다루지는 않겠습니다. 애당초 비교적 직관적이기 때문에 조금만 사용해봐도 어떤 느낌인지 금방 감이 올 것이라고 생각합니다. 아래의 링크에서 기초적인 부분에 대해서 설명한 것을 확인할 수 있습니다. 내용이 조금 부실하다고 느껴지신다면 공식 도큐먼트에서도 학습할 수 있습니다. (사실 그렇게 따진다면 도큐먼트가 정리가 제일 잘 되어있긴 합니다.)

[Android] 안드로이드 기초 - ContraintLayout 과 LinearLayout : 가장 기본적인 레이아웃

ConstraintLayout으로 반응형 UI 빌드


그래서 사진으로 보면 LeftButton은 marginStart를 기준으로 28dp만큼, marginTop을 기준으로 124dp만큼 떨어져있으며, RightButton은 layout_constraintStart_toEndOf라는 속성으로 LeftButton과 연결되어 있습니다. 이렇게 constraint를 설정해서 상대적인 위치를 잡게 됩니다.

그래서 FrameLayout의 기능을 대체할 수 있습니다. 가령 2개의 뷰가 constraintStart를 부모로 갖고, marginStart 값을 똑같이 같는다면 FrameLayout 위에 뷰를 2개 올린 것과 다름이 없으니까요. 


<?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">


    <Button
        android:id="@+id/button29"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="28dp"
        android:layout_marginTop="124dp"
        android:text="LeftButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button30"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:layout_marginTop="124dp"
        android:text="RightButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/button29"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>




ConstraintLayout과 Chain 

이번엔 chain을 잘 사용하면 LinearLayout의 기능을 대체할 수 있습니다. 

1. 아래와 같이 chain을 형성할 뷰들을 전체 선택 (드래그를 해서 전체 선택을 하거나 뷰 화면 왼쪽의 Component Tree에서 한꺼번에 선택) 해주세요.



2. 우클릭 -> Chains -> Create Horizontal (Vertical) Chain을 선택해주세요.



3. 아래와 같이 chain이 형성된 것을 확인할 수 있습니다.



4. 다시 우클릭 -> Align -> Top Edges를 선택해주세요. (Baselines로 해도 되고 상황에 따라 아래의 어떤 메뉴든 상관 없음)



5. 이제 좋든 싫든 저 세 녀석은 함께 다니게 됩니다.







ConstraintLayout의 장점

위와 같이 ConstraintLayout은 RelativeLayout은 말할 필요도 없고, FrameLayout의 기능을 충분히 대체할 수 있으며, chain 기능을 사용하게 되면 LinearLayout으로 뷰를 정렬하는 것과 거의 똑같은 기능을 구현할 수 있습니다. 심지어 weightSum을 지정해서 비율을 정해야했던 LinearLayout보다 뷰의 크기를 정하기도 비교적 편합니다.

또한 FrameLayout이나 LinearLayout은 뷰의 형태를 여러가지로 변경하고 싶다면 레이아웃 안에 또 레이아웃을 만들어서 사용해야 하는, 흔히 말하는 depth가 깊어지게 됩니다. 가령 LinearLayout으로 GridView를 흉내낸다고 한다면, Horizontal LinearLayout 안에 여러 개의 Vertical LinearLayout을 만들고, 그 안에 또 view를 만들어야 합니다. 구조가 굉장히 복잡해지겠죠?
ConstraintLayout은 그럴 필요도 없이 그냥 Chain으로 하나의 행을 묶고, 그 행들을 다시 Chain으로 묶는다면 (위에서 만든 것을 잘 생각해보세요!) depth가 깊어질 이유도 없고 구조 자체도 상당히 간단하게 나옵니다.

그렇기 때문에 ConstraintLayout 하나로 이전의 많은 레이아웃들을 대체할 수 있기 때문에 많이 사용하게 됩니다. 그렇다고 다른 레이아웃들이 필요 없느냐라고 한다면... 가령 수평으로 정렬된 뷰가 꽤나 많다면 ConstraintLayout으로 만들기엔 조금 불편할 수 있고, 더구나 단순히 리스트에 이미지뷰를 넣는 형태라면 LinearLayout을 사용해도 depth가 깊어지지도 않고 구조가 복잡하지도 않기 때문에 사용해도 별 상관이 없습니다. 상황에 따라 맞는 레이아웃이 있기 때문에 모두 알아두는 것이 좋을 것 같습니다. 


그래도 RelativeLayout은 필요 없다고 생각하지만요.










마치며..

위에서 많이 얘기했지만, 다른 레이아웃을 알아두는 것도 중요하다고 생각합니다. 공부는 최대한 많이 하면 할수록 좋은 것이니까요. 원래 RelativeLayout도 따로 글을 적을 생각이었는데, 아무리 생각해도 딱히 필요성을 못 느끼네요. 조금 귀찮기도 하고 말이죠.
막상 쓰기 전에는 귀찮아서 시작도 안하는데, 오랜만에 글을 썼더니 뭔가 재밌네요. 가끔씩 개인 프로젝트나 도큐먼트 보면서 배우는 것들을 정리해야겠네요. 
아, 항상 피드백과 비판, 격려의 댓글은 환영합니다. 신랄하게 까주세요! 그럼 즐거운 코딩하세요!







댓글

댓글 쓰기