나만을 위한 블로그

※ 공유 요소 전환은 컴포즈 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..

바텀 시트를 만들던 도중 아래처럼 바텀 시트의 내용물들이 시스템 네비게이션 바와 겹쳐서 표시되는 현상이 일어났다.  원인은 간단했다. TextField에서 키보드를 띄우기 위해 키보드 inset을 고려해서 아래처럼 코드를 짰었다. ModalBottomSheet( // ... windowInsets = WindowInsets.ime,) 이렇게 하고 앱을 실행하면 위의 사진처럼 시스템 네비게이션 바와 바텀 시트 안의 내용물이 겹쳐서 표시될 수 있다.해결하려면 아래처럼 수정하면 된다. 바텀 시트 안에서 Column을 사용하기 때문에 아래처럼 수정했음을 참고한다. ModalBottomSheet( // ... windowInsets = WindowInsets.systemBars.only(Wi..

바텀 네비게이션 바가 아니라 버튼을 눌렀을 때 화면을 이동하는 방법을 확인한다.바텀 네비게이션 바로 화면 이동을 구현한 코드와 같은 코드를 쓰기 때문에 세세한 코드는 이전 포스팅을 참고한다. https://onlyfor-me-blog.tistory.com/764 [Android Compose] 컴포즈 화면 이동 구현하는 법2024.09.10 - 의존성, 코드 수정 Compose를 사용하지 않는다면 인텐트와 startActivity()를 써서 다른 액티비티로 이동할 수 있었다.하지만 Compose에선 startActivity() 대신 네비게이션 라이브러리를 써서 화onlyfor-me-blog.tistory.com 아래는 전체 예시 코드다. import android.os.Bundleimport androi..

2024.09.10 - 의존성, 코드 수정 Compose를 사용하지 않는다면 인텐트와 startActivity()를 써서 다른 액티비티로 이동할 수 있었다.하지만 Compose에선 startActivity() 대신 네비게이션 라이브러리를 써서 화면 이동을 구현한다. 코드를 보기 전에 왜 Compose에선 이딴이런 식으로 화면 이동을 구현해야 하는 것인가?이 글을 보는 사람이라면 Compose가 선언형 방식으로 UI를 구성한다는 건 알고 있을 것이다. 이 특징 때문에 네비게이션 라이브러리를 사용하는 것이다.안드로이드의 전통적인 화면 전환 방법인 startActivity()는 명령형 프로그래밍 패러다임을 따르는 함수다. 그래서 선언형 프로그래밍 패러다임인 Compose와는 잘 맞지 않는다. 안드로이드 공식문..

XML 뷰에선 간단하게 쓸 수 있던 스낵바가 Compose에선 좀 번거롭다. 아래는 스낵바를 사용하는 예시 컴포저블이다. @Composablefun SnackBarExample() { val snackBarHostState = remember { SnackbarHostState() } val coroutineScope = rememberCoroutineScope() Scaffold( snackbarHost = { SnackbarHost(hostState = snackBarHostState) } ) { innerPadding -> Column( modifier = Modifier .padding(innerPaddi..

이 포스팅에선 material 3 기준으로 당겨서 새로고침 화면을 구현한 예시를 확인한다.이 글의 바탕이 된 코드는 아래 미디엄 링크를 참고했다. 그러나 글 내용 중 rememberPullRefreshState는 material 3에서 사용할 수 없는 API기 때문에 다른 걸 사용하도록 조금 수정했다. https://medium.com/@anandgaur22/jetpack-compose-pull-to-refresh-fafb4d1a5ea6 Jetpack Compose: Pull to RefreshIntroductionmedium.com 당연히 예시기 때문에 실제로 사용하려면 반드시 리팩토링한 후 사용한다.아래는 구현 완료 후 에뮬레이터에서 테스트한 GIF다.  이제 코드를 확인해보자.뷰모델을 같이 사용하기..

Compose로 앱을 만들면 Scaffold라는 컴포저블을 자주 쓰게 된다.디벨로퍼에서 설명하는 Scaffold는 아래와 같다. https://developer.android.com/develop/ui/compose/components/scaffold?hl=ko Scaffold  |  Jetpack Compose  |  Android Developers이 페이지는 Cloud Translation API를 통해 번역되었습니다. Scaffold 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Material Design에서 Scaffold는 복잡한 사용자 인터페developer.android.comMaterial Design에서 Scaffold는 복잡한 UI를 위한 표준화된 플..

Compose에서 말하는 상태는 아래와 같다. https://developer.android.com/develop/ui/compose/state?hl=ko 상태 및 Jetpack Compose | Android Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. 상태 및 Jetpack Compose 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 앱의 상태는 시간이 지남에 따라 developer.android.com 앱의 상태는 시간이 지남에 따라 변할 수 있는 값이다. Room DB부터 클래스 변수까지 모든 항목이 포함된다. 모든 안드로이드 앱에선 유저에게 상태가 표시된다. 아래는 상태의 몇 가지 예다. - 네트워크 연결을 설정할..