참고 교재 : Joyce의 안드로이드 앱 프로그래밍 - 홍정아
▶ ConstraintLayout
한 화면을 구성하는 뷰들에게 서로 제약을 제공
반응형 UI를 쉽게 구성할 수 있어 LinearLayout과 RelativeLayout보다 많이 사용
중첩된 레이아웃을 사용하지 않아 성능면에서 유리
자식 뷰의 위치를 정의하기 위해서는 수직/수평 방향에 제약 조건을 추가해야함
아무런 제약을 추가하지 않을 경우 → 왼쪽 상단에 배치
▼자주 사용하는 속성
app:layout_constraint[내 방향]_to[기준 뷰 방향]Of = "[기준 뷰 ID or parent]"
app:layout_constraintStart_toStartOf="parent"를 통해 수평 방향의 제약을 걸었다.
하지만 <Button 에 빨간줄이 생기게 된다.
이는 ConstraintLayout의 특징으로 수직과 수평 방향 모두 제약을 걸어야한다.
오류에도 This view is not constrainted vertically라는 말을 통해 수직 방향의 제약이 필요하다는 걸 알 수 있다.
app:layout_constraintStart_toStartOf와 app:layout_constraintTop_toTopOf를 통해 수평과 수직 모두 제약을 걸은 상태이다.
그 결과 <Button에 있던 빨간줄이 사라진 걸 확인할 수 있다.
Button1을 기준으로 TextView의 제약을 걸을 수 있다.
app:layout_constraintStart_toEndOf="@id/button_1" 과 같이 @id/해당 id를 지정해주면 된다.
▶ ConstraintLayout에 마진을 사용할 때 주의할 점
원하는 방향의 마진을 부여할 때는 해당 방향의 제약이 존재해야 한다.
왼쪽 코드와 같이 해당 뱡향의 제약이 없을 때 마진을 부여해도 반응하지 않는다.
하지만 해당 방향의 제약이 있는 오른쪽 코드의 경우 maginTop 100dp가 잘 적용됨을 확인할 수 있다.
layout_width & layout_heigh이 0dp일 경우 match_constraint를 값으로 주는 것과 같다. 즉, 제약에 뷰 크기를 맞추는 것이다.
오른쪽 사진과 같이 Button 2의 크기가 제약에 맞춰짐을 확인할 수 있다.
※ 본 게시글은 'Joyce의 안드로이드 앱 프로그래밍 - 홍정아' 책의 내용과 Android Developers의 공식문서 내용을 참고하여 작성하였습니다.
'안드로이드(Android)' 카테고리의 다른 글
| 스톱워치(StopWatch)_1 / [Android-Kotlin] (0) | 2023.02.10 |
|---|---|
| 반응형 UI 만들기 : Guideline (0) | 2023.02.08 |
| RelativeLayout(상대적 레이아웃, 렐러티브 레이아웃) (0) | 2023.02.05 |
| LinearLayout(리니어 레이아웃) (0) | 2023.02.04 |
| 안드로이드 레이아웃의 종류 (0) | 2023.02.03 |