안드로이드 ConstraintLayout Chains 종류와 사용방법!

공감 및 댓글은 포스팅 하는데  아주아주 큰 힘이 됩니다!! 포스팅 내용이 찾아주신 분들께  도움이 되길 바라며 더 깔끔하고 좋은 포스팅을  만들어 나가겠습니다^^

ConstraintLayout 사용법 마지막 포스팅입니다.

Chains 에 대해 공부합니다.

Chains : 체인은 단일축에서 (가로축 또는 세로축) 위젯들이 그룹처럼 

동작할 수 있도록 해줍니다. 

다른 축은 독립적으로 제약조건을 가질 수 있습니다.

체인 생성하기 : 체인은 최소 두 개의 위젯이 서로 연결되어 있으면 체인으로 간주됩니다.

ex) 아래 위젯들은 서로 연결되어 있으므로 체인으로 간주됩니다.

<Button
    android:id="@+id/btnA"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="AAA"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintEnd_toStartOf="@id/btnB"
    app:layout_constraintHorizontal_weight="1"/>

<Button
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintHorizontal_weight="1"
    android:id="@+id/btnB"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="BBB"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toEndOf="@+id/btnA" />

---

---

체인의 머리 : 체인의 가장 왼쪽에(가로 축일 경우),

 또는 

가장 위쪽에(세로 축일 경우) 있는 위젯이 체인의 머리가 됩니다.

체인에서 여백 (Margins in Chains) : 체인에서 여백은

Chain 의 Style에 따라 달라집니다.

체인에는 3가지 Style 이 존재하는데요.

위 코드에서처럼 layout_constraintHorizontal_chainStyle="spread"

으로 지정할 수 있습니다.

spread : Style을 지정하지 않을 경우 기본값이 됩니다.

spread_inside

packed

공식문서에서는 아래처럼 설명해주고 있는데요.

• CHAIN_SPREAD -- the elements will be spread out (default style)
• Weighted chain -- in CHAIN_SPREAD mode, if some widgets are set to MATCH_CONSTRAINT, they will split the available space
• CHAIN_SPREAD_INSIDE -- similar, but the endpoints of the chain will not be spread out
• CHAIN_PACKED -- the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements

실습을 해보시면 이해하기 쉬우실 것 같습니다.

글로 그냥 설명을 보는 것 보다

그리고 체인들 중에 저는 Weighted Chain 에 대해서 자세히 알아보려고 합니다.

---

---

Weighted Chain 뭔가 익숙한 단어가 보이지 않나요??

LinearLayout 에서 가중치를 줘 디바이스마다 같은 크기로 나오도록 할 때

weightSum, layout_weight 를 사용했었죠?

Weighted Chain 도 같은 역할을 합니다.

예제) 3개의 버튼이 있고, 이 버튼들이 디바이스의 가로 사이즈를 동등하게 3등분하여

나눠 가질려는 경우

<Button
    android:id="@+id/btnA"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="AAA"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toStartOf="@id/btnB"
    app:layout_constraintHorizontal_weight="1"/>

<Button
    app:layout_constraintHorizontal_weight="1"
    android:id="@+id/btnB"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="BBB"
    app:layout_constraintEnd_toStartOf="@id/btnC"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toEndOf="@+id/btnA" />
<Button
    app:layout_constraintHorizontal_weight="1"
    android:id="@+id/btnC"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="CCC"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toEndOf="@+id/btnB" />

위 코드를 보면 먼저 버튼A는 시작과 위가 부모 레이아웃이랑 연결되어 있고,

끝이 버튼 B의 시작과 연결되어 있습니다. 이로써 버튼 A 와 버튼 B는 체인이 되었습니다.

그리고 버튼 B의 끝과 버튼C의 시작이 연결되어 있죠? 이로써 버튼 B와 버튼 C도 체인이

되어서 버튼 ABC는 연결된 체인이 되었습니다. 하지만 이렇게만 하면, 부모 레이아웃에 맞춰

가로 크기를 3등분으로 나눠 가질 수 없어요.

버튼C의 끝과 위가 부모레이아웃과 연결되어 있어야 하죠.

별로 어렵지 않죠?

이상입니다.

궁금한 점은 댓글을 달아주시고,

제가 글을 잘 못쓰는 관계로, 제가 올린 포스팅들이 이해가 안되시는 분들은

https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html

공식문서로 가셔서 공부해보시면 되겠습니다.

감사합니다~

알통몬에게 프로틴 충전해주기