[Android] ConstraintLayout 사용에 익숙해 지자.

이 포스팅의 목적은 ConstraintLayout를 전부 알리고자 하는 목적이 아닌, 기본 속성만이라도 제대로 알고 조금씩이라도 활용도를 높이면 좋겠다는 생각으로 포스팅 합니다.

Android Studio에서 Project를 새로 생성하던지, Activity를 새로 생성 하던지, Layout를 생성하면 기본으로 생성되는 Layout이 ConstraintLayout 입니다.

평소에는 ConstraintLayout을 지우고 익숙한 LinearLayout 이나 RelativeLayout로 작업을 했지만, 매번 바꾸는 것도 귀찮고 해서 ConstraintLayout을 살펴 보았습니다.

사실 LinearLayout이 익숙하기 때문에 많이 사용 하지만 다른 Layout에 비하여 성능이 떨어지는 측면이 있다는걸 알고 있을 겁니다.

LinearLayout 자체가 성능이 떨어지는게 아니라, LinearLayout을 사용 하게 되면 어쩔 수 없이 한 레벨씩 안으로 들어 가면서 UI를 구성하게 됩니다.

모든 UI는 같은 레벨에서 작성될때 성능이 좀 더 나오는데 그런면에서 RelativeLayout를 한동안 사용 하기도 했습니다.

하지만 요세 Device 성능이 워낙 좋아서 정말 많은 레벨을 요구하지 않는 이상 일반적인 앱을 개발할 때에는 크게 신경 안써도 되지 않을까 생각합니다.

하지만!! 그래도!! 이왕이면!!

같은 레벨에서 작성하는게 조금이라도 성능 개선이 된다고 하니 ConstraintLayout에 대해서 알아보겠습니다.

오늘 포스팅할 내용은 위에서도 말씀 드렸지만  ConstraintLayout의 전체전인 부분이 아니라 기본적인 속성 입니다. 

그 이유는 처음부터 많은 속성을 보고 하나하나 적용 하는것도 의미가 있겠지만,

그것보다는 기본적인 핵심 특성만 보고 프로젝트에 조금씩 적용 하다 보면 점점 ConstraintLayout에 적응할 수 있지 않을까 해서 입니다.


가장 기본적인 속성입니다.

가장 기본적이면서도 가장 많이 사용 하며, 응용 하기에 따라 이정도만 알고 있어도 많은 UI를 만들 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

⁢</android.support.constraint.ConstraintLayout>

속성의 의미를 알아보겠습니다.

• app:layout_constraintLeft_toLeftOf=''parent' 

: 내 View(여기서는 TextView)의 왼쪽을 부모View의 왼쪽에 붙인다.

끝!


오늘 말하고 싶은 포스팅은 이게 전부 입니다.

저 속성들을 이용해서 하나하나 배치 하다 보면 ConstraintLayout을 사용 하고 있는 자기 자신을 발견할 수 있을 겁니다.


몇가지 예시

app:layout_constraintLeft_toRightOf="@id/anotherView"
: 내 View의 왼쪽을 @id/anotherView 오른쪽에 붙인다.

app:layout_constraintRight_toLeftOf="@id/anotherView"
: 내 View의 오른쪽을 @id/anotherView 왼쪽에 붙인다.

app:layout_constraintTop_toBottomOf="@id/anotherView"
: 내 View의 위를 @id/anotherView 아래에 붙인다.

app:layout_constraintBottom_toTopOf="@id/anotherView"
: 내 View의 아래를 @id/anotherView 위에 붙인다.

이런식으로 만들고자 하는 UI를 만들 수 있습니다.


하나만 더 알고 넘어가죠! 위 속성을 예로 설명 하겠습니다.

ConstrainLayout을 사용 하다보면 알겠지만 margin를 사용할 때 주의 사항 입니다.

margin은 anotherView에서 사용 하는게 아니라 내 View에서 사용해야 됩니다.

다른 Layout 에서는 margin을 사용 하고 싶은 곳에서 사용 하면 좌우로 위아래 어느 방향이던 적용이 되었던 반면

ConstrainLayout에서는 margin으로 인해 직접 영향 받는 뷰에 설정을 해야 됩니다.

말이 어려운거지 margin을 여기저거 적용 하다보면 바로 느낌 오실 겁니다.