ConstraintLayout - chain, bias

ConstraintLayout으로 레이아웃을 그릴때 다양한 방법이 있는데 Chain과 Bias위주로 살펴볼것이다

 

1. Chain

 

크게 이렇게 두개로 나눌수있다

- layout_constraintHorizontal_chainStyle : 수평 방향 체인 스타일 결정

- layout_constraintVertical_chainStyle : 수직 방향 체인 스타일 결정

 

체인은 spread / spread inside / packed 유형으로 나눌 수 있다. 

체인 헤드부분에만 체인속성을 적용하면 된다!

 

각 속성의 차이를 알아보자

 

 

 

# layout_constraintHorizontal_chainStyle = "spread"

-> 각각의 뷰를 균등하게 분산 

    android:id="@+id/google"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/google"
    android:layout_marginTop="30dp"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintEnd_toStartOf="@+id/facebook"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/facebook"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/facebook"
    android:layout_marginTop="30dp"
    android:layout_marginStart="15dp"
    app:layout_constraintEnd_toStartOf="@+id/apple"
    app:layout_constraintStart_toEndOf="@+id/google"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/apple"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/apple"
    android:layout_marginTop="30dp"
    android:layout_marginStart="15dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/facebook"
    app:layout_constraintTop_toTopOf="parent" />

 

 

 

 

 

# layout_constraintHorizontal_chainStyle = " spread_inside"

-> 첫번째와 마지막번째 뷰를 양쪽 끝 구속 조건에 붙여주고 나머지는 균등하게 분산 

<ImageView
    android:id="@+id/google"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/google"
    android:layout_marginTop="30dp"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintEnd_toStartOf="@+id/facebook"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/facebook"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/facebook"
    android:layout_marginTop="30dp"
    android:layout_marginStart="15dp"
    app:layout_constraintEnd_toStartOf="@+id/apple"
    app:layout_constraintStart_toEndOf="@+id/google"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/apple"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/apple"
    android:layout_marginTop="30dp"
    android:layout_marginStart="15dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/facebook"
    app:layout_constraintTop_toTopOf="parent" />

 

 

 

 

 

# layout_constraintHorizontal_chainStyle = "packed"

-> 모든 뷰를 함께 묶은 다음 사용가능한 공간내에서 중앙에 배치한다

(뷰 사이의 간격을 조금 주고싶다면 marginStart나 marginEnd값을 사용해서 띄여줄수있다)

<ImageView
    android:id="@+id/google"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/google"
    android:layout_marginTop="30dp"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintEnd_toStartOf="@+id/facebook"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/facebook"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/facebook"
    android:layout_marginTop="30dp"
    app:layout_constraintEnd_toStartOf="@+id/apple"
    app:layout_constraintStart_toEndOf="@+id/google"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/apple"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/apple"
    android:layout_marginTop="30dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/facebook"
    app:layout_constraintTop_toTopOf="parent" />

 

 

 

 

 

 

 

Chain은 체인 내 개별뷰에 Weight속성도 줄 수 있다!!!

 

각각 weight 속성을 2 / 0.5 / 0.5 만큼 줬다. 해당 숫자만큼 공간을 차지하게된다

그리고 주의할것이 weight속성을 줄 부분은 width를 0으로 지정해줘야 weight가 적용된다

<ImageView
    android:id="@+id/google"
    android:layout_width="0dp"
    android:layout_height="60dp"
    app:layout_constraintHorizontal_weight="2"
    android:src="@drawable/google"
    android:layout_marginTop="30dp"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintEnd_toStartOf="@+id/facebook"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/facebook"
    android:layout_width="0dp"
    android:layout_height="60dp"
    app:layout_constraintHorizontal_weight="0.5"
    android:src="@drawable/facebook"
    android:layout_marginTop="30dp"
    android:layout_marginStart="15dp"
    app:layout_constraintEnd_toStartOf="@+id/apple"
    app:layout_constraintStart_toEndOf="@+id/google"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/apple"
    android:layout_width="0dp"
    android:layout_height="60dp"
    app:layout_constraintHorizontal_weight="0.5"
    android:src="@drawable/apple"
    android:layout_marginTop="30dp"
    android:layout_marginStart="15dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/facebook"
    app:layout_constraintTop_toTopOf="parent" />

 

 

 

 

 

 

2. bias

뷰 위치를 비율에 맞게 조정하는 방식이다

 

- layout_constraintHorizontal_bias : 수평 방향(Left/Right 또는 Start/End) 사이드 제약 시, 양 사이드 간 위치 비율

- layout_constraintVertical_bias : 수직 방향(Top/Bottom) 사이드 제약 시, 양 사이드 간 위치 비율

 

0.1 /  0.65 등과 같은 소숫점들도 사용가능하다