ConstraintLayout이란?

 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에서도 Margin 을 확인할 수 있습니다. 



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