나만을 위한 블로그

이 포스팅에선 LazyVerticalGrid에 여러 사진들이 표시될 때 드래그로 여러 사진들을 선택하는 법을 확인한다.코드는 아래와 같다. import androidx.compose.animation.core.animateDpimport androidx.compose.animation.core.updateTransitionimport androidx.compose.foundation.Imageimport androidx.compose.foundation.backgroundimport androidx.compose.foundation.borderimport androidx.compose.foundation.layout.Boximport androidx.compose.foundation.layout.aspe..

※ 모든 코드는 예시 코드기 때문에 실제로 사용하려면 반드시 리팩토링한다 이전 포스팅에서 이어진다. https://onlyfor-me-blog.tistory.com/1129 [Android Compose] Supabase를 활용한 CRUD 구현 - 1 -이 포스팅에선 Supabase를 활용한 CRUD를 간단하게 구현한 예시를 확인한다.이름, 가격 TextField의 값과 카메라로 촬영하거나 갤러리에서 photo picker로 가져온 사진을 같이 supabase에 업로드하고 리스트onlyfor-me-blog.tistory.com 코드는 supabase의 안드로이드 예시 문서를 바탕으로 작성했다.그러나 SQL부터 막히고 문서의 코드들이 하나의 프로젝트로 완벽하게 작동하지 않아서 좀 수정했다. https://..

이 포스팅에선 Supabase를 활용한 CRUD를 간단하게 구현한 예시를 확인한다.이름, 가격 TextField의 값과 카메라로 촬영하거나 갤러리에서 photo picker로 가져온 사진을 같이 supabase에 업로드하고 리스트 형태로 표시하는 예제를 구현할 것이다. supabase를 안드로이드에 연동하려면 크게 아래와 같은 작업들을 해야 한다. supabase 프로젝트 생성, 테이블 정의supabase, ktor, hilt 라이브러리 추가CRUD 기능 구현 + UI 구현 supabase에 새 프로젝트를 만드는 것부터 시작한다. 이 포스팅에선 구글 클라우드 콘솔 설정까지 한 후 다음 포스팅에서 코드들을 확인한다. https://supabase.com/dashboard/projects Dashboard ..

이 포스팅에선 Compose를 사용해 리스트뷰를 만들고 아이템을 선택하면 체크상태를 변경해 표시하는 예제를 확인한다. 전체 코드는 아래 영상을 참고했다. https://www.youtube.com/watch?v=pvNcJXprrKM 전체 코드는 아래와 같다. import androidx.compose.foundation.clickableimport androidx.compose.foundation.layout.Arrangementimport androidx.compose.foundation.layout.Rowimport androidx.compose.foundation.layout.fillMaxSizeimport androidx.compose.foundation.layout.fillMaxWidthimpo..

※ 모든 코드는 예제기 때문에 실제로 사용하려면 리팩토링, 예외처리를 추가한다 ※ 서버 통신 없이 앱에 저장된 이미지를 사용해 구현했다 이번엔 컴포즈를 사용해서 정해진 이미지들을 계속해서 표시하는 무한 캐러셀 예제를 확인한다.실행하면 아래처럼 작동한다.  코드는 아래와 같다. import androidx.compose.foundation.Imageimport androidx.compose.foundation.layout.fillMaxSizeimport androidx.compose.foundation.lazy.LazyRowimport androidx.compose.foundation.lazy.itemsimport androidx.compose.foundation.lazy.rememberLazyListSt..

※ 모든 코드는 예시 코드기 때문에 실제로 사용하려면 반드시 리팩토링하고 프로젝트에 맞는 예외처리를 추가해야 한다 이 포스팅은 아래의 영상을 바탕으로 작성했다. https://www.youtube.com/watch?v=Q0Njj-rfEXE 이미지 압축은 구글링해 보면 다양한 방법으로 구현할 수 있다. 아래 코드도 그 예시 중 하나일 뿐이니 이렇게도 구현할 수 있다 치고 넘어가면 좋을 듯하다.먼저 이미지 압축을 담당하는 ImageCompressor의 구현은 아래와 같다. import android.content.Contextimport android.graphics.Bitmapimport android.graphics.BitmapFactoryimport android.net.Uriimport android..

이전 포스팅에서 공유 요소 전환 구현에 사용한 코드에 쓰인 개념들을 확인한다.먼저 SharedTransitionLayout부터 확인한다. https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#SharedTransitionLayout(androidx.compose.ui.Modifier,kotlin.Function1) androidx.compose.animation  |  Android Developersandroidx.appsearch.builtintypes.propertiesdeveloper.android.com@ExperimentalSharedTransitionApi@Composablefun Sh..

※ 공유 요소 전환은 컴포즈 1.7.0부터 사용할 수 있으며 아직 실험 단계라 추후 변경될 수 있음에 주의한다 이 포스팅에서 확인할 것은 안드로이드 디벨로퍼를 바탕으로 공유 요소 전환을 컴포즈로 어떻게 구현하는지다. 공유 요소 전환이란 이름은 생소하지만 앱을 쓰다 보면 한 번쯤은 어디서 봤을 법한 것이다. https://developer.android.com/develop/ui/compose/animation/shared-elements?hl=ko 연락처 리사이클러뷰에서 아이템을 클릭하면 연락처의 사진이 위로 이동하면서 다음 화면으로 이동한다. 플러터를 해 봤다면 Hero 애니메이션과 유사하게 작동하는 걸 알 것이다.이것을 컴포즈로 어떻게 구현할까? 이와 관련한 공식문서가 존재한다. https://dev..

컴포즈로 앱을 만들면서 뷰모델을 구현하다 보면 상태 관리와 관련해서 2가지 선택지를 마주하곤 한다. MutableState와 MutableStateFlow가 그것이다. SharedFlow는 최신 상태를 자동으로 유지하지 않아서 이벤트 기반 작업에 자주 쓰이기 때문에 UI 상태 관련 내용을 다룰 이 포스팅에선 생략하고, MutableState와 MutableStateFlow의 차이를 확인한다. MutableState MutableState는 컴포즈에서 값을 읽고 쓸 수 있는 상태 홀더로, 값의 변경사항을 컴포즈가 자동 추적할 수 있게 한다.값이 바뀌면 안드로이드 시스템은 이 상태에 의존하는 모든 컴포저블 함수들이 리컴포지션되게 한다. 그래서 유저 상호작용, 앱 상태의 변화에 따라 UI를 업데이트해야 하는 ..

이 포스팅에선 컴포즈에서 마진을 설정하는 방법들을 정리한다. 앱을 만들면 필수적으로 마진, 패딩을 입혀야 하는 경우가 있는데 패딩은 Modifier의 padding()을 사용하면 되지만 마진은 다양한 방법들이 있어서 정리하려고 한다. Modifier.padding() 정확히는 요소 주변에 공간을 추가해서 마진처럼 보이게 하는 방법이다. 내부 컴포넌트와 부모 레이아웃 사이에 공간을 추가한다. @Composablefun Test() { Scaffold( modifier = Modifier.fillMaxSize(), ) { innerPadding -> Column( modifier = Modifier .padding(innerP..