ConstraintLayout 의 매력에 빠져보겠습니다

어느 순간부터 안드로이드 스튜디오를 업데이트 하고나서,

프로젝트를 생성한 뒤에, MainActivity.xml을 열어보면,

Root ViewGroup이 아래와 같이 ConstraintLayout으로 되어 있는 걸 볼 수 있습니다.

도대체 얼마나 매력적이기에, 구글에서 이것을 디폴트로 쓰라고 추천하는지 궁금해지는데요.

오늘은 이 ConstraintLayout에 대해서 정리해 보면서, 그 매력에 빠져보겠습니다~.

1. ConstraintLayout

Constraint의 한글뜻은 제한, 통제라는 뜻인데요.

모순적이지만, 구글에서는 블로그에서 ViewGroup을 아주 파워풀하고, 유연한 툴이라고 소개하고 있습니다.

구체적으로는, 복잡한 UI들을 안에 겹겹히 쌓지 않고도,

위치나 사이즈를 유연하게 적용시킬 수 있는 ViewGroup이라고 하였는데요.

제한을 통해서, 유연한 UI를 만들것 같은, 굉장한 기대가 느껴지기도 합니다.

실제로 사용하면서 보기전에, 가볍게 상속관계를 먼저 들어가 보도록 하겠습니다.

저희가 알고 있던 ViewGroup Element를 상속받고 있는 건 없구요.

바로 ViewGroup을 상속받고 있습니다. 기존의 메인 ViewGroup이라고 할 수 있는, Linear나 Relative, Frame과는 다른 클래스라는 걸 알 수 있습니다.

이번에는 적용해본 화면을 보겠습니다.

실제로, Constraint를 적용해본 화면인데요.

우측의 화면을 BlueScreen이라고 합니다. 

이 화면에서 어떻게 Constraint을 주는지를 알 수 있는데요.

어떻게 하는건지 한번 아래에서 직접 만들어보겠습니다.

2. ConstraintLayout 사용해 보기

위의 이미지에서, 우측의 푸른색 바탕의 화면이 'BluePrint'라고 했는데요.

Constraint이 어떤 식으로  이루어져 있는지를 볼 수 있습니다.

아무프로젝트나 만들어서 activity_main.xml을 열면,

화면에 제일먼저 배치되어 잇는 것은 Hello World라고 하는 TextView위젯인데요.

우측의 BluePrint화면을 먼저 보도록 하겠습니다.

HelloWorld화면을 감싸고 있는, 

4개의 동그란 점들이 보이시나요?

이 점을 Handle이라고 부릅니다.

이 Handle로 부터, 화면의 상하좌우에 용수철같은 선들이 연결되어 있는데요

Parent인 화면과 어떤 조건을 통해 받고있어서 가운데에 배치되있다는 걸 알 수 있으신가요?

그럼, 좀더 감을 잡기 위해서, Button 위젯을 하나 추가해 보겠습니다.

우측 상단에, ButtonView를 하나 던져 놓았습니다.

아무것도 하지 않았는데,

역시, 아무 관계도 없는 것이어서 용수철 같은 선이 연결되어 있지 않습니다.

이제 아래와 같이, Button 왼쪽 Handle을 클릭해서 잡아당겨서, Hellow World의 우측 Handle에 놓아 보겠습니다.

라인이 생기면서, 둘의 관계가 형성되는 것을 알 수 있습니다.

그리고 나서, 우측상단의 Property뷰를 보면,

HelloWorld 우측핸들에서, 9dp 떨어진 곳에 버튼이 위치하도록 했다는 것을 알 수 있습니다.

바로 이, 9dp를 Constraint으로 볼 수 있는데요.

이런식으로 Handle과 Handle을 연결시켜서, Constrain을 만들 수 있도록 해주는 것이,

ConstraintLayout인데요.

Element끼리는 Handle로 연결해서 Constraint를 만들어서 사용하면 되구요.

부모뷰는 Handle이 없으므로 영역의 끝까지 가져가 주면 연결이 되게 됩니다.

Button의 상단 Handle을 부모의 영역 위쪽의 끝까지 가져가 볼께요.

ButtonView위쪽으로 달라붙으면서, 부모와 Constraint이 형성된 것을 볼수 있습니다.

이번에는 아래쪽 핸들을 부모 영역의 아래쪽 끝까지 가져가 보겠습니다.

이렇게 하면, Button은 아래와 같이, 부모높이의 가운데에 자동으로 위치하게 됩니다.

마치 용수철이, 상하에서 같은 힘으로 당기면, 가운데에 위치하는 것처럼,

따로 마진을 더 주지않는다면, 위아래에 constraint을 주면, 가운데에 위치하게 되는거죠.

다시, 우측 핸들을 부모 끝으로 가져가면,

Button은 HelloWorld와 부모영역의 우측 끝의 중앙에 자리잡게 됩니다.

버튼과 텍스트의 거리는 우측상단의 Property창에서,

화살표가 가르키고 있는 핸들을 조절해서,

weight를 주어서 조절할 수도 있습니다.

코드상의 태그명은 layout_constraintHorizontal_bias로 되어있습니다.

하지만, 디자이너가 작업한대로 dp단위로 정확하게, 구현을 해야하는 경우라면, 조금 맞추기 어려울 수도 있을 것 같습니다.

dp로 된 좌우 간격을 비율로 계산해서, constraint_bias 값을 수정해주어야 하니까요.

하지만, 기기간의 화면사이즈가 매우 다양한 안드로이드에는, 

경우에 따라서는 dp보다는 bias개념의 접근법도 좋지 않을까 하는 생각도 듭니다.

물론, 아래와 같이 상하좌우 마진을 주어서, 수정할 수도 있습니다.

하지만 이 값은 정확하게 마진이 들어가는 것이 아니라,

constraint값이 들어간 상태에서, 추가적으로 마진을 받는 것입니다.

하지만, 꼭 마진값을 정확히 맞추자면,

아래와 같이, bias값을 0으로 만들어 놓고, 

margin값을 준다면, 정확하게 맞출 수 있을 것 같습니다.

마지막으로 Handle에 연결되어 있는 Constrain들은,

해당 Handle을 다시 클릭해주면 delete되어집니다.

3. 정리

개인적으로 사용해본 느낌은, 진화된 Relative Layout 를 사용하는 것 같았습니다.

레이어들을 nest하지 않고도 자유롭게 사용할 수 있다는 것이 거짓말이 아니었네요.

저는 앱 작업할 때, 항상 Text모든에, 우측에 Preview를 켜놓고 작업을 하였었는데요.

이제는 Design모드에서도, 작업을 좀 해봐야 겠다는 생각이 들 정도로,

저에게는 매력적인 ConstraintLayout 이었습니다.