[안드로이드] Constraint Layout의 chain weight(비율) 설정 View 배치 방법

안드로이드 레이아웃 개발 시,

ConstraintLayout 에서 Button이나 TextView를 일렬로 배치하면서 비율별로 너비나 높이를 주고 싶을 때가 있다.

 

각 뷰들을 chain으로 묶어주고, 비율별로 weight를 설행해 주면 된다.

 

이 글에서는 Constraint Layout에서 뷰들을

1) 동일한 비율, 2) 다른 비율로 수평/수직 배치하는 방법을 정리한다.

---

# 동일한 비율로 뷰를 배치하는 방법

 

1. 뷰(Button 등)을 여러개 배치한다.

 

2. chain을 걸어준다(horizontal | vertical)

- Design 모드에서 뷰 여러개를 동시에 선택 >  마우스 우클릭 > chain > create horizontal | vertical chaiin 클릭

- 코드에서는 각 뷰들이 서로를 참조하도록 제약을 추가해주면 된다

 

3. 각 뷰의 width를 0dp(Match Constraint)로 설정해준다.

- 코드에서는 android:layout_width = 0 으로 설정하면 된다.

 

- 레이아웃.XML 파일 코드 전문

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="1"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:backgroundTint="#4CAF50"
        android:text="1"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:backgroundTint="#FF9800"
        android:text="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button2"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

* 그외 제약이나 마진 등은 상황에 맞게 설정하면 된다.

 

---

# 다른 비율로 수평/수직 배치하는 방법

 

위와 동일하게 1~3번까지 진행

 

4. 각 뷰에  app:layout_constraintHorizontal_weight  값을 설정해준다.(수평)

- 수직으로 비율을 주는 경우엔 app:layout_constraintVertical_weight 값을 설정해주면 된다.

 

- 코드 전문

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="2"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:backgroundTint="#4CAF50"
        android:text="5"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_weight="5"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:backgroundTint="#FF9800"
        android:text="3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintStart_toEndOf="@+id/button2"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

---

# 정리: Constraint Layout의 뷰 배치 비율(비중) 조정 방법

1. 각 뷰에 chian을 걸어주고

2. android:layout_width = 0으로 주고,

3. app:layout_constraintHorizontal_weight에 각각 비율을 넣어주면 된다.

 

수직으로 배치할땐 vertical로 하면 된다.

---

app:layout_constraintHorizontal_chainStyle 값으로 weighted_chain을 넣어주면 된다는 것 같기도 한데,

지금은 없어졌는지 찾을 수가 없었다