주요 내용으로 건너뛰기

[안드로이드] ConstraintLayout Guidelines, Barriers 사용하기

최근에 안드로이드 뷰 XML을 짜면서 ConstraintLayout을 적용해봤는데, 이해하기가 어렵지 않고 기존의 뷰그룹 클래스보다 훨씬 더 강력한 기능을 제공하고 있어서 애용하게 되었다. 뷰 사이의 관계를 설정하는 Constraints와 연결된 뷰 사이의 관계 특성을 설정(?)하는 Chains를 가장 많이 쓰게 되긴 하지만 UI가 복잡해지면서 이것만으로는 모자라는 경우가 생긴다. 특히 레이아웃 내부의 뷰 사이즈에 wrap_content 속성을 적용해야하는데 구조는 복잡한 경우가 그런데, 그럴 때는 Guidelines와 Barriers를 사용하면 좋다. 이 밑으로 둘의 간단한 사용법을 알아보자.

Guidelines


참고: 안드로이드 개발자 사이트, ConstraintLayout 사이트

Guidelines(이하 가이드라인)는 뷰를 배치하기 위해 뷰그룹 내에 설정할 수 있는 일종의 기준선이다. 포토샵같은 그래픽 툴을 사용해봤다면 익숙한 개념일 것이다. 가로/세로로 적용할 수 있으며, XML상에서의 적용방법은 LinearLayout과 같이 android:orientation="vertical(가로는 horizontal)"로 적용할 수 있다.

일단 가로인지 세로인지 정했다면 이제 위치를 정해야 한다. 위치를 정하는 방법은 크게 두가지인데, 하나는 일반적인 dp, px과 같은 수치를 적용하는 것이고 또 하나는 퍼센트를 적용하는 것이다.

수치를 적용하는 것은 또 두가지로 나뉜다. 바로 layout_constraintGuide_beginlayout_constraintGuide_end이다. begin의 경우 레이아웃 내에서 세로 가이드라인이라면 왼쪽(start)에서부터 얼만큼 떨어져있는지, 가로 가이드라인이라면 위에서부터 얼만큼 떨어져있는지를 뜻한다. end는 이와 반대로 세로는 오른쪽(end)에서부터, 가로는 아래에서부터 얼만큼 떨어져있는지를 적용하면 된다. 예를 들자면 다음과 같이 했을 경우,

가이드라인이 ConstraintLayout의 왼쪽에서부터 16dp 떨어진 지점에 세로선으로 위치하게 된다.

퍼센트를 적용하는 방법은 한가지다. layout_constraintGuidePercent를 적용하는 것이다. 0.0부터 1.0까지 적용할 수 있는데, 이때는 begin과 end 없이 무조건 왼쪽이나 위쪽에서 시작한다고 생각하면 된다. 레이아웃 내부로부터 왼쪽에서 40% 지점에 세로로 된 가이드라인을 적용하고 싶다면 다음과 같이 적용하면 된다.

Barriers

Barriers는 안드로이드 스튜디오 v3.0 canary3 이상, ConstraintLayout 1.1.0-beta1 이상부터 사용할 수 있다.


참고: 안드로이드 개발자 사이트, ConstraintLayout 사이트

Barriers(이하 배리어)는 특히 다국어지원을 하는데에 유용하다. 예를 들어 세로로 배치된 두 개의 텍스트뷰가 있는 상황에서, 두 텍스트뷰의 오른쪽에 어떤 뷰를 배치해야하는 상황이 있을 수 있다. 하지만 어떤 언어를 적용하느냐에 따라서 어떤 뷰가 더 커지거나 작아질 수 있다면? 두 개의 텍스트뷰 중에서 어떤것을 기준으로 삼아야하는지 정할 수 없을 것이다. 하지만 이 두 텍스트뷰에 대해서 배리어를 설정하면 걱정하지 않아도 된다. 일단 두개의 텍스트뷰를 배치하고, 배리어를 만들어서 어떤 뷰에 대한 배리어가 될 것인지, 대상하는 뷰의 어느 위치에 배리어를 위치할 것인지를 설정하면 된다. 예를 들자면 다음과 같다.

여기서 확인할 것은 두 줄이다. 하나는 app:constraint_referenced_ids="tv1,tv2"이고, 또 하나는 app:barrierDirection="end"이다. constraint_referenced_ids는 이 배리어가 어떤 뷰에 대해서 설정되는 것인지를 정하는 요소이다. 앞에서 얘기한 세로로 배치된 두개의 텍스트뷰의 아이디가 tv1, tv2라고 할 때 constraint_refrenced_ids에 아이디를 콤마로 구분하여 쓰면 적용된다. 그 다음으로는 barrierDirection인데, 이것은 constraint_referenced_ids에 적용된 뷰들에 대하여 배리어가 어느 방향에 위치할 것인지를 적용하는 요소이다. 위의 예문에서는 end라고 적용되어있는데, 이 경우에는 배리어가 tv1tv2 중 더 큰 뷰의 (ltr 기준)오른쪽에 위치하게 되는 것이다. 이제 오른쪽에 배치할 뷰가 배리어의 오른쪽에 오도록 하면 문제없이 적용된다.



안드로이드 애플리케이션 개발자

구본욱 님의 창작활동을 응원하고 싶으세요?

댓글

SNS 계정으로 간편하게 로그인하고 댓글을 남겨주세요.
#15
NestedScrollView가 보여질 때 제멋대로 스크롤 되는 문제
#17
macOS에서 ssh passphrase 저장하기