[안드로이드/Android] Constraint Layout

Constraint(제약) Layout은 다른 요소와 관련지어 위치와 크기를 조절할 수 있도록 개발되었으며 Relativelayout보다 더 유연하게 뷰그룹을 만들 수 있습니다. 기존에는 LinearLayout과 RelativeLayout 2가지를 가지고 대부분의 화면을 구성했지만, ConstraintLayout를 사용하는 비중이 점점 더 커지고  있으며 진저 브레드부터 호환가능하기 때문에 현존하는 모든 앱들에 적용 가능합니다.

자식뷰들의 위치및 크기 설정

위치 설정

ConstraintLayout의 자식뷰들은 왼쪽, 오른쪽, 위쪽, 아래쪽의 기준점을 다른 뷰의 왼쪽, 오른쪽, 위쪽, 아래쪽과 연결하여 설정합니다.

아래 12개를 이용하며, layout_constraintBottom_toTopOf =‘parent’ 는현재 뷰 아래쪽을 부모뷰의 위에 맞추는 설정입니다.

 - parent  : 버튼을 감싸고 있는 상위 뷰를 말합니다.

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

가령, 아래 코드를 예시로 버튼(’bt_test’)의 오른쪽 기준점을 parent의 오른쪽과 일치시키고, 버튼의 바닥부분은 parent의 바닥과 일치시키는 설정입니다.

그리고 기준점은 부모 뷰가 아닌 다른 뷰를 기준점으로 삼을 수 있습니다. 그럴 경우 parent가 아닌 해당 뷰의 아이디를 적으면 됩니다.

위와 다르게 기준점을 왼쪽과 오른쪽 모두 설정하면 버튼(bt_test)은 양 기준의 가운데 위치하게 됩니다

<?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">

    <Button
        android:id="@+id/bt_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

크기설정 (width,height)

자식 뷰들의 크기를 결정하는 값은 0dp, wrap_content, match_parent로 크게 3가지가 있고 일반적으로 아래와 같이 사용합니다.

• wrap_content : 동적 크기 변경
• 0dp : 제약조건이 없을경우 wrap_content 와 동일 , 제약조건 있을 경우 제약조건안에서 최대크기 
• match_parent : 제약조건과 상관 없이 부모뷰의 크기와 동일

세개중 match_parent는 제약조건과 상관없이 작동하기 때문에 ConstraintLayout과는 적합하지 않습니다.

bt_test은 회색버튼으로 위 코드에서 추가적인 제약조건을 설정해도 넓이가 꽉찬 상태에서 변하지 않습니다.

bt_test2는 검정색 버튼으로 현재 오른쪽 제약조건만 걸려있어 넓이가 0dp지만 wrap_content 성질을 나타내지만 왼쪽에도 제약조건을 걸어주면 

제약조건 안에서 최대 크기가 됩니다.

bt_test3는 빨간색 버튼으로  wrap_content로 제약조건에 따라 크기가 아닌 위치만 변경됩니다.

<?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">

    <Button
        android:id="@+id/bt_test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/bt_test2"
        android:layout_width="0dp"
        android:background="@color/black"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/bt_test3"
        android:layout_width="wrap_content"
        android:background="@color/red"
        android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>

bt_test2의 왼쪽 제약조건을 아래와같이 수정하면 넓이도 변경되는것을 알 수 있습니다.

<?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">

    <Button
        android:id="@+id/bt_test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/bt_test2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/black"
        app:layout_constraintLeft_toRightOf="@+id/bt_test3"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/bt_test3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/red" />

</android.support.constraint.ConstraintLayout>

ps.ConstraintLayout은 제약조건이 없는경우 해당 방향에 마진값이나 패딩값이 적용되지 않습니다.

※해당 포스팅은 지극히 주관적인 내용으로 저자의 복기 목적으로 작성된 것이고, 내용에대해 수정이나 추가 요청은 언제든 환영합니다.