[안드로이드 스튜디오]Constraint Layout 기본 사용법[2] –Percent 크기(Height, Width Percent) 설정

메인이미지

안녕하세요.

오늘도 Constraint Layout에 대해서 알려드릴 건데요.

이번에는 속성을 통해서 부모의 크기에 비례해 위젯의 크기가 조정되는 Height, Width 속성에 대해서 알려드리려고 합니다.

그럼 바로 시작하도록 하죠.

1. Percent 속성은 무엇일까?

보통 앱을 제작할 때는 width, height 속성에 값을 넣어서 위젯의 크기를 결정하게 됩니다.

하지만 그럴 경우 테블릿 등과 같이 화면 크기가 큰 기기에서 기기 크기에 비해 위젯의 크기가 너무 작은 경우가 나타나겠죠.

그런 경우를 방지하기 위해서 위젯의 크기가 화면 크기에 맞게 변화하도록 도와주는 속성이 바로 Percent 속성입니다.

너비는 고정시키고 높이만 변화하거나 그 반대 또한 가능해서 여러 곳에 적용시켜줄 수 있습니다.

그럼 바로 어떻게 사용할 수 있는지 알아보도록 해요.

2. 사용법

속성 이름	기능
layout_constraintHeight_percent	높이 길이를 부모에 비례해 설정
layout_constraintWidth_percent	너비 길이를 부모에 비례해 설정

속성 값은 소수점을 사용하여 입력해줍니다.

Ex)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"//값이 반드시 0이어야함
        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"//부모 높이의 90% 크기로 높이 설정
        app:layout_constraintWidth_percent="0.9"//부모 너비의 90% 크기로 너비 설정
        />

</androidx.constraintlayout.widget.ConstraintLayout>

만들어낸 레이아웃들

가장 왼쪽의 사진이 위 코드를 사용하여 만들어낸 레이아웃의 프리뷰입니다.

화면 크기에 맞추어 위젯 크기가 변화한 것을 보실 수 있죠.

(코드 상에서는 Constraint Layout을 사용했지만요.)

 

두번째 사진은 위 코드처럼 작성된 Constraint Layout안에 해당 코드를 계속 붙여 넣어 만든 모습입니다.

화면 크기에 비례하는 것이 아니라 부모의 크기에 비례하기 때문에 사각형 안에 더 작은 사각형이 반복되어 생기는 형태로 만들어 진 것이죠.

---

이렇게 오늘은 Constraint Layout의 퍼센트 속성에 대해서 알아보았는데요.

화면크기에 따라 변해야 하는 위젯에 적용하기 좋은 속성으로 저는 생각보다 많은 곳에 사용하고 있는 것 같네요.

다음에 알려드릴 것은 기존에 알려드린 것들을 이용해서 간단한 타이머를 만들어볼 겁니다.

디자인은 크게 신경 쓰지 않고 만들어보는 시간을 가져보도록 하죠.

그럼 다음에 위의 내용으로 다시 찾아오겠습니다.

감사합니다.

---

이전글 읽기

[안드로이드 스튜디오]Constraint Layout 기본 사용법[1] – 위젯 관계 설정

이전글 읽기

[안드로이드 스튜디오]버튼, 클릭 이벤트 기본 사용법 – 클릭 이벤트[Button][1]

---

이 글의 저작권은 전적으로 작성자인 P_Emblem에게 있으며
허락없는 사용을 금합니다.