[Android] ConstraintLayout, Chain 설정

ConstraintLayout

constraintlayout은 레이아웃 구성 시, 뷰 위젯의 위치와 크기를 유연하게 조절할 수 있게 만들어주는 레이아웃이다.

 

constraintlayout : 제약

단어 뜻과 알맞게 레이아웃에 배치되는 뷰들에 여러 제약을 적용하여 각 뷰의 위치와 크기를 결정한다. 

constraintlayout

다음은 대표적으로 constraintlayout에서 제공하는 속성이다.

layout_constraintLeft_toLeftOf : 뷰의 왼쪽 사이드(Side)를 대상 뷰의 왼쪽 사이드(Side)에 맞춤.
layout_constraintTop_toBottomOf : 뷰의 위쪽 사이드(Side)를 대상 뷰의 아래쪽 사이드(Side)에 맞춤.
layout_constraintStart_toEndOf : 뷰의 시작 사이드(Side)를 대상 뷰의 끝 사이드(Side)에 맞춤.

 

이제 실제로 FLO 앱을 클론코딩하면서 어떻게 적용되는지 살펴보자.

결과 화면

먼저 홈 화면이니 만큼, 위에서 아래로 내리는 View인 ScrollView를 이용해보자.

ScrollView와 ContraintLayout

첫 뷰를 ScrollView로 설정하고, 그 안에 해당되는 레이아웃은 위의 코드처럼 ConstrainLayout으로 설정하였다.

너비는(width) 위의 그림처럼 꽉차야해서 math_parent로,

높이(height)는 이미지, 실제 FLO앱처럼 뷰가 늘어날수록 맞추어 늘어나야 하기 때문에 wrap_content로 설정하였다.

 

오른쪽 상단 세 개의 이미지 Chain 설정

오른쪽 상단 위 세 개의 이미지 로고 설정부분 코드이다.

여기서 주의할 점은 위에서 설명한 Chain설정이다.

 

먼저 setting_iv를 살펴보면 이는 제일 끝 상단 오른쪽에 속해있다. 

따라서 다음과 같이 설정해줄 수 있다.

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"

이렇게 이미지의 상단과 parent의 상단을 걸어주고, 이미지의 오른쪽(끝)과 parent의 오른쪽(끝)을 걸어주었다.

위에서는 End를 사용하였지만 오른쪽을 의미하므로 Right를 사용해도 가능하다.

 

위 그림의 아랫부분(앨범, 노래제목, 가수 설정)

먼저 앨범의 이미지는 아래쪽에 속해있기 때문에 Top쪽으로 체인을 걸어두기 보다는

Bottom을 이미지의 Bottom쪽으로 체인을 걸어주었다.

app:layout_constraintBottom_toBottomOf="@id/home_pannel_background_iv"

 

그 다음 노래제목인 In My Bad는 왼쪽(Start)쪽을 앨범이미지의 오른쪽(End)쪽으로 체인을 걸어두고,

노래제목의 Top쪽과 앨범이미지의 Top쪽을 추가로 걸어주면서 앨범이미지의 상단 오른쪽으로 설정하였다. 

app:layout_constraintStart_toEndOf="@id/home_pannel_album_img_iv"
app:layout_constraintTop_toTopOf="@id/home_pannel_album_img_iv"
app:layout_constraintBottom_toTopOf="@id/home_pannel_album_singer_tv"

 

마지막으로 가수이름인 bear도 마찬가지로 왼쪽을 앨범이미지의 오른쪽으로 걸어두었고,

이번에는 아래쪽에 속해있기 때문에 추가로 Top_toBottomOf 를 걸어주면서 적절한 위치로 설정하였다.

app:layout_constraintStart_toEndOf="@id/home_pannel_album_img_iv"
app:layout_constraintTop_toBottomOf="@id/home_pannel_album_title_tv"
app:layout_constraintBottom_toBottomOf="@id/home_pannel_album_img_iv"

아래 결과화면