Compose - Preview 영역을 표시해주는 라이브러리 추천

이번에는 전 포스팅에서 잠깐 봤던 프리뷰에 System App bar 영역을 표시해주는 라이브러리를 추천 하고자 한다.

 

바로 해당 라이브러리는 

de.drick.compose:edge-to-edge-preview:0.3.0

바로 이 라이브러리이다.

 

해당 라이브러리를 사용하게된 계기는 아래의 코드 한 줄 때문이다.

enableEdgeToEdge()

Compose로 UI를 구성할때 해당 메서드를 입력해주면 System App Bar부분도 UI를 그릴 때 사용 할 수 있다.

 

차이점을 보자면 아래 그림과 같다.

 

좌측이 System App Bar영역을 사용하지 않는 형식이고 우측이 해당 영역도 사용하는 메서드를 입력해준 결과이다.

 

현재 VM을 이용하여 스크린샷을 찍었다 보니 크게 느껴지지는 않겠지만,

실 기기를 활용하여$ex. Galaxy S23$ 비교해보면 차이가 상당한걸 알 수 있다.

 

필자가 아직 Compose를 사용해 본 경험이 적어서 프리뷰 상태에 대한 상세 조정이 있는지는 잘 모르겠다.

그러던중 알게된 라이브러리가 이번에 추천한 라이브러리이다.

 

해당 라이브러리를 적용하게 되면

위 이미지와 같이 프리뷰에 나타나게 된다.

빨간색으로 쳐져있는 영역이 System App Bar 와 바텀 네비게이션 바가 차지하는 영역이기에 해당 영역을 염두에 두고 UI를 구성 하면 되니 개인적으로 굉장히 편하게 느껴졌다.

 

마지막으로 해당 라이브러리의 공식 사이트 링크를 남겨두고 이만 포스팅을 마무리 하도록 하겠다.

 

https://github.com/timo-drick/compose_libraries