안드로이드 - #2 ConstraintLayout

저번 포스팅에 이어서 ConstraintLayout의 제약사항의 종류에 대해서 알아보자

---

제약사항 종류

2) Margin 

이전 포스팅을 보면 ConstraintLayout은 상대적 위치를 정해줄 수 있다고 했다. 

 

A의 위젯을 기준으로 B의 위젯의 위치를 조절 할 수 있다.

아무런 마진값을 주지 않는다면 위의 이미지 처럼 A의 위젯과 B의 위젯은 붙어 있게 된다. 

 

하지만 이때 아래와 같은 속성 값을 이용하면

• android:layout_marginStart
• android:layout_marginEnd
• android:layout_marginLeft
• android:layout_marginTop
• android:layout_marginRight
• android:layout_marginBottom

A 위젯을 기준으로 특정 마진의 값만 큼 B의 위젯이 떨어져서 배치되게된다.

---

3) Centering positioning and bias

 

ConstraintLayout를 이용해 위젯을 배치할 때

start와 end // top과 bottom 제약사항을 선언했을 때  

 

위의 이미지 처럼 기본값으로 중앙에 배치 된다.

중앙정렬을 변경하기 위해서는 bias로 값을 조절해주면된다.

 

bias는 단어를 보면 "치우침" 이라는 뜻이 있다. 

이처럼 치우침의 정도를 start를 기준으로

 

0.5를 가운데

0.5 이하일 수록 start 쪽으로, 0.5 이상일수록 end 쪽으로 가까워진다.

* top/ bottom도 동일한 원리

 

사용방법은 아래와 같다.

• layout_constraintHorizontal_bias
• layout_constraintVertical_bias

<androidx.constraintlayout.widget.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintHorizontal_bias="0.3"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent"/>
         </>
         

위와 같은 코드를 작성하면 아래와 같이 위치가 변경된다.

---

4) Circular positioning

지난 포스팅에서 말했던 상대적배치는 상하좌우 밖에 없었다.

이번 제약사항은 상하좌우를 벗어나서 원형으로 위젯을 배치할수 있다.

 

사용법은 아래와 같다

• layout_constraintCircle : references another widget id
• layout_constraintCircleRadius : the distance to the other widget center
• layout_constraintCircleAngle : which angle the widget should be at (in degrees, from 0 to 360)

기준이 되는 위젯의 id를 입력하기 위해 layout_constraintCircle 사용

기준이 되는 위젯으로 부터 떨어지는 거리를 위해 constraintCircleRadius 사용

각도는 CircleAngle 사용한다. 

 

아래의 코드를 사용하면 아래의 그림처럼 배치된다.

<Button android:id="@+id/buttonA" ... />
  <Button android:id="@+id/buttonB" ...
      app:layout_constraintCircle="@+id/buttonA"
      app:layout_constraintCircleRadius="100dp"
      app:layout_constraintCircleAngle="45" /