안드로이드 ConstraintLayout

 

그간 예제에서는 전부 LinearLayout을 사용해 레이아웃을 작성했었다.

 

LinearLayout을 이용하면 간단하게 코드를 짤 수 있지만 뷰가 많이 들어가거나

 

복잡한 레이아웃의 경우 view가 많아지는 경향이 있다.

 

 

사실 안드로이드 스튜디오에서 권장하는 레이아웃은 ConstraintLayout 이다.

 

 

처음 안드로이드 공부를 할때에는 ConstraintLayout 으로 레이아웃을 작성했었고

굉장히 편하고 유용하다는 생각을 했었다.

 

하지만 여러 레이아웃을 만들어 볼수록 조금씩 뷰가 틀어지거나 배치한 위치가

내가 생각한 위치와 다른경우도 많았기 때문에 점점 LinearLayout을 사용하게 되었었다.

 

이러한 이유때문인지 점점 ConstraintLayout를 접할 기회가 줄었었는데

ConstarintLayout 공부 한걸 잊지않게 간단하게 포스팅 해보려 한다.

 

 

1. ConstraintLayout 이란 ?

ConstraintLayout 은 부모 뷰그룹 안의 다른 요소들과의 상대적인 제약조건(Constraints)을

설정함으로써 화면에 배치되도록 하는 레이아웃이다.

 

기존의 레이아웃 (LinearLayout , RelativeLayout 등) 에 비해 레이아웃이

중첩하지 않도록 복잡한 레이아웃을 간단하게 만들 수 있다.

 

또한 안드로이드 스튜디오의 레이아웃 에디터로 만들기도 편하고

성능도 다른 레이아웃에 비해 우수하다.

 

ConstraintLayout을 쓰는 것이 복잡한 View를 

성능 저하 없이 만들 수 있는 방법으로 안드로이드에서 권장하고 있다.

 

 

 

2. ConstraintLayout 의 속성

ConstraintLayout 속성을 설명하기에 앞서 쓰이는 단어들의 의미를 이해할 필요가 있다.

 

 

Left / Start : Left의 뜻대로 View의 왼쪽을 뜻한다. Start 또한 왼쪽을 의미한다고 보면된다.

 

Right / End : Right의 뜻대로 View의 오른쪽을 뜻한다. End 또한 왼쪽을 의미

 

Top : View의 위쪽을 뜻한다.

 

Bottom : View의 아래쪽을 뜻한다.

 

Chains : 수평 또는 수직 방향으로 연결된 뷰를 위한 속성

 

 

위의 단어들을 숙지했다면 아래의 속성들을 보자

 

속성들의 공통점은 Constraint의 시작부분 , 지정된 부분 으로 구성되어 있다는 것이다.

 

위의 속성을 글로만 보면 이해가 쉽지 않기에 예제를 통해서 좀 더 직관적으로 알아보자.

 

 

 

3. 예제

먼저 프로젝트를 만들거나 액티비티를 만들게 되면

메인 액티비티의 레이아웃의 기본설정이 ConstraintLayout으로 설정되어 있는걸 볼 수 있다.

메인액티비티의 레이아웃 xml

 

위의 TextView가 Constraint 속성으로 관계가 맺어져 있는것도 볼 수 있다.

 

여기서 TextView의 parent는 바로 상위의 View인 ConstraintLayout이다.

 

 

 

그다음 버튼을 한번 만들어보자.

Button 만들어준 메인액티비티 레이아웃

 

버튼을 만들어보면 버튼쪽에 에러가 뜨는걸 볼 수 있다.

 

이 에러가 뜨는 이유는 Constraint 레이아웃 에서는 최소 3개의 관계를 맺어줘야 한다.

 

상 하 좌 우 (Top , Bottom , Start , End) 의 관계중 3개의 관계를 맺는걸 의미한다.

 

 

우측 상단 디자인 탭에서도 관계를 맺어줄 수 있다.

 

Start 속성 , End 속성 , Bottom 속성의 관계를

Parent와 맺어주면 맺어주면 위이미지와 같이 뷰의 위치가 지정된다.

 

 

코드로 보게되면 기존에 있던 에러가 사라진걸 볼 수 있다.

 

 

 

이번에는 Chain 속성이다.

TextView의 Bottom 과 Button 의 Top 을 위 코드와 같이 작성하면

Button의 Top에 Chain이 생긴걸 볼 수 있다.

 

 

이렇게 View 끼리 관계를 맺어준걸 Chain이라 하고 이 Chain의 속성을 선언해 줄 수 있다.

공식문서에서 발췌한 chain 속성 내용

 

위 공식문서처럼 View 3개를 만들어보고

Constraint를 맺어준 다음 맨 왼쪽의 View에 Chain 속성을 지정해보자.

 

 

Spread_inside 속성을 사용했을때

Spread_inside

 

 

Spread 속성 사용했을 때

Spread

 

 

Packed 속성 사용했을 때

packed

 

 

이렇게 View 간에 Constraint를 맺고 Chain 속성에 따라서 View들의 위치를 지정할 수 있다.

 

이렇게 서로 View와 View 끼리 Constraint가 되어 있으므로 View 하나의 속성을 바꿔주면

다른 View에도 영향이 갈 수 있는 점을 항상 생각하면서 레이아웃을 구성해 나가야 한다.

 

 

 

오늘 사용한 예제는 단순히 버튼3개를 가지고 진행 했지만

 

좀 더 복잡한 레이아웃의 경우를 구성해야 할때에도 기준 View를 기준으로 View의 배치를 짜야한다.

 

확실히 다른 레이아웃들에 비해 훨씬 유연하고 간단한 View의 배치는 다루기도 쉽다는 강점이 있는것 같다.