티스토리 뷰

ConstraintLayout이란?

ConstraintLayout은 android.view.ViewGroup에 속한 레이아웃이며 위젯의 위치(postion)와 크기(size)를 지정할 수 있게 해준다.

 

Constraint의 종류

  • Relative positioning
  • Margins
  • Centering piositioning
  • Circular positioning
  • Visibility behavior
  • Dimension constraints
  • Chains
  • Virtual Helpers objects
  • Optimizer

 

Relative positioning

Constraint 레이아웃에서 가장 기초적인 개념이다. 대상 위젯의 위치를 지정할 때, 다른 위젯으로부터 상대적인 위치에 지정한다.

Margins

대상 위젯의 테두리 바깥의 여백 면적을 의미하며, 0 이상으로만 지정될 수 있다. 

Centering piositioning and bias

constraintLeft_toLeftOf와 Right_toRightOf를 둘다 parent로 두면 기본적으로 정중앙에 위치하도록 포지셔닝한다. 이를 변경하고 싶다면 bias 속성을 사용하여 다르게 포지셔닝 할 수 있다.

Circular positioning

대상 위젯의 중간점으로부터 다른 위젯의 중간점까지의 각도와 거리를 지정하여 제약을 주는 것을 의미한다.

Visibility behavior

View.Gone에 속한 GONE 위젯은 뷰에서 보여지지 않으며 자리를 차지하지도 않는다. 하지만 대상 위젯에 적용된 면적은 그대로 유지된다.

Gone 제약은 일시적으로 위젯을 사라지게 하고 싶지만 레이아웃은 그대로 유지해야 할 때 유용하게 사용할 수 있다.

Dimension constraints

최소 너비(높이), 최대 너비(높이), 너비(높이) 지정, 비율과 관련된 제약을 말한다.

Chains

체인을 사용하면 하나의 수평/수직 축(axis)을 기준으로 여러개의 위젯들을 그룹화하여 움직일 수 있다. 하나의 축을 기준으로 체인을 지정하더라도 다른 축에 대한 제약은 독립적으로 적용할 수 있다. 즉, 수평 체인을 지정하더라도 수직으로 별개의 제약을 지정할 수 있다.

Virtual Helpers objects

앞서 설명했던 내장 함수 이외에도 ConstraintLayout에 포함된 helper를 이용하여 레이아웃을 조정할 수 있다. Guideline 객체를 사용하면 ConstraintLayout을 기준으로 하는 수평/수직 가이드라인을 만들 수 있으며, Barrier와 Group 속성도 사용할 수 있다. 가이드라인(Guideline)과 배리어(Barrier)는 렌더링되어 뷰에 나타나는 요소가 아니다.  주로 가이드라인에 위젯을 붙여 위젯의 위치를 쉽게 변경하기 위해 사용한다.

 

1. Guideline

가이드라인(Guideline)은 수평/수직 모두 적용할 수 있다. 수평 가이드라인의 height는 0이고 width는 parent인 ConstraintLayout에 맞춰져있다. 수직 가이드라인의 width는 0이고 height는 parent인 ConstraintLayout에 맞춰진다.

 

2. Barrier

배리어(Barrier)는 복수의 위젯을 참조하여 가상의 장벽을 만든다. 배리어 제약이 지정된 위젯들은 위치가 변경될 때 배리어에 맞게 변경이 된다. 이 때 배리어에 가장 가까이 있는 위젯(the most extreme widget on the specified side)을 기준으로 장벽을 만든다.

 

3. Group

그룹(Group) 헬퍼를 통해 복수의 위젯을 그룹화하여 아래와 같이 visibility 속성을 동시에 제어할 수 있다.

 

Optimizer

Constraint Layout 1.1 버전부터는 레이아웃의 속도를 높이기 위해 최적화 방법을 제공한다.

ConstraintLayout 요소에 app:layout_optimizationLevel 태그를 추가하여 아래와 같이 최적화 레벨을 지정할 수 있다.

none : 최적화 사용 안 함
standard : 디폴트 레벨
direct : 고정된 요소에 연결된 제약 조건에 관련된 최적화
barrier : barrier 제약 조건 관련 최적화
chain : 체인 제약 조건 최적화 (아직 테스트 중인)
dimensions : dimensions 측정 최적화 (아직 테스트 중)

 

공식문서

developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout?hl=ko

 

ConstraintLayout  |  Android 개발자  |  Android Developers

ConstraintLayout Note: This library does not have Kotlin reference docs, but you can call the Java API from Kotlin source code. To learn more, see Kotlin's interop documentation. public class ConstraintLayout extends ViewGroup java.lang.Object    ↳ Vi

developer.android.com

 

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

 

ConstraintLayout으로 반응형 UI 빌드  |  Android 개발자  |  Android Developers

ConstraintLayout으로 반응형 UI 빌드   Android Jetpack의 구성요소 ConstraintLayout을 사용하면 플랫 뷰 계층 구조(중첩 뷰 그룹이 없음)로 크고 복잡한 레이아웃을 만들 수 있습니다. 동위 보기와 상위 레

developer.android.com

참고 자료

 

shinjekim.github.io/android/2019/08/07/Android-ConstraintLayout/

 

[Android] ConstraintLayout 톺아보기 (안드로이드 공식 문서 번역) · Challengist

[Android] ConstraintLayout 톺아보기 (안드로이드 공식 문서 번역) 07 Aug 2019 | ConstraintLayout ConstraintLayout 제약 레이아웃은 android.view.ViewGroup에 속한 레이아웃이며 위젯의 위치(position)와 크기(size)를 지정

shinjekim.github.io

 

medium.com/@futureofdev/android-constraintlayout-%EC%89%BD%EA%B2%8C-%EC%95%8C%EC%95%84%EA%B0%80%EC%9E%90-62d2ded79c17

 

Android ConstraintLayout 쉽게 알아가자

LinearLayout이나 RelativeLayout을 쓰다보면 ConstraintLayout을 왜쓰면 좋을지 궁금증을 가지게 됩니다. 저도 그랬고, 새로 학습해야해서 잠깐 미뤄뒀는데, 직접 써보니 이게 왠걸, 정말 재미있는 레이아웃

medium.com

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

 

안드로이드 ConstraintLayout 개념과 사용법 정복하기 - 개발자 직강

깔끔한 계층 구조를 만드는데 큰 도움이 되는 ConstraintLayout은 안드로이드가 2016년 Google I/O에서 선보인 유연한 뷰그룹입니다.

academy.realm.io

 

반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함