안녕하세요. 오늘도 Constraint Layout에 대해서 알려드릴 건데요. 이번에는 속성을 통해 부모의 크기에 비례하여 위젯의 크기가 조정되는 Height, Width Percent 속성에 대해 알아보겠습니다. 그럼 바로 시작하도록 하죠.
1. Percent 속성은 무엇일까?
보통 앱을 제작할 때는 width, height 속성에 구체적인 수치(dp)를 넣어 위젯의 크기를 결정합니다. 하지만 이 경우 태블릿처럼 화면이 큰 기기에서는 기기 크기에 비해 위젯이 너무 작아 보이는 문제가 발생할 수 있습니다.
이런 상황을 방지하기 위해 위젯의 크기가 화면 크기에 맞게 유동적으로 변화하도록 돕는 속성이 바로 Percent 속성입니다. 너비는 고정하고 높이만 변화시키거나, 그 반대의 경우도 가능하여 다양한 해상도에 대응할 때 유용하게 사용할 수 있습니다.
2. 사용법
| 속성 이름 | 기능 |
|---|---|
| layout_constraintHeight_percent | 높이 길이를 부모에 비례해 설정 |
| layout_constraintWidth_percent | 너비 길이를 부모에 비례해 설정 |
속성 값은 소수점을 사용하여 입력합니다. 예를 들어 30%는 0.3, 50%는 0.5로 기입합니다. 실제 사용 예시는 다음과 같습니다.
activity_main.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"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/button_design"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHeight_percent="0.9"
app:layout_constraintWidth_percent="0.9" />
</androidx.constraintlayout.widget.ConstraintLayout>
위의 왼쪽 사진은 예시 코드를 사용하여 만들어낸 레이아웃의 프리뷰입니다. 화면 크기에 맞추어 위젯 크기가 변화한 것을 확인할 수 있습니다. (코드 상에서는 Constraint Layout을 사용했습니다.)
두 번째 사진은 위와 같이 작성된 Constraint Layout 안에 해당 코드를 반복해서 중첩해 본 모습입니다. 이 속성은 전체 화면 크기가 아니라 ‘부모’의 크기에 비례하기 때문에, 사각형 안에 더 작은 사각형이 계속해서 생기는 형태로 구성됩니다.
오늘은 Constraint Layout의 퍼센트 속성에 대해서 알아보았습니다. 화면 크기에 따라 유동적으로 변해야 하는 위젯에 적용하기 매우 좋은 속성입니다. 저 역시 실무에서 상당히 자주 활용하고 있습니다.
다음 포스팅에서는 지금까지 배운 레이아웃 지식들을 활용하여 간단한 타이머를 만들어 보겠습니다. 디자인보다는 기능과 레이아웃 구성에 집중해 보는 시간을 갖도록 하죠. 그럼 다음 시간에 뵙겠습니다. 감사합니다.
다른 글 읽기
- [안드로이드 스튜디오]Constraint Layout 기본 사용법[1] – 위젯 관계 설정
- [안드로이드 스튜디오]버튼, 클릭 이벤트 기본 사용법 – 클릭 이벤트[Button][1]
이 글의 저작권은 전적으로 작성자인 P_Emblem에게 있으며 허락 없는 사용을 금합니다.