ConstraintLayout에서 비율 조절(같은 비율로 버튼만드는 예시)

안녕하세요 오늘 프로젝트를 짜면서 적용하는 ConstraintLayout에서 어떻게 하면 비율을 맞춰서 할 수 있을까? 세로로 1/3 크기로 똑같은 버튼을 작성하는 방법을 알아보았습니다.

 

글의 특성상 PC에서 보셔야 더 편하게 이해할 수 있습니다.

 

[완료]

Constraint Layout에서의 버튼 크기 조정

 

[코드]

<?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"
    tools:context=".ui.alpha.TTSTestActivity">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnPlay"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="play"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/btnWait"
        app:layout_constraintHorizontal_weight="0.3"
        />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnWait"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="wait"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/btnPlay"
        app:layout_constraintRight_toLeftOf="@id/btnStop"
        app:layout_constraintHorizontal_weight="0.3"/>

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnStop"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="stop"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/btnWait"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="0.3"
        app:layout_constraintHorizontal_chainStyle="spread"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

[포인트]

포인트는 딱 3가지입니다.

 

1. layout_width 는 0dp

2. 왼쪽과 오른쪽을 정확하게 명시해줍니다.  

2-1 코드에 대한 부연 설명 

부모는 ConstraintLayout을 의미합니다. 

아이디	xml 속성	속성 값	설명
btnPlay	layout_constraintLeft_toLeftOf	parent	맨 왼쪽 버튼의 왼쪽은 부모이다.
btnPlay	layout_constraintRight_toLeftOf	@id/btnWait	맨 왼쪽 버튼의 오른쪽은 btnWait라는 아이디가 붙은 버튼이다.
btnWait	layout_constraintLeft_toRightOf	@id/btnPlay	가운데 버튼의 왼쪽은 btnPlay라는 아이디가 붙은 버튼입니다.
btnWait	layout_constraintRight_toLeftOf	@id/btnStop	가운데 버튼의 오른쪽은 btnStop라는 아이디가 붙은 버튼입니다.
btnStop	layout_constraintLeft_toRightOf	@id/btnWait	맨 오른쪽 버튼의 왼쪽은 btnWait라는 아이디가 붙은 버튼의 오른쪽이다.
btnStop	layout_constraintRight_toRightOf	parent	맨 오른쪽 버튼의 오른쪽은 부모이다.

2-2 상식적으로 생각해보면 왼쪽과 오른쪽이 명확해야 Chain이라는 생각이 듭니다. 

3. 비율은 0.3으로 동일하게 적용한다.

( 예를 들어 다른 비율로 적용하고 싶다면, 2:3:5 라면 0.2,0.3,0.5로 적용합니다.)

 

개발자 문서에서 의도된 #WeightedChain 을 의도해서 코드를 사용했습니다. 

 

자세한 건  안드로이드 개발자 문서를 참조해주세요. 다른 블로거들이 직역한 것도 많으니 비교해보세요 :D 

 

즐코! 

https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout