[Android] Constraint Layout ChainStyle 사용하기

3줄 요약

1. ConstraintLayout의 상대적배치

2. ConstraintLayout의 ChainStyle를 이용한 뷰의 연결

3. ConstraintLayout의 bias를 사용한 가로축,세로축 기준점 이동.

◈◈◈◈

상대적배치

상대적인 배치는 RelativeLayout과 흡사하며 ConstraintLayout에 가장 기본적인 기능입니다. 이 기능은 View와 View간의 제약조건을 통해 위치를 결정짓게 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_2" />

    <TextView
        android:id="@+id/tv_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv_1"
        app:layout_constraintRight_toLeftOf="@+id/tv_3" />

    <TextView
        android:id="@+id/tv_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv_2"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

 

하나씩 알아 보겠습니다.

 

app:layout_constraint{Postion_1}_to{Postion_2}Of={"@id/View"};

 

여기서 Position_1은 해당 View의 기준점을 의미합니다. 즉, View의 기준점(상하좌우)을 의미합니다.

Position_2는 @id/View의 기준점을 의미합니다. 즉, @id/View의 기준점(상하좌우)을 의미합니다.

 

TextView3으로 예를 들자면, 

app:layout_constraintLeft_toRightOf="@+id/tv_2" 는 tv_3의 왼쪽은 @id/tv_2의 오른쪽으로 배치하겠다.

app:layout_constraintRight_toRightOf="parent" 는 tv_3의 오른쪽은 parent layout의 오른쪽으로 배치하겠다. 라는 의미입니다.

 

그러면

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

이게 무슨 의미일까요?

 

View의 Bottom과 Top을 parent layout의 Bottom과 Top으로 배치하겠다. 즉, Vertical = Center로 배치 하겠다는 의미입니다.

 

이외에도 많은 배치방법들을 제공합니다.

● layout_constraintLeft_toLeftOf

● 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

 

Chain

Chain은 뷰간의 상호 참조 연결을 할 때, 뷰들을 어떤 방식으로 연결 시킬 시켜 표현 할지를 결정 합니다.

app:layout_constraintHorizontal_chainStyle="spread"

app:layout_constraintHorizontal_chainStyle="spread_inside"

app:layout_constraintHorizontal_chainStyle="packed"

● CHAIN_SPREAD 뷰들을 골고루 펼쳐 여백을 같게 합니다(기본값)

● CHAIN_SPREAD_INSIDE CHAIN_SPREAD와 비슷하지만 가장 외곽에 있는 뷰들은 부모 뷰와 여백이 없는 상태로 골고루 펼쳐집니다.

● CHAIN_PACKED뷰들이 똘똘 뭉치게 되고 부모뷰로부터의 여백을 같게 합니다. 여백을 조정하고 싶다면 bias조정을 통해 한쪽으로 치우치게 만들 수 있습니다.

 

출처 : constraintlayout.com

Bias

bias: (constraint 영역 크기 - 뷰 크기) 를 분배하는 비율 

app:layout_constraintHorizontal_bias="0~1의 값"
app:layout_constraintVertical_bias="0~1의 값"

View들의 기준위치를 변경할 수 있습니다. 기본값은 0.5로 세팅되어있습니다.

0.5보다 작으면 왼쪽(위쪽)으로 분배되는 비율이 작아져 뷰가 왼쪽(위쪽)으로 이동하고,

0.5보다 크면 오른쪽(아래쪽)으로 분배되는 비율이 작아져 뷰가 오른쪽(아래쪽)으로 이동합니다.

참고 : realm.io