사전 setting Test를 작성하기 위한 의존성을 추가하자 androidTestImplemenation("androidx.compose.ui:ui-test-junit4:$compose_version") debugImplemenation("androidx.compose.ui:ui-test-manifest:$compose_version") AndroidTest 패키지 내부에 Test파일을 생성하자 Test Rule를 생성하자. @get:Rule val rule = createComposerRule() 이 테스트룰은 우리가 테스트를할 content를 세팅하거나 테스트 내에서 앱과 상호작용할 수 있게 만들어 줍니다. 테스트 클래스는 항상 test rule이 정의되어있어야합니다. 테스트 코드 작성 @Test ..
기본적으로 Android Studio에서 Base Compose Activity를 생성하면 다음과 같은 기본적인 파일을 얻을 수 있습니다. setContent{ ProjectTheme { Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background){ Greeting("ANDROID") } } } 위의 Theme 내부에 있는 요소들은 Material 디자인 가이드에 따라, 앱에 일관된 모양이나 Typography, Color, Shape들을 제공할 수 있는 파일들이다. 코드를 보면 ProjectTheme{}안에 우리가 원하는 Composable을 넣는 것을 볼 수 있다. 저 ProjectTheme{}는 무엇일까? Th..
오늘은 MotionLayout을 사용하여 애니메이션을 구현해보려구 합니다. Jetpack compose를 사용하면서 하나의 animation을 구현하려고 할 때, 변경하는 요소마다 animate value를 적용해야하는게 너무 힘들었던 경험이 있습니다. ( 쌓여가는 animateState들...) 애니메이션을 한번에 처리하기 좋은 MotionLayout을 사용하여 애니메이션을 처리하는 방법을 알아보려구 합니다. 자꾸자꾸 MotionLayout이라고 하는데 무엇이냐 MotionLayout은 ConstraintLayout의 서브 클래스이며 ConstraintLayout의 다양한 레이아웃 기능을 기초로 가지고 있다. MotionLayout은 레이아웃 전환과 복잡한 모션 처리 사이를 연결한다. 라고 Androi..
rememberUpdatedState 공식문서에 따르면 '값이 변경되는 경우 다시 시작되지 않아야하는 효과에서 값 참조에 사용합니다' 이 경우에 rememberUpdatedState를 사용한다는데, 이런 경우가 어떤 경우가 있는지 잘 모르기에 타 사이트에 있는 예제를 참고해보겠습니당. https://proandroiddev.com/jetpack-compose-side-effects-iii-rememberupdatedstate-c8df7b90a01d Jetpack Compose Side-Effects III— rememberUpdatedState rememberUpdatedState helps keep an updated reference to variables in our compose side-effe..
오늘은 위와 같이 Jetpack Compose로 Swipe하여 삭제(dismiss)하는 Composable를 만들어보려고합니다. Jetpack Compose는 기본적으로 SwipeToDismiss Composable를 제공하고 있습니다. 하지만 Material3 Stable Release 버전에서는 지원하지 않고 있습니다. ( Material2는 지원함 ) 하지만 알파버전인 1.1.0-alpha04 버전에서는 지원하니, 이 버전을 통해 구현해도 좋을 것 같습니다. 알파버전을 사용하지 않는다면 https://androidx.tech/artifacts/compose.material/material/1.0.0-alpha09-source/androidx/compose/material/Swipeable.kt.ht..
컴포즈는 Composition을 통해서 @Composable function들이 node로 변환이 되고, 트리에 등록되는 과정을 통해서 UI를 그려나가게 됩니다. 이 과정을 위해서 Compose에서는 GapBuffer라는 자료구조를 사용합니다. GapBuffer Gap buffer는 현재 편집중인 텍스트를 효율적으로 편집하고 저장하는데 주로 사용되는 자료구조입니다. Compose에서는 Gap Buffer를 사용한 구조를 Slot Table이라고 부르고 있습니다. 배열과 비슷하지만 여러 변경 사항을 처리하기 위해서 cursor 와 gap이 존재합니다. Composable 계층을 실행함에 따라 이 데이터 구조를 호출할 수 있고, 항목을 입력할 수 있습니다. 커서가 있는 곳이 현재 계층에서 실행되고 있는 지점..
Jetpack compose의 최적화 Mashup 12기 프로젝트를 진행하면서, 앱 배포 이후 유지보수 기간을 가지게 되었습니다. 앱을 동작시키면서 Layout Inspector로 recomposition count를 통해 recomposition이 많이 일어나는 부분이 없는지 찾아보면서 유지보수를 진행하고 있는데요~ 자연스럽게 Jetpack compose의 최적화에 대해서 관심이 생기게되었습다. 일단 글에 들어가기 앞서 recomposition이 무엇인지 언제 일어나는지 파악할 필요가 있습니다. recomposition recomposition(재구성)은 입력이 변경될 때, 구성 가능한 함수를 다시 호출하는 프로세스입니다. 이것은 함수의 입력이 변경될 때 발생합니다. Compose가 새 입력을 기반으로..
프로젝트를 진행하면서, 이미지를 흐리게 처리해야 하는 부분이 생겨서 jetpack compose를 이용하면서 이미지를 blur 처리하는 방법을 공유하면 좋을 것 같아서, 이미지 블러 처리에 대한 글을 작성하게 되었습니다~! 제가 최종적으로 만들려고 하는 카드는 다음과 같습니다. 하단에 이미지가 blur 처리되어 있는데요. 이것을 compose로 구현하기 위해서는 어떻게 구현을 해야 하는지 알아보도록 하겠습니다. API 31 이전까지는 Render Script를 사용하여 Blur 처리를 할 수 있었습니다. val bitmap = BitmapFactory.decodeResource( LocalContext.current.resources, R.drawable.your_image ) val rs = Rende..
