constaint layout (쉬움) - 위치의 결정

Constraint layout 은 어렵게 사용하면 어렵지만, 간단하게 생각하고 만들면 정말 쉽게 만들 수 있습니다.
처음부터 이것 저것 고려 하고 잘 만들면 좋겠지만 이번 포스트에선 간단한 앱을 만들기 위해 UI를 쉽게 구성 하는 방법에 대해 알아 보도록 하겠습니다.

배치
원하는 view 를 Palette 창에서 선택하여 드래그 & 드롭 으로 배치 하면 됩니다.

저는 recycleView 를 배치 해 보았습니다.
상하좌우로 4개의 동그라미가 있습니다. 이게 이 view (recycleView)의 영역을 나타냅니다.
뷰가 배치되면 자동으로 적당한 영역으로 잡히게 되는데 recycleView 는 Layout 전체 크기로 잡히게 되네요
뷰의 크기는 layout_width, layout_height 값으로 결정 됩니다. 화면 우측에 있습니다.

이 값들은 view 설정 값을 참조 하시고 layout_height 를 wrap_content 로 변경 하도록 합니다.
arvigoes.tistory.com/864?category=810468

view 크기 설정하는 값들

 

Constraint layout 에 view 를 배치하게 되면 상하 좌우로 4개의 버블(동그라미)이 생기는데 이를 다른 뷰와 연결하여 뷰 간에 관계를 현성하도록 합니다.
여기서 중요한 점은 바탕이 되는 Constraint Laout 도 view 입니다.
지금 까지 한 내용을 보면 Conatraint layout View 위에 recyclerView 를 올려둔 상태 입니다.

관계형성

recycler view 와 layout 과 관계를 형성해 보도록 하겠습니다.
하단 버블을 클릭하여 layout 하단으로 드레그 & 드롭 합니다.
상단 버블을 클릭하여 layout 상단으로 드레그 & 드롭 합니다.

관계형성 & 관계표시

상하 버블은 관계형성이 되어 파란색으로 관계가 형성되었음을 표시됩니다.
여기에서 xml 을 보신다면 관계이해가 좀 더 올라 갈 수 도 있으니 한번 살펴 봅시다.

최신버젼에는 우측 상단에 있네요. 과거 버젼엔 좌측 하단에 있었던 기억이 있는데 각자 화면에서 잘 찾아 보도록 합니다.
Code 는 layout 의 xml 코드만 보여 줍니다. 
split 은 xml 과 레이아웃 디자인 창을 같이 보여줍니다.
Design 레이아웃 디자인 창만 보여 줍니다.
지금까지 보고 있는 화면이 레이아웃 디자인 창입니다.
전 주로 split 을 사용 합니다.

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvTodoItems"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

recycler view 의 xml 내용 입니다.
우리가 드래그로 형성해준 관계가 표시 되어 있습니다.
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
가장 아래쪽을 가장아래부분에 붙인다=부모에.
가장 위쪽을 가장위쪽에 붙인다=부모에.
어렵지 않습니다.
처음에 Bottom_toBottomOf 만 연결되었을때는 view 가 가장 밑에 붙었지만
위쪽도 연결해주니 화면의 정 중앙에 위치 해 있습니다.
view 의 사이즈가 지정 되어 있으니 전체를 덮을 수 없어 상단과 하단의 균형을 이루는 위치 가운데 위치 하게 됩니다.

이렇게 constraint layout 은 가로 또는 세로 한 방향으로 좌우의 관계의 영향을 받아 자신의 위치를 결정 하게 됩니다.
이 외에도 여러 옵션이 아주 많지만 이것만 기억하면 view 들의 관계를 통해 원하는 위치에 쉽게 배치가 가능 해 집니다.

Ctrl 키를 누른 상태로 관계가 형성된 버블에 마우스 커서를 올리면 관계를 삭제 할 수도 있습니다..

관계삭제

bottom 의 관계를 삭제되었으므로 RecyclerView 는 Layout 상단에 붙게 됩니다.

하단에 버튼도 추가 해 보도록 합니다.
버튼은 글자의 내용에 크기가 맞춰 져 있네요
width, height 모두 wrap_content 로 설정 해 주면 될듯합니다.
editText 는 글자를 치는 곳이니 가능한 넓게 사용할 수 있도록 width 값을 0dp 로 사용 합니다.
bottom 은 layout_constraintBottom_toBottomOf = parent 로 맞춰 최 하단에 붙여 줍니다.
뷰들이 겹치지 않게 delete done 버튼은 layout_constraintEnd_toEndOf="parent"
add Todo 버튼은app:layout_constraintEnd_toStartOf="@+id/btnDeleteDoneTodos"
Delete done 버튼의 시작부분으로 맞춰 줍니다.

editText 는 layout_constraintStart_toStartOf="parent"
layout_constraintEnd_toStartOf="@+id/btnAddTodo"
두 값으로 전체 영역에서 가능한 가장 큰 크기로 사용 할 수 있도록 해 줍니다.

사각형으로 봤을때 지칭 하는 용어는 다음 과 같습니다.

구성해본 레이아웃 관계에 등장하는 단어들을 보면서 다시 한번 의미를 되세겨 보시길 바랍니다.