[Android] ConstraintLayout

 

 

Wanted 안드로이드 프리온보딩 사전 과제를 진행하면서 조사했던 내용들에 대해서 정리해보고자 한다.

 

 

1. ConstraintLayout 개념 및 주요 특징

 

ConstraintLayout 개념

• 복잡한 레이아웃을 단순한 계층 구조를 이용하여 표현할 수 있는 ViewGroup이다.
• View들에 제약 조건(Constraint)을 주어서 배치할 수 있다.
• 다른 View나 부모 Layout과의 정렬 조건 및 연결 관계를 나타낸다.
• 레이아웃 에디터를 적극 활용하여 쉽고 빠르게 화면을 구성하기 위해 도입된 Layout이다.

레이아웃 에디터 / 출처: https://developer.android.com/studio/write/layout-editor?hl=ko

 

 

 

ConstraintLayout의 특징

• LinearLayout을 써야만 했던 View 비율 조절을 간단히 할 수 있다.
• RelativeLayout과 비슷하지만, 더 유연하고 다양한 기능들을 제공한다.
• View 계층을 간단히 할 수 있어 유지보수 및 성능향상에 좋다.
• 자식 뷰 간의 상호관계를 정의할 수 있다.

 

 

 

ConstraintLayout의 9가지 제약조건

출처: https://recipes4dev.tistory.com/158

• Relative positioning : 요소 간 상대 위치 지정
• Margins : 요소 간 여백 설정
• Centering positioning : 뷰를 부모 레이아웃 또는 제약 영역 중앙에 배치 및 편중
• Circular positioning : 대상 뷰 기준 각도와 반지름으로 상대 위치 지정
• Visibility behavior : 뷰의 visibility 상태에 따른 최종 위치 결정 및 여백
• Dimension constraints : 뷰에 적용된 제약에 따른 뷰의 크기 결정
• Chains : 수평 또는 수직 방향으로 나열된 뷰에 대한 그룹화 및 배치 스타일 지정
• Virtual Helpers objects : 레이아웃 내 효율적인 뷰 배치에 사용 가능한 Helper 객체들
• Optimizer : 제약 카테고리에 대한 최적화

 

cf.) Chains 관련 부가 설명 (이미지)

출처: https://academy.realm.io/kr/posts/constraintlayout-it-can-do-what-now/

 

 

 

2. Layout을 선택하는 기준 및 Constraint로 대체된 이유

Layout의 종류

• LinearLayout : 여러 View 위젯들을 가로 또는 세로로 나열할 때 사용
• RelativeLayout : View를 담고 있는 부모 레이아웃이나, 그 안에 있는 다른 View들간의 상대적인 위치를 이용해 배치해야할 때 사용
• ConstraintLayout : View를 배치할 때 제약 조건을 사용해 화면을 구성할 때 사용 (가장 보편적으로 사용)
• FrameLayout : View를 겹쳐서 표현할 수 있어, 화면전환이 필요하거나 View 위에 다른 View를 나타낼 때 사용
• TableLayout : 표의 형태로, 행과 열을 추가하여 화면을 구성할 때 사용
• GridLayout : 격자 모양으로 View들을 나열할 때 사용

cf.) RelativeLayout과 GridLayout은 현재 ConstraintLayout으로 대체되면서 Legacy가 되었다.

 

 

 

ConstraintLayout으로 대체된 이유

: ConstraintLayout

= RelativeLayout(상대적인 위치 관계에 따른 배치) + LinearLayout(가중치를 가진 장점) + Chain(요소의 그룹화)

→ 성능적으로 우수한 편이며, 내부에 레이아웃이 중첩되어서 사용되는 상황을 없애기 위해 권장하고 있다.

 

 

 

---

 

🔗 참고

https://developer.android.com/training/constraint-layout?hl=ko 

https://www.charlezz.com/?p=669 

https://recipes4dev.tistory.com/158

https://academy.realm.io/kr/posts/constraintlayout-it-can-do-what-now/