[Android, Kotlin] 레이아웃 (3) ConstraintLayout

ConstraintLayout 에 대해서 알아보자(1)

Layout : 앱 화면을 기본 바탕으로 생각했을때 그 안에서 본인이 그리고자 하는 기본 틀
Constraint : 사전적 의미로 "제약, 제한, 통제" 되시겠다.

• ConstraintLayout

  • ViewGroup의 하위 클래스로 View 간의 Constraint를 통한 배치 방식을 정의함.
  • View 의 위치(position)를 특정하고자 할때 제약(Constraint)를 걸어서 위치를 정의한다.

• 제약(Constraint)에 대해서 보다 자세히 설명하자면

  쉽게 생각해서 바다위에 떠있는 배를 생각해보자. 배를 현 위치에 고정하고자 하면 닻을 내려 고정하게 되는데 마찬가지로 View 자신으로부터 Anchor(닻)을 설정함으로써 위치를 특정하는 개념이라 보면된다.

 
 

ConstraintLayout 에 대해서 알아보자(2)

• ConstraintLayout 은 LinearLayout, RelativeLayout 에 이어 가장 이후에 나온 레이아웃 구성 방법이다.
  그러므로 이전 레이아웃 구성 방법의 불편한점이나 성능적인 면에서도 개선된 방법이 포함되어 있다.
• ConstraintLayout 은 어떠한 속성을 사용하여 구성하느냐에 따라 LinearLayout 처럼 UI 를 꾸밀 수도 있고 RelativeLayout 처럼 UI 를 보여 줄 수도있다. UI 구성에 여러가지 고려 요소가 있겠지만 적절하게 혼합해 사용한다면 최적의 UI 성능또한 기대해 볼 수 있다.

가정 : 예를들어 계층 구조가 여러단계로 깊은 UI 구성을 한다고 해보자.
목적 : 우리는 부드럽운 UI를 한정된 시간에 빠르게 보여주는게 주 목적이다.

• 여기서 알아야 할것이 레이아웃이란 각 View의 크기와 위치를 정의하는 것이다.
  만약 계층이 복잡한 LinearLayout에서 상위 View의 값이 변하거나 프레임이 변화하는 것이 많다면 그때 그 하위 View의 레이아웃들은 매번 그때마다 측정(Measure)를 해야 하므로 그 비용(Cost)이 굉장히 커지게 되어 우리의 목적에 부합하기가 어렵다.
• 성능측면에서 UI 구성 비용
  [제약(Constraint)을 통해 위치시키는것] < [측정(Measure)하여 위치시키는것]

 
 

기본 사용법 Example(1) - add TextView

• TextView 를 추가해보자.
  

  

• activity_main.xml 의 Design 탭에서 확인 : 아직 Constraint 적용전임을 확인하자.
  

  

 
 

기본 사용법 Example(2) - add TextView with Constraint

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"

• (상,하,좌,우) 모두 Constraint 를 적용한 후
  

  

• activity_main.xml 의 Design 탭에서 확인
  

  

• Margin
  0 dp로 되어있는 숫자를 변경할 경우, 각 방향(면)에서의 Margin 값을 설정할 수 있다.

 
 

기본 사용법 Example(3) - add Button

• Button을 추가해보자.
  

  

• 각 View에 Constraint를 적용하지 않으면 해당 xml 에서 오류로 인식하니 반드시 Constraint를 적용하자.
  

  

 
 

기본 사용법 Example(4) - add Button with Constraint

        android:layout_marginTop="96dp"
        app:layout_constraintEnd_toEndOf="@+id/textView"        
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

• 각 View의 Constraint(Anchor)는 또 다른 View에 설정하여 Positioning 할 수 있다.
  

  

• 주의할점

  Constraint 레이아웃에서 모든 View에는 Constraint의 설정을 위해 id 값을 가져야 한다.

 
 

기본 사용법 Example(5) - Match Constraint

• View의 Width or Height를 정의할때 0 dp(=Match Constraint)로 설정하여 Constraint를 통해 크기를 설정하는것도 가능하다.
  

  

 
 

기본 사용법 Example(6) - Chain

• Chain 이란, View 끼리 Constraint가 양방향으로 설정되어 있는 경우를 말한다.
  

  

• Chain 속성

1. 수직방향으로 속성값에 따라 배치 = app:layout_constraintVertical_chainStyle="속성값"
2. 수평방향으로 속성값에 따라 배치 = app:layout_constraintHorizontal_chainStyle="속성값"
3. 속성값 3가지

   • spread : 공간들을 균등하게 늘려서(spread) 배치
     

     

   • spread inside : View 사이 공간을 늘려서(spread inside) 균등하게 배치
     

     

   • packed : 최대한 모아서(packed) 배치
     

     

 
 

Example : 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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="겨울시인"
        android:textSize="34sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="96dp"
        android:layout_marginBottom="60dp"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        android:text="Button"
        app:layout_constraintHorizontal_chainStyle=""
        app:layout_constraintEnd_toEndOf="@+id/button"
        app:layout_constraintStart_toStartOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/button" />

</androidx.constraintlayout.widget.ConstraintLayout>

 
 

마지막으로..

• Android 에서 레이아웃은 크게 3가지.
  이상으로 그 중 세번째 ConstraintLayout 기본적인 내용과 개념에 대해 알아보았다.

1. LinearLayout 링크 참고
2. RelativeLayout 링크 참고
3. ConstraintLayout