저는 Atlassian에서 안드로이드 트렐로 앱을 개발하고 있는 Huyen Tue Dao입니다. 이번 강연에서는 안드로이드의 새로운 레이아웃인 Constraint Layout에 대해 살펴보겠습니다.

ConstraintLayout

Constraint Layout은 작년 Google I/O에서 처음 소개됐습니다. Constraint Layout이라는 개념은 개발자가 인터페이스를 더욱 풍부한 표현 방식으로 개발할 수 있도록 제공하기 시작했습니다. 개발자가 뷰 사이의 관계를 표현할 수 있도록 하기 위한 목적입니다. 따라서 Constraint Layout은 Relative Layout 보다 풍부한 표현력을 가집니다.

Constraint Layout은 플랫폼에서 언번들 형태로 제공되며 다음 두 가지 사항을 허용합니다.

1. API 9 이상부터 Constraint Layout을 사용할 수 있습니다.
2. 빠른 반복이 가능합니다.

동작 원리

Constraint Layout 시스템은 세 부분으로 구성됩니다.

제약 조건(Constraint)

제약 조건(Constraint)은 UI를 설정할 때 결정되는 관계, 즉 위치와 크기(차원)입니다.

방정식(Equation)

제약 조건으로 관계를 생성하면 시스템이 이를 선형 방정식 시스템으로 변환합니다. 설정한 제약 조건에 따라 뷰 위치의 미설정 값이 해결됩니다.

해법(Solver)

워싱턴대에서 개발된 Cassowary Linear Arithmetic Constraint solving algorithm이라는 해법을 사용합니다. iOS의 Autolayout에서도 사용하는 해법이죠. 방정식을 입력하면 위치와 뷰 크기를 반환해 줍니다.

Constraint Layout 치트시트

가장 기본적인 조건은 에지 제약 조건(Edge Constraint Layout)입니다. 에지 제약 조건이란 뷰의 한 면과 다른 뷰 사이의 관계입니다. 이 관계는 대상 뷰와 다른 뷰 사이에 하나가 설정됩니다.

에지 제약 조건을 한 면에 설정하고 다른 면에도 다른 에지 제약 조건을 설정하면, 두 대상 사이의 뷰를 고정하는 중심 제약 조건(Center Constraint Layout)이 됩니다.

바이어스(bias) 개념도 있습니다. 중심 제약 조건에는 왼쪽과 오른쪽에 슬라이더가 있어서 이를 사용해서 뷰 등을 중심에서 벗어나게 배치할 수 있습니다.

기준선(Baseline) 제약 조건을 사용하면 크기와 관계없이 다른 텍스트뷰를 정렬하는 기준선 앵커를 만들 수 있습니다.

Constraint Layout은 고정 너비를 지정하거나 wrap content를 사용해서 크기를 조정할 수 있습니다. 하지만 match parent는 불가능하므로 사용하면 에러가 발생합니다. match parent 대신 match constraint를 사용하세요.

가이드라인(Guideline)

가이드라인은 제약 조건을 만들 때 뷰의 대상을 의미하며, 다음 세 가지 유형이 있습니다.

1. “Begin/Start” 가이드라인 - 화면 시작으로부터 오프셋으로 지정합니다.
2. “Matching/End” 가이드라인 - 화면 끝으로부터 오프셋으로 지정합니다.
3. “Percent” 가이드라인 - 화면의의 일정 비율로 가이드라인의 위치를 지정합니다.

가이드라인은 렌더링 되거나 레이아웃 패스의 일부분이 아니며, 가이드라인의 핵심은 뷰입니다. 즉, 가이드라인에 뷰를 부착하고 제약 조건을 만든 이후에 가이드라인을 이동해서 부착된 모든 뷰의 위치를 변경할 수 있습니다.

Constraint Layout이 Relative Layout보다 나을까요?

Relative Layout은 성능 이슈가 있습니다. 내부적으로 자체 제약 조건을 풀어내는 데 측정 수와 레이아웃 수가 두 배로 더 필요합니다.

Constraint Layout은 Relative Layout과 유사하지만 “저수준의 방법”으로 관계를 표현하며 속성이 구조화된 방식에서 이를 확인할 수 있습니다. 다음 그림을 보면서 설명하겠습니다.

위 예제에서는 머티리얼 가이드라인에 따라 “플로팅 액션 버튼”이 hero 뷰 위에 있습니다. hero 뷰 위에 플로팅 액션 버튼이 있는 경우 해당 버튼의 세로 길이로 중심 부분이 hero 뷰의 아래와 정렬되는 것이 좋습니다. 이런 위치를 Relative Layout에서 “center”와 “parent”만으로 고정하기는 쉽지 않을뿐더러 정확하지도 않습니다.

Constraint Layout을 사용하면 hero 이미지의 가로세로비를 변경할 수 있고 플로팅 액션 버튼이 hero 뷰의 가장자리에 잘 배치됩니다.

체인

Constraint Layout의 체인이란 양방향 관계로 그룹화된 두 개 이상의 뷰를 뜻합니다. 양방향 관계란 A가 B에, B가 C에, C가 B에 연결되어 체인을 만드는 것과 같은 관계를 뜻합니다. 체인은 위치 지정, 패딩 및 간격을 지정할 수 있는 선형 그룹 동작을 제공하며, 여러 가지 스타일이 있습니다.

1. “기본 분산 체인(Default spread chain)” - 빈 공간이 균등하게 분산됩니다.
2. “체인 내부에서 분산(Spread inside chain)” - 양 측면에서 간격을 없애고 요소 간의 거리를 균등하게 나눕니다.
3. “가중 체인(Weighted chain)” - Linear Layout의 가중치와 같은 동작을 합니다. 모든 뷰는 가중치에 따라 추가 공간을 확보합니다.

Constraint Set

Constraint Set는 프로그래밍으로 제약 조건 집합을 정의할 수 있는 클래스입니다. 스냅샷을 만들거나 Constraint Layout에서 관계의 상태를 저장하는 것과 유사하며, Constraint Set을 바로 생성할 수 있습니다.

Constraint Set는 세 가지 방법으로 만들 수 있습니다.

1. 직접 작성하기 - 자세한 API가 있으므로 참조하세요.
2. 레이아웃 파일을 복제해서 Constraint Set을 생성할 수도 있습니다.
3. 기존의 인스턴스화된 Constraint Layout 역시 복제할 수 있습니다.

커스텀 뷰그룹 대신 Constraint Set 사용하기

iOS 앱을 안드로이드 앱으로 만들면서 커스텀 뷰그룹을 많이 사용했었습니다. 지루한 작업인 데다 다이나믹한 기능을 만들려면 상당히 어려워집니다. 게다가 커스텀 뷰그룹이 강력한 도구이기는 하지만 성능 이슈도 존재합니다.

Constraint Set로 만든 예제 앱입니다. 버튼을 클릭하면 이미지와 텍스트뷰를 생성해서 inflate 한 다음 바로 삽입합니다. 이미 현재 레이아웃에서 복제한 constraint set이 있고, 제약 조건 너비와 높이로 가로 세로를 설정한 다음 수직, 수평으로 제약 조건을 걸었습니다.

Q & A

Q: 어느 시점에서 Constraint Layout의 사용이 과잉될까요? Constraint Layout으로 전환할 때 성능에 영향이 있나요?” A: 저는 보통 성능상의 문제가 걱정되는 경우라면 전반적인 리팩터링을 하거나 심각한 성능 문제를 겪는 경우를 제외하고는 새로운 것을 시도하지 않는 것이 좋다고 생각합니다.