ConstraintLayout 이란?
- ConstraintLayout은 위젯을 유연한 방식으로 배치하고 크기를 조정할 수 있는 ViewGroup입니다.
- API level 9 (진저브레드)부터 Android 시스템에서 사용할 수 있는 라이브러리로 지원됩니다.
- 다양한 종류의 제약사항들을 사용할 수 있습니다.
( Relative positioning, Margins, Centering positioning, Circular positioning, Visibility behavior,
Dimension constraints, Chains, Virtual Helpers objects, Optimizer )
ConstraintLayout을 이용하여 버튼 B를 버튼 A의 오른쪽에 붙이는 경우를 살펴보겠습니다.
<Button android:id="@+id/buttonA" ... /> <Button android:id="@+id/buttonB" ... app:layout_constraintLeft_toRightOf="@+id/buttonA" />
즉, 버튼 B의 왼쪽이 버튼 A의 오른쪽에 위치하도록 제한한다고 할 수 있습니다.
이 외에도 다음과 같이 많은 기능이 있습니다. 하나하나 테스트해보시면 좋을 것 같습니다.
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_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
ConstraintLayout에서의 유용한 기능중 하나는 GONE 상태의 위젯에 연결될 때 다음과 같은 Margin을 설정할 수 있는 것입니다.
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
Centering positioning
<android.support.constraint.ConstraintLayout ...> <Button android:id="@+id/button" ... app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent/> </>
위와 같은 코드가 어떻게 동작할까요?
위의 그림처럼 위젯을 잡아 당기는 힘이 양쪽에서 똑같이 적용된다고 생각하면 됩니다.
즉, 위젯이 중앙에 위치하게 됩니다.
bias
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
</>
위와 같은 코드에서 아래의 코드 부분을 확인해 보겠습니다. 위 코드는 해당 버튼을 기존의 50%였던 중앙 대신 왼쪽으로 30% 치우치도록 배치하게 됩니다.
Circular positioning
ConstraintLayout은 위젯의 중심을 다른 위젯의 중심에 대해 각도와 거리로 제한 할 수 있습니다.
즉, 다음의 속성을 이용한다면 원 위에 위젯을 배치할 수 있습니다.
layout_constraintCircle
: 다른 위젯 ID를 참조합니다.layout_constraintCircleRadius
: 다른 위젯 센터까지의 거리layout_constraintCircleAngle
: 위젯이 어느 각도에 있어야하는지 (각도는 0에서 360까지)
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintCircle="@+id/buttonA"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45" />
Visibility behavior
ConstraintLayout은 GONE된 View를 처리할 수 있는 기능이 있습니다.
GONE위젯은 평소에 레이아웃 자체에 포함되지 않았습니다.
GONE 위젯의 크기는 0이며, 다른 위젯이 GONE 위젯에 제약조건을 걸었다면 GONE된 위젯의 마진은 0으로 처리됩니다.
이러한 기능은 애니메이션을 수행 할 때 유용하게 적용될 수 있습니다.
위의 그림과 같이 B가 A에 제약조건을 걸었던 경우에서 A가 GONE되면 A의 margin이 0이되면서 B의 마진은
B가 A에 걸었던 마진만 남게됩니다. 이 기능 ( 제약조건을 걸었던 위젯이 GONE되었을 떄 마진값을 주는 )은 GONE margin값을 이용합니다.
Widgets dimension constraints
ConstraintLayout에서는 3가지 방법으로 위젯의 크기를 지정할 수 있습니다.
1. 특정 크기를 지정 ( 192dp, @dimen/height 처럼 )
2. wrap_content 사용
3. 0dp
(a)는 wrap_content (b)는 0dp (c)는 0dp에서 margin 값을 준 경우입니다.
Percent dimension
퍼센트 디멘션을 사용하려면 다음과 같은 설정이 필요합니다.
1. MATCH_CONSTRAINT(0dp)로 설정
2. 기본값은 percent app:layout_constraintWidth_default="percent"
또는 app:layout_constraintHeight_default="percent
3. 마지막으로 layout_constraintWidth_percent 또는 layout_constraintHeight_percent 속성을 0~1 값으로 설정.
Chains
체인은 축 ( 수평 또는 수직 )에서 그룹과 같은 동작을 제공하는 기능입니다.
한 세트의 위젯이 양방향 연결되면 체인으로 간주됩니다.
체인은 체인의 첫번째 요소에 설정된 특성에 의해 제어됩니다.
참고 사이트 https://developer.android.com/reference/android/support/constraint/ConstraintLayout