[Android] ConstraintLayout

ConstraintLayout, 제약 레이아웃

 

View를 상대적인 위치 관계를 이용하여 배치하는 Layout입니다.

LinearLayout의 가중치weight가 가진 장점과 Chain 사용으로 다른 Layout없이 그룹화할 수 있는 장점이 있습니다.

※ RelativeLayout

- Layout들 중 RealativeLayout 이라는 것도 존재합니다.     - 뷰들간의 상대적인 위치 관계를 설정하여 배치하는 Layout입니다.     - 과거에 많이 사용하였으나 요즘은 ConstraintLayout을 주로 사용한다고 합니다.     - ConstraintLayout과 RelativeLayout의 차이점은 추후 기회가 되면 알아보도록 하겠습니다.       ( 아직 RelativeLayout을 사용해 보지 못했고, 잘 사용하지 않는다고 하여... ;; )

 

Android를 처음 시작하며, LinearLayout만 사용하여 화면을 구성하였습니다.

그런데, View위에 View를 배치해야 할 상황이 발생하였습니다.

역시, 의미 없이 만들어 놓은 기능은 없는 것 같습니다. ConstraintLayout을 사용하여 쉽게 해결할 수 있었습니다.

 

ConstraintLayout의 속성들 중 가장 중요한것은 상대적인 배치인것 같습니다.

속성의 이름으로 의미를 알아 보겠습니다.

 

layout_constraintLeft_toLeftOf 

  - layout_constraint : 현재 작업하는 객체

  - Left : (현재 작업중인) 객의 왼쪽left을

  - toLeftOf : 대상 객체의 왼쪽에

 

Ex) app:layout_constraintLeft_toLeftOf="parent"   // 현재 객체의 왼쪽을 '부모'객체의 왼쪽과 연결

 

[그림] 속성명별 의미

 

실제 적용한 소스내용입니다.

<TextView
    android:id="@+id/txtDesc"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#646464"

    android:padding="5dp"
    android:textColor="#FFFFFF"
    android:textSize="10sp"

    app:layout_constraintTop_toBottomOf="@id/layTitle"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="410dp"

    android:src="@drawable/forest"

    app:layout_constraintTop_toBottomOf="@id/txtDesc"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    />

[소스] activity.xml

 

이번에 공부를 하면서, 역시 프로그래밍은 머리가 아니라 손으로 해야한다는걸 다시 한번 느낍니다.

 

 

ConstraintLayout의 속성

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

 

The End.