Jetpack Compose에서 Naver Maps API 사용하기(Reverse Geocoding)
·
Jetpack Compose
오늘은 Naver Maps API의 Reverse Geocoding을 사용하는 방법에 대해 알아보겠습니다. 🎯 Reverse Geocoding- Reverse Geocoding이란?Reverse Geocoding은 좌표를 주소 정보(법정동, 행정동, 지번 주소, 도로명 주소)로 변환해 주는 API입니다. API 요청 시 X, Y 좌표값이 필수이며, 지원하는 좌표계는 다음과 같습니다.EPSG:4326 - WGS84 기반 위도·경도EPSG:3857 - Web Mercator (Google Maps 등)NHN:2048 - UTM-K - HTTP ClientKtor 글을 참고해 API 요청과 응답을 위한 HTTP Client를 생성합니다. 프로젝트에 맞게 다른 라이브러리(OkHttp, Retrofit 등)를 ..
Jetpack Compose에서 Naver Maps API 사용하기(Dynamic Map)
·
Jetpack Compose
오늘은 Naver Maps API를 사용하는 방법을 알아보겠습니다. 네이버 지도 API로는 기존의 AI NAVER API의 Maps API와 새롭게 추가된 Application Services의 Maps API가 있습니다. 오늘은 두 가지 중 Application Services의 Maps API에 대하여 알아볼 예정입니다.+ 기존의 Maps API는 2025년 7월 1일부터 무료 이용량이 제공 중단되었으며, 신규 이용도 차단되었습니다. 네이버 지도 SDK 개발 가이드는 Kotlin 버전의 설명이 있지만, XML과 Fragment, View 위주의 설명이 대부분이라 Compose에서 바로 사용하기엔 어려운 부분이 있습니다. 따라서 Compose에서 사용하는 방법 위주로 설명하며 가이드에서 바로 따라 할..
Jetpack Compose로 Reorderable List 만들기
·
Jetpack Compose
아래 글의 업데이트 버전이다.2024.04.29 - [Jetpack Compose] - Jetpack Compose로 Drag and Drop(드래그로 순서 변경) 기능 만들기 Jetpack Compose로 Drag and Drop(드래그로 순서 변경) 기능 만들기※ 업데이트된 버전을 사용하는 것을 추천합니다.2025.04.18 - [Jetpack Compose] - [Jetpack Compose] Reorderable List 만들기 [Jetpack Compose] Reorderable List 만들기아래 글의 업데이트 버전이다.2024.04.29 - [Jetpack Composdevelopuzzle.tistory.com 해당 글에서는 드래그 앤 드롭이라고 했었지만 컴포즈에 별도의 드래그 앤 드롭(D..
Jetpack Compose Navigation Bar FAB 만들기
·
Jetpack Compose
Compose의 NavigationBar(전 BottomNavigation)에는 Floating Action Button(FAB)가 없다. 따라서 위의 사진처럼 중앙 버튼이 위로 이동한 형태의 내비게이션 바를 만들기 위해서는 커스텀이 필요하다. 코드 설명Scafflod의 FAB를 사용해 제작할 수 있는데 Scafflod의 FAB는 bottomBar 파라미터 위에 별도로 그려지기 때문에 bottomBar에서 해당 공간을 마련해야 한다.Scaffold( bottomBar = { 중앙에 공간 필요 }, floatingActionButtonPosition = FabPosition.Center, floatingActionButton = { Box( contentA..
Jetpack Compose Navigation Bar Indicator 만들기
·
Jetpack Compose
Navigation Bar Indicator 사용화면참고로 필자가 사용한 방법은 내비게이션 아이템의 너비가 모두 동일할 때만 사용할 수 있다. 각 아이템의 너비가 달라도 사용할 수 있는 방법은 추후에 별도의 글을 작성 후 추가할 예정이다. 코드 설명- 클래스sealed class Screen( val route: String, val label: String, val selectedIcon: Int, val unselectedIcon: Int) { object HomeScreen: Screen("home_screen", "홈", R.drawable.ic_home_filled, R.drawable.ic_home) object ListScreen: Screen("stash..
Jetpack Compose로 Color Picker 만들기
·
Jetpack Compose
Color Picker 시작하며앱 기본 색상 설정화면과 아이템 항목별 배경색 설정을 위해 컬러 피커가 필요해져 몇 개의 라이브러리를 찾아보았는데 기능적으로는 괜찮았지만 디자인 커스텀을 하기 어려워 직접 만들어보았다. 디자인이 마음에 든다면 그대로 사용해도 좋고 필자처럼 본인이 직접 만들고자 하는 사람은 동작 원리를 참고해 직접 커스텀하면 된다. 사용 화면- 첫 번째 영상을 보게 되면 원형 팔레트에서 색상과 채도를 함께 설정하고 그 아래에 있는 두 개의 슬라이더를 통해 각각 명도와 투명도를 조절하게 된다. - 두 번째 영상을 보게 되면 상단의 ARGB값을 수정해 색상을 직접 입력할 수도 있는데 먼저 ffaaggnn는 존재하지 않는 컬러라서 없다는 표시가 뜨게 된다. 다음으로 ffabab는 ARGB 형식..