Android/Jetpack Compose (27) 썸네일형 리스트형 [Android] 사용성 높은 StickyHeader 구현하기 Compose를 통해 다양한 UI를 그리다 보면, Header라는 이름의 UI를 많이 그려봤을 것이다.그중에서 Scroll이 가능한 영역에서 Header를 구현할 때 StickyHeader를 많이 사용했을 텐데, 필자는 최근에 기본적인 StickyHeader가 아닌 UI가 변경되면서 다른 형태의 Header를 구현해야 했다. 따라서 기본적인 StickyHeader를 사용하는 것이 아닌 다른 형태의 Custom Header를 구현하는 법을 찾아보았고,생각보다 자주 쓰일 수 있을 것이며 한번 구현해 두면 쉽게 가져다 사용할 수 있는 Component라고 생각이 되었다. 간단하지만,StickyHeader와 더불어 Compose에서 제공하는 Component를 사용하여 구현하는 방법, 직접 Custom 하여 H.. [Android] Shimmer UI 구현하기 개발을 진행하면서 UI가 그려지기 위한 API의 응답을 기다리는 시간에 Loading Indicator를 통해 UI를 그려본 적이 있을 것이다. 단순히 로딩을 돌려서 그 시간을 기다리게 만들 수 있을 뿐 아니라, Shimmer를 사용하여 조금 더 자연스럽고 세련된(?) 로딩 화면을 만들 수 있다. 필자도 지금까지는 대부분 API 응답을 기다릴 때 Loading 애니메이션을 넣어주고 로딩이 끝나면 UI가 한 번에 그려지는 형태로 개발을 진행했었는데, 이번에 Shimmer를 사용하여 UI를 미리 그려주고 API Response가 오면 화면을 갱신하는 형태로 개발을 진행하게 되었다. 따라서, 간단하게 Shimmer를 구현하는 방법과 사용할 때 주의할 점에 몇 가지에 대해 작성해두고자 한다.우선,Shimmer가.. [android] BottomNavigation의 구현 및 방법에 따른 차이 개발을 하다 보면 Scaffold의 bottomBar를 사용하여 BottomNavigationBar를 많이 구현하곤 한다.필자도 업무를 진행하면서 BottomNavigationBar가 필요하면 compose에서 제공해 주는 BottomNavigation 컴포넌트를 이용하여 구현을 하였는데, 최근에 해당 컴포넌트를 사용하지 않고 구현해야 하는 상황이 발생하였다. 별도로 구현을 하면서 제공해 주는 Component를 사용하지 않을 때와 사용했을 때의 구현 방법과 차이점에 대해 간단하게 알아보도록 하자.우선,BottomNavigation Component를 사용할 때의 구현 방법이다.val navController = rememberNavController()Scaffold( modifier = Modi.. [Compose] Compose 환경에서 Drag and Drop 기능 구현해보기 - LazyColumn에서의 드래깅 무려 2년 전에 기존 XML을 사용하여 UI를 그릴 때, Drag and Drop 기능을 통해 아이템들의 순서를 변경하는 기능을 구현한 적이 있다.2022.11.12 - [Android/Utility] - [Android] RecyclerView Drag and Drop 필자는 XML을 사용했을 때는 비교적 쉽게(?) 해당 기능을 구현했었다고 기억하고 있는데, Compose 환경에서는 해당 기능을 제공하거나 구현하기 더 간단하지 않을까?라는 생각을 했다. 그래서 실무에서 해당 기능을 구현해 보려고 도전해 봤는데, 존재하는 라이브러리는 코틀린 버전 문제로 사용 못하거나 스크롤 이벤트들이 정상적으로 동작하지 않거나 했고, 믿었던 GPT 마저도 정상적으로 기능을 구현해주지 못해 직접 구현해 보게 되었다. 완벽.. [Compose] Compose환경 WebView에서 JavascriptInterface를 사용할 때 주의할 점 필자가 실무를 진행하면서 Compose 환경에서 webView를 사용해야 할 케이스가 생겼다.webView는 여러모로 많이 사용해 보았기 때문에 아주 쉽게 구현하여 확인하고 끝낼 생각이었지만, 생각지도 못한 부분에서 오류가 발생하여 해결하는데 시간을 좀 소모하였다. 명확하게 원인을 파악한 것은 아니지만, 같은 문제를 해결하고 있는 사람들을 위해 문제 점과 해결한 방법에 대해서 작성해보고자 한다.우선 문제점은 다음과 같다. 웹뷰를 선언하여 특정 버튼을 눌렀을 때, webView를 열어 이후 프로세스를 진행하도록 해야 한다.여기서 webView에서 android로 호출하는 javascriptInterface는 정상적으로 동작하고 있었으나, android에서 webView로 호출하는 javascriptInte.. [Compose] Side Effect 관련 API 재 정리 약 2년 전, Compose를 처음으로 공부하면서 Side Effect에 대해서 공부하면서 글을 작성했었다.2022.06.08 - [Android/Jetpack Compose] - [Jetpack] Compose 사용하기 - 2. Side Effect와 Coroutine 12022.06.09 - [Android/Jetpack Compose] - [Jetpack] Compose 사용하기 - 2. Side Effect와 Coroutine 2 공부하던 당시 보고 있던 책의 순서에 따라 공부하면서 작성했었는데, 실무에 적용하기 전 이론으로만 공부했던 부분이라 정확히 어떻게 사용하고, 사용할 수 있는지에 대해 이해를 하지 못한 상태로 작성했었다. 최근 실무를 진행하면서 recomposition 관련해서 자주 생각.. [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.. 이전 1 2 3 4 다음
