[android] ConstraintLayout 화면 비율 유지하기

안드로이드 레이아웃을 만들 때 직접 너비, 높이 값을 설정하면 화면 크기에 따라 배치가 조금씩 달라질 수 있다!

이를 방지하기 위해서는 크기를 직접 설정하는 것이 아닌 비율로 크기를 설정하는 것이 좋은 것 같다.

그래서 자주 쓰는 ConstrainLayout의 화면 비율 유지하는 방법을 정리해 보려고 한다. 

 

ConstarintLayout 화면 비율 맞추는 방법 - Chain 이용 

수평 비율을 기준으로 정리했음!

 

[1:1:1 비율]

1. 비율을 맞출 View들을 배치한다.

2. layout_width 값을 0dp로 설정한다

android:layout_width="0dp"

3. Design에 들어가 비율을 맞추고자 하는 View들을 선택하고, 오른쪽 마우스 클릭 후 Chains를 선택한다
(horizontal, vertical - 설정해주기)

4. 상황에 맞게 margin 값과 padding 값으로 조금씩 수정해주면 된다.

 

[비율 변경 - 다음을 추가해주면 된다]

app:layout_constraintHorizontal_weight=""

 

[예시 - 아이디 찾기, 비밀번호 찾기, 회원가입 부분]

<TextView
        android:id="@+id/text_find_id"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1.5"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:layout_marginStart="60dp"
        android:background="@drawable/style_vertical_line"
        android:text="아이디 찾기"
        android:textColor="#515151"
        android:textSize="14dp"
        android:gravity="center"
        app:layout_constraintEnd_toStartOf="@+id/text_find_pw"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_sign_in"></TextView>

    <TextView
        android:id="@+id/text_find_pw"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="2"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:background="@drawable/style_vertical_line"
        android:text="비밀번호 찾기"
        android:textColor="#515151"
        android:textSize="14dp"
        android:gravity="center"
        app:layout_constraintEnd_toStartOf="@+id/text_sign_up"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/text_find_id"
        app:layout_constraintTop_toBottomOf="@+id/btn_sign_in"></TextView>

    <TextView
        android:id="@+id/text_sign_up"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1.5"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="60dp"
        android:text="회원가입"
        android:textColor="#515151"
        android:textSize="14dp"
        android:gravity="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/text_find_pw"
        app:layout_constraintTop_toBottomOf="@+id/btn_sign_in"></TextView>