Android/Jetpack Compose (21) 썸네일형 리스트형 [Compose] SwipeToDismiss를 사용하여 스와이프 이벤트를 추가해보자. 필자가 업무를 진행하다 iOS에서는 익숙하지만 Android에서는 그렇게 익숙하지 않은 제스처 이벤트인 Swipe 하여 Item의 데이터를 변경하는 방법에 대하여 찾아보게 되었다.빠르게 확인하고 적용해본 결과 서비스에 해당 기능은 추가하지 않았지만 작성해 두면 생각보다 사용할만한 곳들이 많이 생길 것 같아서 예제를 만들어보기로 했다. 이번 예제는 Compose에서 제공해주는 SwipeToDismiss Component를 사용하여 해당 이벤트를 구현하였으며, 실무에서 사용할 때 사용할법한 이벤트를 추가하여 구현하였다.우선, 위에서 언급한대로 SwipeToDismiss Component부터 확인해 보자.fun SwipeToDismiss( state: DismissState, modifier: Mo.. [Compose] 다양한 방법으로 Drawer를 구현해보자 - Scaffold, ModalDrawer 최근 업무를 진행하다, 카카오톡에서 보이는 채팅방 서랍 같은 메뉴를 만들어야 했다. 기존에 Compose Sample을 만들 때 해당 UI인 Drawer를 구현해 보았지만, 좌우가 반대이기도 하고 다른 방식을 사용할 수 있었기 때문에 BottomSheet와 마찬가지로 2가지 방법으로 해당 UI를 구현해보고자 한다. 제목에 기술한 Scaffold와 ModalDrawer 말고도 Custom 해서 비슷한 UI를 구현할 수 있지만, 이번에는 해당 케이스는 제외하고 Compose에서 Component로 제공해 주는 2가지 방식만 작성하겠다. 우선 처음으로는 가장 기본적인 Scaffold를 사용하여 구현하는 방법이다. @Composable fun Scaffold( modifier: Modifier = Modifie.. [Compose] 다양한 방법으로 BottomSheet를 구현해보자. - BottomSheetScaffold, ModalBottomSheet, CustomBottomSheet Compose 환경에서 개발을 진행하다 보니, BottomSheet Component를 사용하는 경우가 상당히 많다. 특정 버튼 및 아이템을 눌렀을 때, 페이지보다 가볍게 해당 아이템에 대한 디테일한 정보 혹은 다음 Depth의 정보를 보여주기 위해 많이 사용한다. UX 관점에서 생각했을 때 BottomSheet를 사용하는 다양한 이유가 존재하겠지만, 정말 단순하고 직관적으로 위와 같은 이유로 모바일 환경에서 많이 사용한다고 느낀다. 그리고 그 자주 사용하는 BottomSheet를 구현하는 것에 있어서 다양한 방법이 존재했고, 필요에 따라서 선택해서 구현하기 위해 조금 더 디테일하게 공부하고 정리하기 위해 이 글을 작성하게 되었다. 글의 제목으로 작성했듯이 필자는 이 3가지 방법으로 BottomSheet.. [Compose] LazyList에서 스크롤을 커스텀하기 위해 FlingBehavior를 사용해보자. 필자가 실무를 진행하다, LazyColumn의 스크롤 애니메이션을 직접 커스텀해야 하는 이슈가 발생했다. 지금까지 LazyColumn을 사용할 때는 많은 양의 item List를 보여줄 때 사용하는 케이스가 많아서, 직접 애니메이션에 대해서 커스텀을 하기보다는 그냥 사용자가 스크롤하는 대로 보여주면 됐다. 따라서, 스크롤에 대해서 별도로 건들지 않고 필요 시 State만 컨트롤해 주는 정도로 사용했다. 하지만 이번에 직접 스크롤을 커스텀하다보니 생각보다 자료도 많이 없었고, 검색하기 위한 키워드를 찾는 것조차 생각보다 시간이 오래 걸렸다. 따라서, 이번 글에서는 그렇게 깊지는 않지만 간단하게 스크롤을 커스텀할 수 있는 코드를 설명하고자 한다. 우선, 기본적으로 LazyColumn을 사용하면 다음과 같이 .. [Compose] Compose 환경에서 Circular Scroll Pager와 다른 UI를 가지는 Pager를 구현해보자. Compose 환경에서는 Pager를 아주 쉽게 구현을 할 수 있다. 하지만, 실무에서 적용하기 위해서는 Pager를 구현하기만 하면 되는 것이 아니라 몇 가지 기본적인 기능을 추가해야 사용이 가능하다. 따라서, 몇 가지 기본적인 기능 중 가장 많이 사용이 되는 두 가지 기능에 대해서 설명하고자 한다. 첫 번째는 Circular Scroll이 가능한 Pager처럼 보이도록, 첫 번째, 마지막 index에서 좌 우로 이동하려고 했을 때 각각 마지막, 첫 번째 index의 아이템을 보여주는 방법이고 두 번째는 Pager로 화면을 스크롤할 때 각각 다른 Compose UI를 보여주도록 설정하는 방법이다. 다양한 방법으로 2가지를 모두 구현할 수 있는데 필자가 적용한 방법은 비교적 간단한 방법이라고 생각되며, .. [Compose] Compose 환경에서 Pull To Refresh를 구현해보자. 예전에 업무를 진행하다 위에서 아래로 잡아 당기면서 화면을 갱신하는 pull to refresh를 xml 환경에서 구현해 본 경험이 있다. 하지만 이번에는 Compose 환경이다보니 어떻게 해야 하나 잠깐 찾아보았는데, 이처럼 해당 기능 자체를 제공해주고 있었다. 이번 글에서는 해당 기능을 사용하여 아주 간단하게 Pull to Refresh 기능을 구현해보고자 한다. 우선, 해당 기능은 Material에서 제공하기 때문에 해당 dependency를 추가해 준다. implementation "androidx.compose.material:material:$material_version" 다음으로는, pull to refresh를 수행하기 위한 값을 선언해 줘야 하는데, 맨 위에 pullRefresh 함수를.. [Compose] Tooltip UI를 사용해보자. 보통 실무를 진행하게 되면 디자이너의 요청에 따라 여러 가지 UI를 만들 수밖에 없는데, 이번에는 Tooltip UI를 만들어보게 되었다. 이전에 포스팅 했었던 Flexbox Layout에 들어가 있는 아이템을 클릭했을 때 Tooltip이 뜨면서 추가적인 데이터를 노출시켜주어야 하는 케이스였다. 그에 따라서 Tooltip을 구현할 수 있는 방법을 찾아서 적용을 해보았는데, 일반적으로 Tooltip이 들어가는 경우에는 lazy 하게 데이터가 들어가는 케이스가 드문지, Flexbox Layout 구현에 대한 이해가 부족한지 모르겠지만 다양한 이슈가 발생하였다. 직접 Tooltip을 구현해서 사용하게 되면 위치를 계산하고 레이아웃을 그려줘야 하는데 Flexbox Layout의 경우 아이템의 위치가 UI가 그려.. [Compose] Coil을 사용하여 벡터파일인 SVG Image을 불러오는 방법. (feat. GIF Image) 개발을 하면서 이미지 파일을 사용하다 보면 어렵지 않게 SVG 파일을 사용할 수 있다. SVG는 Scalable Vector Graphics의 약자로 2 차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다. JPEG, PNG와 함께 자주 사용되는 이미지 파일 형태로, SVG는 특히 해상도를 대응해야 하는 복잡하지 않은 이미지 파일, 아이콘 등에 자주 사용한다. 필자도 실무를 진행하면서 SVG 파일을 자주 사용해왔는데, 생각해 보면 이번 이슈를 만나기 전까지는 SVG 파일은 resource file로 로컬에 저장해 두고 불러오는 형식으로만 사용을 했었다는 것을 알 수 있었다. 지금까지 Image load library로는 glide만 사용하고 있었는데, Glide에서는 별도의 작업을 해주지 않으.. 이전 1 2 3 다음
