생각저장소 (배움의길에서 만나는 이야기)

습관관리 앱 구현 과정 : Jetpack Compose에서 TopAppBar 구현 과정, 동적 버전 표시 및 웹 연동 Jetpack Compose를 사용한 안드로이드 앱 개발 중, 사용자에게 일관된 경험을 제공하기 위해 공통 TopAppBar를 구현한 과정을 공유합니다. 이 글에서는 TopAppBar에 앱 아이콘, 동적으로 가져온 앱 이름과 버전, 그리고 외부 URL로 연결되는 정보 아이콘을 추가하는 방법을 단계별로 설명합니다.1. TopAppBar 구현 위치 결정: MainActivity처음에는 각 화면(HomeScreen)에 TopAppBar를 추가할까 고민했지만, 앱 전체의 일관성 및 확장성을 위해 MainActivity.kt의 MainScreen Composable 내에 Scaffold를 사용해 ..

Jetpack Compose + Firebase 기반 게시판 앱 개발기 이 글은 Jetpack Compose, Firebase Realtime Database, Hilt, Compose Destinations를 기반으로 한 게시판 앱 개발 과정을 정리한 것입니다. 게시글은 최근순으로 표시되며, 댓글 기능도 포함합니다.1. 프로젝트 구성KotlinJetpack ComposeFirebase Realtime DatabaseHilt (DI)Compose Destinations (Navigation)2. 게시글 리스트 화면Firebase에서 게시글 데이터를 읽고, 최근 등록순으로 보여줍니다.LazyColumn( reverseLayout = true // 최신 글이 위로) { items(posts) { ..

Jetpack Compose + Firebase + Google Maps 완벽 가이드 이 글은 Jetpack Compose를 활용하여 Firebase Realtime Database 및 Google Maps, WebView를 사용하는 앱을 개발하면서 겪었던 문제들과 그 해결법을 정리한 개발 노트입니다. 1. Firebase에서 반경 필터링Firebase Realtime Database는 위치 기반 검색을 기본 제공하지 않기 때문에, 클라이언트에서 위도/경도를 기준으로 거리 계산을 해야 합니다.▶ 거리 계산 함수 (Haversine Formula)fun haversine(lat1: Double, lon1: Double, lat2: Double, lon2: Double): Double { val R =..

Jetpack Compose로 DropDown과 카테고리 버튼 UI 만들기 이 글에서는 Jetpack Compose로 드롭다운 메뉴를 만들고, JSON 형태의 카테고리 데이터를 3x3 버튼 그리드 형태로 화면에 표시하는 방법을 정리합니다.🟡 1. DropDown (Spinner 형태) 버튼 만들기아래는 Compose의 DropdownMenu를 이용하여 간단한 드롭다운 UI를 구성하는 예시입니다.@Composablefun SimpleDropdownMenu( options: List, onOptionSelected: (String) -> Unit) { var expanded by remember { mutableStateOf(false) } var selectedOption by re..

제트팩 구성에서 스크롤 효과가 있는 무너지는 앱바 생성• 이 기사는 사용자 스크롤링에 동적으로 응답하는 현대 모바일 앱의 인기 있는 UI 요소인 제트팩 컴포즈에서 접히는 앱바의 구현을 자세히 설명합니다.• 설계에는 두 개의 TopAppBar가 포함됩니다. 하나는 접힌 상태(필수 정보만 표시)를 위한 것이고 다른 하나는 확장된 상태(헤더 및 자세한 내용 표시)를 위한 것입니다.• 스캐폴드는 메인 화면 컨테이너로 사용되어 스낵바 및 플로팅 액션 버튼과 같은 다른 UI 구성 요소를 쉽게 통합할 수 있습니다.• 확장된 AppBar의 높이는 사용자 정의 가능하며(이 예에서 180.dp), 'windowInsets = WindowInsets(0)'는 상태 표시줄에서 추가 패딩을 제거합니다.• ‘LazyVertica..

Jetpack Compose에서 Navigation 구현하기: compose-destinations와 AnimatedBottomBarCompose 사용 소개이번 포스트에서는 Jetpack Compose에서 네비게이션을 구현하는 방법을 다룹니다. 특히, compose-destinations와 AnimatedBottomBarCompose 라이브러리를 사용하여 스타일리시한 하단 네비게이션 바를 만드는 방법을 설명합니다.1. 의존성 추가먼저, build.gradle 파일에 필요한 의존성을 추가합니다.Kotlin dependencies { implementation("io.github.raamcosta.compose-destinations:core:1.7.0-beta") ksp("io.github.ra..

Compose to Kotlin Compatibility 을 구글에서 검색을 해 보았습니다. 여기서 첫번째 나온 것을 클릭해 봅니다. 한국에 위치하고 있고 크롬의 설정에 따라 다른 결과를 얻을지도 모르지만, 저의 경우는 아래와 같이 한국어에 페이지가 나옵니다. 이 페이지에서 나오는 것으로 봐서는 1.4.3 까지 패치된 것으로 오해할 수 있도록 보여 주고 있습니다. (2024.01.04 현재까지) 하지만, 이는 구글이 페이지를 한국어로 전환을 하지 않아 발생하는 현상으로 보입니다. 그래서 저는 저기 나온 url 의 ko을 en으로 변경해 보겠습니다. 여기서 나오는 버전의 표기는 1.5.7 이 최신 버전으로 보입니다. (2024.01.04 현재) 향상 최신 버전을 확인하고 작성을 해 두는 것이 최선(?)일 ..

https://android-developers.googleblog.com/2023/08/whats-new-in-jetpack-compose-august-23-release.html What’s new in the Jetpack Compose August ’23 release News and insights on the Android platform, developer tools, and events. android-developers.googleblog.com 이 글은 위 링크에서 퍼온 글입니다. 앱 개발에서 차지하는 비용(?) 중에서 UI 구성은 많은 부분을 할애하도록 합니다. xml layout 을 이용해서 작업을 할 때보다는 compose을 활용하는 것이 효율성이나, 재활용성에 있어서는 많은 도움..

xml layout 에서 jetpack compose로 이전을 하는 과정에서 범하는 실수 중에 한 가지를 기술해 두고자 합니다. 위 그림과 같이 카카오 X으로 로그인하는 페이지를 jetpack compose로 만들어 간다고 했을 때 이렇게 구현을 하게 될 듯합니다. TextButton(onClick = { doKakaoLogin() }) { Image( painter = painterResource(id = R.drawable.kakao_login_medium_wide), contentDescription = "", modifier = Modifier .width(300.dp) .height(45.dp) ) } 카카오에서 지원해 주는 로그인 연동 버튼이미지를 넣어서 이미지 버튼을 하나 만들어 보려고 했습..

앱을 만들다 보면 지도가 들어가는 앱을 만들게 되는 경우가 있다. GoogleMap API 등을 이용해서 앱을 만들게 되는 데, 이번에는 Jetpack Compose 기반의 GoogleMap 을 구현해 볼까 한다. 아직은 예전 java 코드에서 kotlin 코드로 이전 작업을 하는 중이라 미완성의 모습으로 보이는 데, 일단, 앱에 구글맵을 넣어 보았다. 먼저 gradle 파일에 추가해야 하는 것들은 다음과 같다. // compose Maps implementation 'com.google.android.gms:play-services-maps:18.1.0' implementation "com.google.accompanist:accompanist-permissions:0.26.0-alpha" implem..