나만을 위한 블로그

바텀 시트를 만들던 도중 아래처럼 바텀 시트의 내용물들이 시스템 네비게이션 바와 겹쳐서 표시되는 현상이 일어났다.  원인은 간단했다. 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부터 클래스 변수까지 모든 항목이 포함된다. 모든 안드로이드 앱에선 유저에게 상태가 표시된다. 아래는 상태의 몇 가지 예다. - 네트워크 연결을 설정할..

Compose로 앱을 만들다가 하단 탭이 필요한 시점이 와서 구현하고, 어떻게 구현했는지 그 방법을 정리해 둔다. 먼저 sealed class로 앱에서 표시할 화면을 정의해 둔다. 꼭 sealed class가 아니라도 상관없다. sealed class AppScreen( val route: String, @StringRes val resourceId: Int, ) { object Home: AppScreen("home", R.string.home) object Favorite: AppScreen("favorite", R.string.favorite) object MyPage: AppScreen("mypage", R.string.my_page) } 이 클래스는 본인이 어떤 화면들을 만들 건지에 따라 구현이..

Compose로 앱을 만들던 중 CircularProgressIndicator를 써서 로딩 뷰를 구현하고 실행했더니 아래 에러가 발생했다. android java.lang.NoSuchMethodError: No virtual method at(Ljava/lang/Object;I)Landroidx/compose/animation/core/KeyframesSpec$KeyframeEntity; in class Landroidx/compose/animation/core/KeyframesSpec$KeyframesSpecConfig; or its super classes (declaration of 'androidx.compose.animation.core.KeyframesSpec$KeyframesSpecConfi..

틈틈이 Compose 공부용으로 뉴스 api를 사용한 뉴스 조회 앱을 만들고 있는데, 뷰모델에 함수를 생성한 후에 액티비티에서 호출하면 ApiResult.Success가 호출되지 않는 현상이 발생했다. 아래는 오류가 발생하던 메인 액티비티의 구현으로, 아직 LazyColumn을 사용하기 전의 코드다. @AndroidEntryPoint class MainActivity : ComponentActivity() { private val newsViewModel: NewsViewModel by viewModels() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeNe..