Constraint Layout 이란?
LinearLayout은 위에서 부터 차례로 그려나가는 것이라면
Constraint Layout은 뷰끼리의 제약을 통해 그려나간다.
그렇다면 제약을 통해 그려나간다는 것은 무엇을 말할까?
사용
다음은 사용하기 위해 알아야할 기본 특성들이다.
- 크기 : layout_width, layout_height
- 제약
: layout_constraintLeft_toLeftOf, layout_constraintLeft_toRightOf,
layout_constraintRight_toRightOf, layout_constraintRight_toLeftOf,
layout_constraintTop_toTopOf, layout_constraintTop_toBottomOf,
layout_constraintBottom_toBottomOf, layout_constraintBottom_toTopOf
크기
- 0dp : 제약에 따라 결정
- wrap_parent : 자식의 크기에 따라 결정
- match_parent : 부모에 크기에 꽉 채워짐
제약
컴포넌트의 위, 아래, 좌, 우 가 어디에 위치할지 결정해줘야 한다.
layout_constraintLeft_toRightOf = "@id/text" 는 현재 뷰의 왼쪽이 text 뷰의 오른쪽에 위치한다는 것이다.
이런식으로 위, 아래, 좌, 우를 모두 결정해줘야 한다.
id 대신 parent로 부모 뷰에 제약을 걸 수 있다.
텍스트제약을 걸어줄 때 보면 의문이 드는 점이 있다. start와 left는 다른 것인가??
우선 우리나라에서는 다른 의미이다.
?? 그럼 다른 나라에서는 다른가? -> 다르다. why??
left는 왼쪽이란 뜻이고, start는 시작이란 뜻이다.
이 start가 나라마다 왼쪽 부터일 수 있고 오른쪽부터 일 수 도 있다.
인도에서는 start를 오른쪽에서부터 이라 start는 right과 같다.
이 때문에 안드로이드는 전 세계적으로 사용하는 OS이기 때문에
API 17부터 start 대신 RTL(Right To Left) left, right를 지원하기 시작했다. 이에 글로벌한 사람이 되기 위한 나는 start 대신 left, right를 사용 중이다.
1. Width, Height가 0dp
Width, Height가 0dp 일 때는 layout의 크기가 제약에 따라 결정된다.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>2. Width, Height가 match_parent 일 때
Width, Height가 match_parent 일 때는 부모에 꽉찬 사이즈가 정해졌기 때문에 제약조건을 따로 안걸어줘도 된다. 즉 1번과 동일한 뷰이다.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white" />
</androidx.constraintlayout.widget.ConstraintLayout>3. Width, Height가 wrap_parent 일 때
Width, Height가 wrap_parent 일 때는 자식의 크기에 따라 결정이 된다. 자식이 없을 때는 사이즈가 0과 같다.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>위는 정말 기본적인 Constraint Layout 가 그려지는 방식이고 여러 뷰들이 섞이기 시작하면 그때부터는 그릴 수 있는 방식은 굉장히 많고, 또 사람마다 다르고, 정답이 없기 때문에 본인만의 방식을 찾길 바란다.
알아두면 좋은 특성
- percent
- ratio
- bias
- weight
알아두면 좋은 스킬 (XML 디자인에서)
- center
- chains
