안드로이드 스튜디오 제약 레이아웃(ConstraintLayout)

제약 레이아웃은 안드로이드 스튜디오의 기본 레이아웃입니다.

제약 레이아웃의 가장 큰 특징은 뷰의 크기와 위치를 결정할 때 제약 조건(Constraint)을 사용한다는 것입니다.

제약 조건이란 뷰가 레이아웃 안의 다른 요소와 어떻게 연결되는지 알려주는 것으로, 뷰의 연결점(Anchor Point)과 대상(Target)을 연결합니다.

 

1. 제약 조건 걸기

 

제약 레이아웃에서 버튼을 생성하면 다음과 같이 위, 아래, 왼쪽, 오른쪽에 동그라미로 표시된 연결점을 확인할 수 있습니다. 연결점은 핸들(Side Constraint Handle)이라고도 불리며 마우스 커서로 잡아서 조절할 수 있습니다.

 

위와 같이 위로 잡아당기면 부모 레이아웃이 타깃이 되어 부모 레이아웃의 위쪽 벽면과 연결이 됩니다. 연결점과 타깃이 연결되면 연결선이 만들어지고 연결점은 파랗게 표시됩니다.

 

버튼을 화면 가운데에 배치하려면 위, 아래, 왼쪽, 오른쪽 연결점을 모두 화면의 네 벽면에 연결하면 됩니다.

(자석 아이콘(Autoconnect)이 활성화 되어있다면 첫 요소는 기본적으로 중앙에 옵니다.)

 

2. 바이어스(Bias) 설정하기

 

Attributes의 Constraint Widget을 보시면 동그라미 안에 숫자 50이 들어있는 것을 확인할 수 있는데 이는 화면에서 얼마나 치우쳐 있는지 알 수 있는 바이어스(Bias)라는 것입니다. 바이어스를 위 사진과 같이 70만큼 오른쪽으로 바꿔주시면 70%만큼 오른쪽으로 치우치게 되는 것입니다.

 

3. 뷰의 크기 설정하기

뷰의 크기를 바꾸려면 뷰의 모서리(파란색 네모)를 끌어당기면 됩니다. 

 

그러면 꺾은선에서

 

 

 

 

 

 

직선으로 바뀐 것을 확인할 수 있습니다.

layout_width와 layout_height에 따라 이 모양이 바뀌는 것입니다.

꺾은선은 wrap_content,

직선은 크기 지정,

 

 

 

 

match constraint인 0dp로 설정해 주시면 구불구불한 선이 됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 가이드라인(Guideline) 사용하기

가이드라인은 여러 개의 뷰를 일정한 기준 선에 정렬할 때 사용합니다.

 

Add Horizontal Guideline을 추가하면

 

가로로 점선이 생긴 것을 확인할 수 있습니다.

 

가이드라인을 100dp만큼 움직이고 

 

버튼의 연결점을 가이드라인에 맞추면 화면의 위에서 100만큼 떨어진 곳에서 화면의 중앙에 버튼이 위치하게 됩니다.

 

그리고 버튼을 3개로 추가하고 아래쪽 제약 조건을 없애면 위 사진과 같이 화면에서 100dp 만큼 떨어진 거리에서 버튼을 정렬할 수 있습니다.

 

4. xml 코드 확인하기

보통은 디자이너 도구의 화면보다는 Text 탭을 눌러서 원본 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.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="100dp" />
    
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onButton1Clicked"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintStart_toEndOf="@+id/button2"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

<?xml version="1.0" encoding="utf-8"?>

가장 위쪽에 있는 코드는 XML 파일에 일반적으로 추가하는 정보입니다.

 

androidx.constraintlayout.widget.ConstraintLayout

이 태그는 화면 전체를 감싸고 있는 최상위 레이아웃 입니다. ConstraintLayout을 나타냅니다.

 

이 태그의 속성으로 xmls:로 시작하는 속성의 의미는 다음과 같습니다.

접두어	의미
xmls:android	안드로이드 기본 SDK에 포함되어 있는 속성을 사용합니다.
xmls:app	프로젝트에서 사용하는 외부 라이브러리에 포함되어 있는 속성을 사용합니다. app이라는 단어는 다른 것으로 바꿀 수 있습니다.
xmls:tools	안드로이드 스튜디오의 디자이너 도구 등에서 화면에 보여줄 때 사용합니다. 이 속성은 앱이 실행될 때는 적용되지 않고 안드로이드 스튜디오에서만 적용됩니다.

 

android:layout_width와 android:layout_height는 안드로이드 기본 SDK에 포함되어 있는 layout_width와 layout_height의 속성을 사용한다는 의미입니다.

 

android:id 속성은 뷰를 구분하는 구분자 역할을 합니다. 보통 xml 파일 안에서 뷰를 구분하거나, 이 뷰를 자바 소스 파일에서 찾을 때 사용합니다. @+id/아이디 값의 형식으로 정의합니다.

 

제약조건으로는 layout_constraint[소스 뷰의 연결점]_[타깃 뷰의 연결점]="[타깃 뷰의 id]"로 설정합니다.

소스 뷰의 연결점으로는 contraintTop, contraintBottom, contraintLeft, contraintRight가 있고

타깃 뷰의 연결점으로는 toTopOf, toBottomOf, toLeftOf, toRightOf가 있습니다.

 

가이드라인의 orientation의 속성은 필수 속성입니다. 가로 방향과 세로 방향 중 하나를 지정해야합니다.

app:layout_constraintGuide_begin 속성은 부모 레이아웃 벽면에서 얼마나 떨어뜨려서 배치할지 정할 수 있는 속성입니다. begin 대신 end와 percent로도 사용할 수 있습니다.