[Android] ConstraintLayout

chaeny·2024년 12월 20일

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

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_constraintHorizontal_bias : 수평 방향에서 뷰의 위치를 결정
layout_constraintVertical_bias : 수직 방향에서 뷰의 위치를 결정

  • 예를들어 수평방향으로의 가운데 정렬을 위해서는 아래 그림과 같이 왼쪽과 오른쪽에 제약을 동시에 걸어주면 됩니다. 마찬가지로 수직방향으로의 가운데 정렬을 위해서는 위쪽과 아래쪽에 제약을 걸어주면 됩니다. 
    이때, bias는 한쪽 방향으로 치우친 정도를 나타내는 값으로 0~1의 값을 가지며 default 값인 0.5일 경우 중심에 위치하게 됩니다. 아래 예제에서 수평 bias가 0.25일 경우에는 수평으로 25%의 지점에 위치하게 됩니다.

layout_constraintBaseline_toBaselineOf : 해당 뷰와 지정된 요소의 문자열 기준선(Baseline)을 맞춥니다. 

  • 텍스트를 포함한 뷰들이 텍스트의 기준선(Baseline)을 맞추도록 정렬하고 싶을 때 사용
    일반적인 Top-to-Top이나 Bottom-to-Bottom 정렬은 뷰의 전체 경계로 정렬되므로, 텍스트의 위치가 어긋날 수 있다. 이때 기준선(Baseline)을 맞추면 텍스트가 자연스럽게 정렬된다.

출처: https://kadosholy.tistory.com/131 [KADOSHoly:티스토리]

0개의 댓글