[안드로이드 스튜디오]Constraint Layout 기본 사용법[1] – 위젯 관계 설정

메인이미지

ConsraintLayout은 사용법만 안다면 다른 레이아웃 들보다 더 유연하게 Ui를 구성할 수 있게 만들어져 있습니다.

안드로이드 api14 이상 버전부터 구동이 가능한데 안드로이드 사용자의 99% 정도가 이에 해당하기에 사실상 호환이 안되는 안드로이드 버전이 없다고 봐도 무방하죠.

디자인 탭의 속성 메뉴를 이용해서 구성할 수도 있고 xml에서 직접 코드를 짜줄 수도 있습니다.

그럼 바로 제가 가장 많이 사용하는 설정 에 대해서 알려드리도록 하겠습니다.  

xmlns:app="http://schemas.android.com/apk/res-auto"

이 속성이 부모 레이아웃에 포함되어 있지 않으면 app에 해당하는 속성을 사용하실 수 없습니다.

 

위젯 관계 설정에 대하여

첫번째로 설명드릴 것은 위젯간 관계를 설정하는 방법에 대해서 입니다.

constraint layout의 app 속성에 있는 layout_constraint방향_to방향of 속성을 이용해서 각 위젯간 관계를 설정해줄 수 있죠.

코드로 적어보면 이렇게 되겠네요.

app: layout_constraint방향(이 위젯의 해당 방향에서)_to(대상 위젯의 해당 방향으로)of : 대상id or parent

방향 이름에 대해서는 아래에 표로 더 자세하게 알려드리겠습니다.

방향 이름	방향
top	위
bottom	아래
start(left)	왼쪽
end(right)	오른쪽

상하좌우 각각 속성 설정이 가능하기 때문에 좌, 우에 부모 레이아웃의 왼쪽 오른쪽에 관계를 설정해주면 위젯이 중앙에 위치합니다.

또 1번 위젯은 상, 하에 각각 부모의 위쪽, 2번 위젯의 위쪽을 할당해주고 2번 위젯은 상, 하 각각 1번 위젯의 아래쪽, 부모의 아래쪽을 할당해주면 부모레이아웃을 3등분하여 등분한 각각의 자리에 알아서 자리를 잡습니다.

말로만 설명드리면 힘드니 아래에 예제로 보여드리도록 하겠습니다.

activity_main.xml

<?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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/testButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:background="@drawable/button_design"
        android:paddingStart="5dp"
        android:paddingEnd="5dp"
        app:layout_constraintBottom_toTopOf="@id/TextView_Button"//아래 방향을 텍스트뷰 위젯의 위쪽에 관계 설정
        app:layout_constraintLeft_toLeftOf="parent"//왼쪽 방향을 부모의 왼쪽에 관계 설정
        app:layout_constraintRight_toRightOf="parent"//오른쪽 방향을 부모의 오른쪽에 관계 설정
        app:layout_constraintTop_toTopOf="parent"/>//위 방향을 부모의 위쪽에 관계 설정
    <TextView
        android:id="@+id/TextView_Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:background="@drawable/button_design"
        android:paddingStart="5dp"
        android:paddingEnd="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/testButton"//위 방향을 버튼 위젯의 야래에 관계 설정 
        />

</androidx.constraintlayout.widget.ConstraintLayout>

위의 코드는 버튼 위젯과 텍스트뷰 위젯 그리고 부모 레이아웃과의 관계를 설정해서 두 위젯이 중앙에 정렬하게 만들고 화면에 비례하는 자리에 위치하도록 만든 코드입니다.

이처럼 위젯 간의 관계를 잘 설정해 주면 기기 화면 크기에 따라서 위젯의 위치가 달라지기 때문에 반응형 UI를 구성할 수 있게 됩니다.

관계를 드래그하여 설정하는 모습

위 사진을 보시면 프리뷰에서 각각의 위젯이 알아서 자리잡은 모습을 보실 수 있습니다.

또 이러한 관계의 설정은 디자인 탭에서도 진행할 수 있는데요.

디자인 탭을 들어가보면 이렇게 팔레트와 디자인 프리뷰, 그리고 블루프린트 처럼 생긴 창이 나옵니다.

팔레트에서 위젯을 끌어와서 레이아웃에 집어넣으면 UI에 해당 위젯이 추가되죠.

추가된 위젯을 보면 상하좌우에 각각 동그라미가 보입니다.

해당 동그라미를 클릭한채 부모레이아웃(블루프린트 창의 상하좌우) 혹은 다른 위젯의 상하좌우에 드래그해 연결해주면 XML 코딩 없이도 각 위젯 간의 관계를 설정할 수 있습니다.

https://developer.android.com/training/constraint-layout?hl=ko

ConstraintLayout으로 반응형 UI 빌드  |  Android Developers

위 링크는 안드로이드 공식 설명으로 어떻게 작동하는지 더 자세하게 알 수 있습니다.

언뜻보면 Relative Layout과 비슷해보일지 몰라도 다른 속성 설정을 통해 기존 레이아웃들보다 더 유연한 UI구성이 가능하기 때문에 많이들 사용하고 있죠.

---

이렇게 오늘은 안드로이드 레이아웃 중의 Constraint Layout에 대해서 알아봤는데요.

안드로이드 스튜디오에서도 처음 빈 프로젝트를 만들면 Constraint Layout으로 activity_main.xml 파일을 생성해 주는 것을 보면 이 레이아웃을 구글이 권장하고 있다고 생각해도 될 것 같습니다.

이외에도 화면비례 크기설정, 가이드라인 설정, 위젯 높이 너비 비 설정 등 다양한 것을 설정할 수 있으니 다음에는 그 내용으로 찾아 뵙도록 하겠습니다.

긴 글 읽어 주셔서 감사합니다.

---

이전 글 읽기

[안드로이드 스튜디오]버튼, 클릭 이벤트 기본 사용법 – 클릭 이벤트[Button][1]

이전 글 읽기

[안드로이드 스튜디오]텍스트뷰 기본 사용법 – 문자 정렬, 글자 색, 크기, 내용 변경에 대해[TextView][1]

---

이 글의 저작권은 전적으로 작성자인 P_Emblem에게 있으며
허락없는 사용을 금합니다.