[Android] ConstraintLayout GuildLine으로 화면 구성하기

출처: unsplash.com

 

부트캠프 최종 팀 프로젝트 기록 12

 

 

서론

지난 포스팅의 splash screen 구현 이후, 다양한 오류들을 해결하고 있는 중이다.

지금까지 로그인에서 로그인 진행 후 main으로 이동하지 않은 오류를 해결하면서 로그인 진행 중 circular progress bar를 띄우는 디테일 작업을 진행하였고,

Android 12 이하의 버전에서는 splash screen dependency가 잘 작동하지 않는 문제가 있어서 Activity로 splash screen을 구성하고, 로그인 기능을 약간 손보는 작업을 진행했다.

위 2가지의 작업은 포스팅으로 쓰기에는 애매한 감이 있었는데, 이번에 한 것은 포스팅으로 쓰기 좋은 것 같아서 이번에 작성해보려 한다.

 

이번에는 settings 화면을 구현하였다.

myPage에 들어가야 하는 기능들이 점점 많아지고 있어서 settings로 따로 빼기로 결정했다.

그래서 myPage의 xml 구조를 변경해야 했는데 이때 guildLine을 사용해 주었다.

 

 

ConstraintLayout GuildLine

guildline은 constraintlayout에서만 사용할 수 있는 뷰의 배치를 돕는 역할을 한다.

guildline 생성은 다음과 같이 진행한다.

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline_start"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="16dp" />

orientation으로 가이드라인을 가로로 배치할 건지, 세로로 배치할 건지 설정한다.

layout_constraintGuide_begin으로 위치를 지정할 수 있다.

위치 지정은 총 3가지의 방법으로 지정할 수 있다.

• layout_constraintGuide_begin
• layout_constraintGuide_end
• layout_constraintGuide_percent

begin은 시작점으로부터 몇 dp만큼 이동시킬 건지 설정한다.

end는 begin과 반대로 마지막 지점으로부터 몇 dp만큼 이동시킬 건지 결정한다.

percent는 화면에 몇 % 지점에 guideline을 놓을 건지 설정한다.

 

guildeLine을 이용해 myPage 화면을 재구성해 보자.

xml 화면의 점선들이 모두 guildeLine들이다.

guideLine으로 뷰를 배치해 반응형 UI를 쉽게 구현할 수 있게 된다.

 

 

구현 중 발생한 문제 상황

이번에 guideLine을 처음 사용해 봤다.

처음 사용하다 보니 어떻게 배치를 해야 guideline을 좋게 배치한 건지 명확한 기준을 모르겠어서 myPage를 4개의 덩어리로 나눠서 각 덩어리의 시작점을 horizontal guideline을 이용해 배치해 주었다.

 

결론은 어떻게 guideLine을 짜야 잘 짠 guideLine이 되는 건지 모르겠다는 뜻이다.

이 부분은 검색해도 잘 나오지 않던데 따로 찾아봐야겠다.

 

정리

constraintlayout의 guideline을 사용해 봤다.

guideline을 쓰니까 확실히 뷰 배치가 편해지긴 했다.

또한 기존에는 특정 위치에 뷰를 배치시키는 것이 힘들었는데, guideline을 쓰면서 특정 위치에 뷰의 위치를 잡으면서 ui를 구성할 수 있었다.

percent로 뷰의 위치를 지정하기 때문에 반응형 UI를 만드는 데 도움이 많이 되었다.