[안드로이드 앱 만들기 기초] ConstraintLayout(컨스트레인트 레이아웃) 사용법, 속성

ConstraintLayout사용법과 속성

레이아웃(Layout)의 종류 중 하나인 ConstraintLayout에 대해 더 자세히 알아 보겠습니다.

 

ConstraintLayout(컨스트레인트 레이아웃)

Constraint(제약, 제한, 조건)Layout은 뷰에 여러 조건을 주어 위치를 지정해 줍니다. 컨스트레인트레이아웃에서 조건을 정해주는 속성을 입력 해주지 않으면 위치를 잡지 못하고 에러가 뜹니다.

속성
layout_constraint[위치1]_to[위치2]Of="[대상]" - 지정 할 뷰의 [위치1]을 [대상]의 [위치2]에 지정합니다. 위치에 들어갈 코드는 Right, Left, Top, Bottom, Baseline, Start, End가 있습니다.
layout_constraintCircle="대상" - 원을 만들 대상을 정합니다.
layout_constraintCircleRadius="숫자" - 원의 크기를 정합니다.
layout_constraintCircleAngle="0~360" - 원에서 위치가 될 각도를 지정합니다.

컨스트레인트 레이아웃은 조건, 제약을 줘야하는 만큼 설정 할 것도 많지만 더 자세히 위치를 지정 할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/t1"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:text="TextView1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="#ff9966"
        />
    <TextView
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:text="TextView2"
        app:layout_constraintCircle="@+id/t1"
        app:layout_constraintCircleRadius="150dp"
        app:layout_constraintCircleAngle="140"
        android:background="#66ffcc"
        />
    <TextView
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:text="TextView3"
        app:layout_constraintCircle="@+id/t1"
        app:layout_constraintCircleRadius="150dp"
        app:layout_constraintCircleAngle="190"
        android:background="#99ff00"
        />
    <TextView
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:text="TextView4"
        app:layout_constraintLeft_toRightOf="@id/t1"
        app:layout_constraintTop_toTopOf="@id/t1"
        android:background="#cc00ff"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

TextView1에서 뷰의 상하좌우를 parent(부모)로 지정하면 가운데로 정렬 시킬 수 있습니다.
TextView2는 TextView1을 중심으로 원을 만들어 150dp 멀어진 140도 부근에 위치합니다.
TextView3는 TextView1을 중심으로 원을 만들어 150dp 멀어진 190도 부근에 위치합니다.
TextView4는 위쪽을 TextView1의 위쪽으로 왼쪽을 TextView1의 오른쪽으로 지정합니다.

컨스트레인트 레이아웃으로 간단한 게임을 구현하기도 하고 아날로그 시계를 만들기도 합니다.

 

더 자세한 설명은 개발자 페이지에서 확인 가능합니다.

ConstraintLayout  |  Android 개발자  |  Android Developers

ConstraintLayout  |  Android 개발자  |  Android Developers

 

레이아웃 속성모음 보러 가기
[안드로이드 앱 만들기 기초] Layout(레이아웃) 속성, 사용법 모음 (tistory.com)

[안드로이드 앱 만들기 기초] Layout(레이아웃) 속성, 사용법 모음