안드로이드의 xml에서는 ConstraintLayout이랑 RecyclerView, LinearLayout만 잘 다룰줄 알면 간단한 뷰는 거의다 구현 할 수 있다.
ConstraintLayout은 뷰들간의 제약을 걸어 체인 형태로 묶어주어 간단하게 뷰의 위치를 제어할 수 있는 장점을 갖고있다.
오늘은 그 중에서 ChainStyle에 대해 학습해 보도록 하자.
자식 뷰들의 체인스타일을 수직으로 할지 수평으로 할지 먼저 정한다.
layout_constraintHorizontal_chainStyle //체인 스타일을 수평으로 설정
layout_constraintVertical_chainStyle //체인 스타일을 수직으로 설정
수직으로할지 수평으로 할지 정했으면 ChainStyle을 설정해주면 되는데
ChainStyle에는 3가지가 있다.
1. packed (가운데로 합쳐짐)
2. spread (균등하게 배분)
3. spread_inside (양 끝 고정 후 남은 공간에 대해 균등하게 배분)
우선 imageView3개를 박스 형태로 뷰들간에 연결을 해주고 chainStyle을 적용하지 않은 상태에서 보자.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/box1"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/box2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/box2"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#894753"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/box3"
app:layout_constraintStart_toEndOf="@+id/box1"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/box3"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#385203"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/box2"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
ChainStyle이 적용 되지 않은 상태
chainStyle을 적용하지 않고 뷰들간에 동일한 체인을 걸어 화면의 정중앙에 동일한 간격을 갖고 배치된것을 볼 수 있다.
ChainStyle을 적용한 상태
왼쪽 순서대로 packed, spread, spread_inside로 설정을 했는데 chainStyle은 가장 왼쪽 뷰(Horizontal_chainStyle일 때) 또는 위쪽뷰(Vertical_chainStyle일 때)에 설정해주어야 지정된다.
packed (가운데로 합쳐짐)
체인이 연결된 가장 바깥쪽 끝 뷰를 기준으로 가운데로 뭉친 다음 뷰들 간의 간격을 지정해주는 방식이다.
spread (균등하게 배분)
가장 바깥쪽 뷰를 기준으로 정렬한 후 뷰들 간의 사이가 동일하게 간격을 나누는 방식이다.
spread_inside (양 끝 고정 후 남은 공간에 대해 균등하게 배분)
가장 바깥쪽 뷰를 부모뷰에 고정 시킨 다음 나머지 공간에 대해서 여백을 동일하게 나누는 방식이다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/box1"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@color/black"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/box2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/box2"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#894753"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/box3"
app:layout_constraintStart_toEndOf="@+id/box1"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/box3"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#385203"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/box2"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout> 
