ConstraintLayout

ConstraintLayout은 ViewGroup을 상속받아 확장시킨 라이브러리입니다.

사용법

Gradle

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

 

Relative Positioning

ConstraintLayout은 다른 뷰에 상대적으로 지정할수 있습니다.

아래 내용에서 관련된 주요 관련된 기능을 정의 하겠습니다.

<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

아래 내용은 ConstraintLayout 제공하는 속성입니다.

 

layout_constraintLeft_toLeftOf	뷰의 왼쪽 사이드(Side)를 대상 뷰의 왼쪽 사이드(Side)에 맞춤.
layout_constraintLeft_toRightOf	뷰의 왼쪽 사이드(Side)를 대상 뷰의 오른쪽 사이드(Side)에 맞춤.
layout_constraintRight_toLeftOf	뷰의 오른쪽 사이드(Side)를 대상 뷰의 왼쪽 사이드(Side)에 맞춤.
layout_constraintRight_toRightOf	뷰의 오른쪽 사이드(Side)를 대상 뷰의 오른쪽 사이드(Side)에 맞춤.
layout_constraintTop_toTopOf	뷰의 위쪽 사이드(Side)를 대상 뷰의 위쪽 사이드(Side)에 맞춤.
layout_constraintTop_toBottomOf	뷰의 위쪽 사이드(Side)를 대상 뷰의 아래쪽 사이드(Side)에 맞춤.
layout_constraintBottom_toTopOf	뷰의 아래쪽 사이드(Side)를 대상 뷰의 위쪽 사이드(Side)에 맞춤.
layout_constraintBottom_toBottomOf	뷰의 아래쪽 사이드(Side)를 대상 뷰의 아래쪽 사이드(Side)에 맞춤.
layout_constraintBaseline_toBaselineOf	뷰의 텍스트 Baseline을 대상 뷰의 텍스트 Baseline에 맞춤.
layout_constraintStart_toEndOf	뷰의 시작 사이드(Side)를 대상 뷰의 끝 사이드(Side)에 맞춤.
layout_constraintStart_toStartOf	뷰의 시작 사이드(Side)를 대상 뷰의 시작 사이드(Side)에 맞춤.
layout_constraintEnd_toStartOf	뷰의 끝 사이드(Side)를 대상 뷰의 시작 사이드(Side)에 맞춤.
layout_constraintEnd_toEndOf	뷰의 끝 사이드(Side)를 대상 뷰의 끝 사이드(Side)에 맞춤.
layout_goneMarginLeft	뷰 위젯의 왼쪽(Left) 사이드 대상 뷰가 View.GONE 상태일 때 여백 설정.
layout_goneMarginTop	뷰 위젯의 위(Top) 사이드 대상 뷰가 View.GONE 상태일 때 여백 설정.
layout_goneMarginRight	뷰 위젯의 오른쪽(Right) 사이드 대상 뷰가 View.GONE 상태일 때 여백 설정.
layout_goneMarginBottom	뷰 위젯의 아래(Bottom) 사이드 대상 뷰가 View.GONE 상태일 때 여백 설정.
layout_goneMarginStart	뷰 위젯의 시작(Start) 사이드 대상 뷰가 View.GONE 상태일 때 여백 설정.
layout_goneMarginEnd	뷰 위젯의 끝(Start) 사이드 대상 뷰가 View.GONE 상태일 때 여백 설정.
layout_constraintHorizontal_bias	수평 방향(Left/Right 또는 Start/End) 사이드 제약 시, 양 사이드 간 위치 비율.
layout_constraintVertical_bias	수직 방향(Top/Bottom) 사이드 제약 시, 양 사이드 간 위치 비율.
layout_constraintCircle	원형 위치 지정에 사용될 대상 뷰 ID 지정.
layout_constraintCircleRadius	원형 위치 지정 시, 뷰 위젯과 대상 뷰 위젯 중심 사이의 거리.
layout_constraintCircleAngle	원형 위치 지정 시, 원 둘레에서 뷰 위젯이 배치될 각도.

 

Center

좌우, 상하로 Constraint를 정의하면 가운데로 정렬합니다.

 

정렬되는 위치를 이런식으로 bias 통해서 결정도 가능합니다.

app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintVertical_bias="0.6"

 

Demension Constraints

app:layout_constrainedWidth=”true|false”  app:layout_constrainedHeight=”true|false”	wrap_content 같은 경우 크기에 대한 제한이 적용되지 않습니다. 크기제한을 걸고 싶으면 해당 속성을 사용하면 됩니다.
app:layout_constraintHeight_percent="0.5"   app:layout_constraintHeight_percent="0.5"	크기에 따라 크기를 결정하는 퍼센트 속성
app:layout_constraintDimensionRatio="(W|H,)[width]:   [height]" app:layout_constraintDimensionRatio="H,1:1"	가로와 세로의 비율을 통해 지정할수 있습니다.
app:layout_constraintWidth_min="100dp"   app:layout_constraintWidth_max="100dp"   app:layout_constraintHeight_min="100dp"   app:layout_constraintHeight_max="100dp"	크기에 최대 최소 값을 지정할수 있습니다.