ConstraintLayout(계산기 모양 만들어보기)

ConstraintLayout이란?

ConstraintLayout은 부모 뷰그룹 안의 다른 요소들과의 상대적인 제약조건을 설정함으로써 화면에 배치되도록 하는 레이아웃을 말합니다.

기존의 레이아웃(Linear, Relative 등등)에 비해 레이아웃이 중첩하지 않도록 복잡한 레이아웃을 만들 수 있습니다

ConstraintLayout 특징

ConstraintLayout을 사용하면 플랫 뷰 계층 구조(중첩 뷰 그룹이 없음)로 크고 복잡한 레이아웃을 만들 수 있습니다. 동위 보기와 상위 레이아웃 사이의 관계에 따라 모든 보기의 레이아웃이 결정된다는 점에서 RelativeLayout과 비슷하지만, RelativeLayout보다 유연하고 Android 스튜디오의 Layout Editor와 함께 사용하기가 더 쉽습니다.

제약조건 개요

ConstraintLayout에서 보기의 위치를 정의하려면 보기의 가로 및 세로 제약조건을 각각 하나 이상 추가해야 합니다. 각 제약조건은 다른 보기, 상위 레이아웃 또는 표시되지 않는 안내선을 기준으로 한 정렬 또는 연결을 나타냅니다. 각 제약조건은 세로 또는 가로 축을 따라 보기의 위치를 정의하므로, 각 보기에는 축마다 하나 이상의 제약조건이 있어야 하며, 흔히 더 많이 필요합니다.

보기를 Layout Editor에 놓으면 제약조건이 없어도 둔 위치에 그대로 남아 있습니다. 이는 단지 더 쉽게 편집하도록 한 것이며, 기기에서 레이아웃을 실행할 때 보기에 제약조건이 없으면 [0, 0](맨 위 왼쪽 모서리) 위치에 그립니다.

그림 1의 편집기에서 레이아웃은 문제가 없어 보이지만, 보기 C에 세로 제약조건이 없습니다. 기기에 이 레이아웃을 그리면 보기 C가 보기 A의 왼쪽과 오른쪽 가장자리에 맞게 가로로 정렬되지만, 세로 제약조건이 없으므로 화면의 맨 위에 표시됩니다.

ConstraintLayout 속성

1) Relative positioning과 관련된 속성 (상대적 위치지정)

ConstraintLayout에서 Relative positioning(상대적 위치지정)은 뷰를 배치하기 위해 기본적으로 사용되는 개념으로 다른 요소들과의 수평, 수직방향으로 일치시키기 위해 사용되는 속성입니다.

layout_constraintLeft_toLeftOf : 해당 뷰의 왼쪽을 지정된 요소의 왼쪽과 맞춥니다.
layout_constraintLeft_toRightOf : 해당 뷰의 왼쪽을 지정된 요소의 오른쪽과 맞춥니다.
layout_constraintRight_toLeftOf : 해당 뷰의 오른쪽을 지정된 요소의 왼쪽과 맞춥니다.
layout_constraintRight_toRightOf : 해당 뷰의 오른쪽을 지정된 요소의 오른쪽과 맞춥니다.
layout_constraintTop_toTopOf : 해당 뷰의 위쪽을 지정된 요소의 위쪽과 맞춥니다.
layout_constraintTop_toBottomOf : 해당 뷰의 위쪽을 지정된 요소의 아래쪽과 맞춥니다.
layout_constraintBottom_toTopOf : 해당 뷰의 아래쪽을 지정된 요소의 위쪽과 맞춥니다.
layout_constraintBottom_toBottomOf : 해당 뷰의 아랫쪽을 지정된 요소의 아래쪽과 맞춥니다.
layout_constraintStart_toStartOf : 해당 뷰의 시작 위치를 지정된 요소의 시작위치와 맞춥니다.
layout_constraintStart_toEndOf : 해당 뷰의 시작위치를 지정된 요소의 끝 위치와 맞춥니다.
layout_constraintEnd_toStartOf : 해당 뷰의 끝 위치를 지정된 요소의 시작위치와 맞춥니다.
layout_constraintEnd_toEndOf : 해당 뷰의 끝위치를 지정된 요소의 끝 위치와 맞춥니다.
layout_constraintBaseline_toBaselineOf : 해당 뷰와 지정된 요소의 문자열 기준선(Baseline)을 맞춥니다.