[ Android ] Constraint layout

Costraint Layout을 사용하면 내포된 view group 없이 평면 뷰 계층 구조로 크고 복잡한 레이아웃을 만들 수 있습니다. 모든 view가 형제 뷰와 부모 레이아웃 간의 관계로 표현된다는 점에서 Relative layout과 유사하지만 Relative layout보다 유연하며 사용하기 쉽습니다.

Constraint Layout으로 거의 모든 레이아웃을 만들 수 있지만, 15개 미만의 적은 요소를 배열하거나 하나의 복잡한 layout에 여러 개의 view group을 배열하는 경우에 가장 적합합니다. 만약 view의 좌표를 지정하지 않는다면 view는 parent view의 top-left를 기준으로 ( 0,0 ) 위치에 나타날 것입니다. 

 

 Constraint Layout을 사용하는 이유

1. 다양한 비율과 해상도를 지원하는 반응형 UI로 만들 수 있습니다.
2. 일반적으로 평평한 view 계층입니다. ( view 계층이 깊어지는 경우가 적습니다. )
3. 뷰 배치를 최적화 할 수 있습니다.
4. view를 원하는 위치 어디든 위치시킬 수 있고 에디터가 제약조건을 추가하는 것을 도와줍니다.

 

 Constraint Layout 사용하기

Build a Responsive UI with Constraint Layout
ConstraintLayout

▶ Add or Remove a constraint

화살표는 제약조건을 나타내고 해당 view의 parent view와 연결합니다.

1. 제약 조건 생성 / 2. 제약 조건 제거 ( 출처 : https://developer.android.com/training/constraint-layout )

제약 조건을 제거하면 parent view의 top에 가서 붙습니다. 왜냐하면 bottom에 대한 제약 조건이 없기 때문에 top에 대한 제약 조건으로 위치를 결정하기 때문입니다.

▶ view inspector

출처 : https://developer.android.com/training/constraint-layout

 1  : ratio를 보여준다.

 3  constraint : 해당 view의 parent view와 연결하고 제약조건을 나타냅니다. 제약조건에는 3가지 종류(Fixed, Wrap Content, Match Constraints)가 있습니다. 많은 제약 조건이 있는 view가 있는 경우, Android system은 레이아웃을 만들기 위해 이러한 모든 제약 조건을 충족시키기 위한 작업을 수행합니다. 

일치하는 종류의 제약 조건이 많을수록 레이아웃의 다양한 화면 크기와 방향에 더 많이 적응할 수 있기 때문에 앱에 필요한 레이아웃이 적습니다.

	Fixed : editor에서 구체적으로 명시한 값으로 크기를 조정하고 위치를 지정합니다.
	Wrap Content : view가 content에 필요한만큼 알아서 확장됩니다.
	Match Constraints : view가 각 측면의 제약 조건에 맞추어 가능한 크게 확장됩니다. constraint layout에서는 match_parent 를 사용할 수 없습니다. 대신에 0dp와 match constraints를 사용해야 합니다.

 

 5  bias : 수평/수직의 위치를 결정

▶ Set Default with controller

출처 : https://developer.android.com/training/constraint-layout#adjust-the-view-margins

•  파란 박스 ( 자석 모양)  : 자동으로 제약 조건 추가하는 기능 ( 해당 사진은 trun off 되어 있음 )
•  빨간 박스 ( 16dp )  : default margin 설정하기
  1. 새로운 view가 생성되면 자동으로 default margin이 추가되므로 우리가 수동으로 추가할 필요가 없습니다.
  2. parent view에 대한 가이드라인을 얻을 수 있어서 view를 정렬하는데 도움이 됩니다.

---

찰스의 안드로이드 - Constraint Layout1 에 보면
Relative Positioning / Margin / bias / centering positioning / Circular positionting / Visibility behavior / Dimension constraints 등 아래에서 다루지 않은 다양한 기능에 대해 자세히 설명되어 있어서 참고하기 좋습니다.
찰스의 안드로이드 - Constraint Layout2 : Guidline / Barrier / Group / Placeholder
ConstraintLayout 톺아보기 포스트

 지금은 Constraint layout 시대 ppt를 참조하였습니다.

▶ Relative Positioning ( 상대적 배치 )

RelativeLayout과 흡사한 Constraint layout에서 가장 기초적인 개념입니다. 대상 view의 위치를 지정할 때, 다른 view으로부터 상대적인 위치를 지정하는 것입니다. 

• 가로축 상의 배치 : left, right, start, end 속성 ( start/end 속성과 left/right 속성은 유사하지만 start/end 속성이 left/right 속성보다 우선시 됩니다. )
• 세로축 상의 배치 : top, bottom 속성 and text baseline

많은 국가에서 LTR(Left to Right) 언어를 사용하지만 아랍 등의 특정 국가에서는 RTL(Right to Left)언어를 사용하기 때문에 모든 국가에 적용되는 layout을 만들기 위해서는 left/rigth 보다는 start/end 속성을 사용하는 것이 바람직합니다. LTR 언어에서는 start가 left, RTL 언어에서는 start가 right를 의미합니다.

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

▶ Ratio

각 기기에서 크기를 하드코딩할 필요 없이 구할 수 있으므로 adaptive layouts을 만들기에 좋습니다. 따라서 화면 방향이나 크기가 변경되더라도 모양과 방향 비율을 유지해야 하는 view가 있는 레이아웃을 만들 때 유용합니다.

▷ Ratio를 이용하여 정사각형을 만들어보자!

1. layout_width와 layout_height 중 최소 1개는 0dp(MATCH_CONSTRAINT)로 지정해야 합니다. ( 0dp로 설정하는 것은 계산되어야 한다는 시그널 입니다. )
2. layout_constraintDimensionRatio를 이용하여 width 와 height에 대한 비유을 지정해야 합니다.

<Button ...
	android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="1:1" />

ratio를 표현하는 방법에는 아래와 같은 2가지 방법이 있습니다.

1. 비율로 표현하는 방법 ( width : height )
2. float 값으로 표현하는 방법 ( float 값이 width와 height의 비율을 표현한다. 가로 / 세로 )

위의 예제에서는 layout_height 하나만 0dp로 지정했지만 width와 height 모두 MATCH_CONSTRAINT(0dp)로 지정되어 있어도 ratio를 지정할 수 있습니다. 이 경우 시스템은 모든 제약 조건을 충족하는 가장 큰 dimensions를 설정하고 지정된 가로 세율 비율을 유지합니다. 하지만 H, W 중 하나를 선택하여 어떤 쪽에 제약을 줄 것인지를 지정할 수도 있습니다. 이 때, width와 height를 모두 0dp로 지정되어 있기 때문에 top/bottom, start/end 제약이 걸려있어야 테스트 할 수 있습니다. 

// width를 constraint에 맞춰 설정한 뒤 비율에 따라 height를 결정합니다.
// width가 먼저 parent view에 맞춰 설정되고 height가 이를 기준으로 설정됩니다. 
// 따라서 view과 화면을 벗어나는 크기로 만들어질 수도 있습니다.
app:layout_constraintDimensionRatio = "H, x:y"

// height를 constraint에 맞춰 설정한 뒤 비율에 따라 width를 결정합니다.
app:layout_constraintDimensionRatio = "W, x:y"

▶ Chains

수평 또는 수직으로 view를 연결하여 그룹으로 동작하게 만드는 기능입니다. Chains는 chain의 head의 속성에 의해 제어됩니다. 

▷ chain style 지정 방법

chain head에 style을 지정하면 연결된 모든 view에 적용됩니다. packed, spared, spared_inside는 아래의 속성으로 style을 지정합니다. 다만 weighted의 경우 packed, spraed, spread_inside와 달리 layout_constraintHorizontal_weight / layout_constraintVertical_weight 속성으로 비율을 지정합니다. 

app:layout_constraintHorizontal_chianStyle="packed"
app:layout_constraintVertical_chainStyle="spread"

chain의 기본적인 동작은 가능한 공간에 동일한 크기로 뿌리는 것입니다. weight와 bias를 조정하여 요소들이 정렬되는 방법을 제어할 수 있습니다. 

출처 : https://developer.android.com/reference/android/support/constraint/ConstraintLayout#chain-style

• Spread Chain : 요소(view)를 가능한 공간에 동일한 여백을 같게 뿌리는 것입니다. (default)
• Spread Inside Chain : Spread chaing과 유사하지만 head와 tail 요소를 parent view에 붙입니다. ( chain의 안쪽으로만 간격을 두어 분산시킵니다. )
• Weighted Chain : 모든 공간을 사용하고 각 요소로 공간을 꽉 채웁니다.
• Packed Chain : 각 요소를 묶어 최소한의 공간만 사용합니다.
• Packed Chain With Bias : Packed Chain에서 bias를 조정하여 특정 방향으로 치우치게 만들 수 있습니다.