안드로이드 Constraint Layout에 대하여 알아보기-1

 안드로이드 Constraint Layout 공부하기

현재 일하는 회사에 들어온지 6개월이 지나 처음으로 신규프로젝트를 맡게 되었다.

화면은 4개밖에 없는 간단한 프로젝트였다.

하지만 신입 개발자인 나에게는 이것도 나름 부담이 되는 프로젝트였다.

일단, 시작부터 뷰를 그리는데 숙련이 잘 안되어있어서 삽질을 좀 하였다.

삽질의 핵심은 Constraint Layout에 대한 이해가 부족해서 생긴 문제였다.

그래서 안드로이드 공식문서에서 Constraint Layout에 대한 글을 정독하고 나름 정리해보려고 한다.

ConstraintLayout 안드로이드 공식문서 바로가기

ConstraintLayout은 복잡하고 넓은 화면을 뷰계층구조 없이 플랫하게 만들어주는 레이아웃이다.

RelativeLayout이랑 주변 뷰와의 관계를 통해 레이아웃을 그린다는 점에서 비슷한데 더 유연하고 사용하기 쉬운 장점이 있다.

가장 큰 장점은 Layout Editor의 디자인 화면에서 드래그 앤 드랍으로 사용할 수 있다는 점이다. 

1. 제약 걸기

ConstraintLayout에서 뷰에 제약을 걸 때는 적어도 하나의 수평 제약과 수직 제약이 존재해야한다.

만약 뷰에 어떠한 제약을 걸지않으면 앱을 실행했을 때 좌표 (0, 0)에 뷰를 그리게 된다.(왼쪽 맨 위)

뷰에 대한 제약이 부족할 때 컴파일 에러가 발생하지는 않는다. 다만, xml 파일에 빨간줄이 쳐진다.

2. Constraint Layout으로 전환

예전에는 LinearLayout을 많이 썼는데 Constraint Layout 으로 전환할 때는 위 화면처럼 하면된다.

3. 제약 추가 또는 삭제하기

뷰에 제약을 걸 때는 위 화면처럼 모서리의 점을 선택해서 드래그 해주면 된다.

뷰에 제약을 걸 때는 수직제약은 수직제약끼리 수평 제약은 수평제약끼리 가능하다.

위 화면처럼 마진도 추가할 수 있다. (16이라고 적힌 부분)

제약조건을 삭제할 때는 제약이 설정된 점을 눌러주면 된다.

또는 window 기준으로 control을 누른 후 점을 눌러주어도 된다.

레이아웃 에디터 속성 창에서도 지울 수 있다. 위 화면처럼 x버튼 눌러주면된다.

-부모 뷰로부터 위치 정하기

A 뷰는 부모뷰의 왼쪽 모서리에 제한이 걸려있다.

-뷰의 순서 정하기

위 화면처럼 제한을 걸어서 뷰의 순서를 정할 수 있다.

-정렬

뷰를 정렬할 수도 있다.

레이아웃 에디터 디자인 화면에서 쉬프트로 여러 뷰를 클릭 후 오른쪽 버튼을 눌러서 "Align"을 선택해도 가능하다.

-Baseline 정렬

베이스 라인이란 텍스트가 쓰여진 가장 아래 선을 말한다.

이 베이스라인으로 정렬을 할 수가 있다.

레이아웃 에디터 디자인 화면에서는 뷰를 클릭 후 오른쪽 버튼을 눌러서 "Show Baseline"을 선택한다.

그 다음 정렬할 베이스 라인을 선택하면 된다.

코드로 구현하면 아래와 같다.

<TextView
    android:id="@+id/tv1"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:text="\t\u2022 맞지?"
    android:textSize="30sp"
    app:layout_constraintEnd_toStartOf="@id/tv2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/no3" />

<TextView
    android:id="@+id/tv2"
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:text="텍스트뷰2"
    app:layout_constraintBaseline_toBaselineOf="@+id/tv1"   //baseline 정렬
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/tv1" />

-가이드라인 정렬

Constraint Layout에는 가이드라인 이라는 뷰를 사용하여 쉽게 정렬을 가능하게 해준다.

정렬을 위한 가상의 선을 말한다.

가이드라인을 만드는 방법은 위 화면과 같습니다.

-barrier 정렬

가이드라인과 비슷하게 barrier로 정렬을 할 수도 있다.

위 그림처럼 View A와 B 중에 어느 것이 더 길지 모르는 상황이 있다.

이럴 때 사용하는 것이 barrier이다.

Barrier은 Pallete에서 선택하여 화면으로 드래그해서 만든다.

그 다음 Component Tree에서 Barrier 안에 들어갈 뷰를 여러개 선택해서 넣어주면 된다.

방향은 Attribute 창에서 설정해도 되고 코드로 설정해도된다.

<androidx.constraintlayout.widget.Barrier
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="right"
    app:constraint_referenced_ids="textview3,textview4"
    tools:layout_editor_absoluteX="96dp"
    tools:layout_editor_absoluteY="448dp" />

당연히 Barrier 안에 있는 뷰들을 평소처럼 제약조건을 걸 수 있고 Barrier 안에 가이드라인을 사용해서 제약조건을 걸 수도 있다.

Share: