Android/Compose

Compose Multiplatform - shadow open source contribute 도전기https://github.com/adamglin0/compose-shadow GitHub - adamglin0/compose-shadow: a kotlin library for draw shadow in compose multiplatforma kotlin library for draw shadow in compose multiplatform - adamglin0/compose-shadowgithub.com내 게시글 중 조회수가 가장 높은 게시글이 부분은 사람들이 필요로 하고 다른 기술 블로그에는 잘 없는 정보라고 생각해서 이를 라이브러리화 시키는 곳에 contribute를 통해 제공한다면 더 나은 생..

Orbit 없이 MVI 패턴 적용기사이드 프로젝트를 진행하면서 단방향 데이터 흐름을 구현하기 위해 sealed class를 사용하다 보니 nav에서 back을 할 경우 이전 viewmodel에 존재하는 상태 값 때문에 자동으로 navigation 되는 현상을 발견하였다. 이를 해결해보고자 한다.MVVM 적용 시@HiltViewModelclass ExampleViewModel@Injectconstructor( // inject value) : ViewModel() { private val _state = MutableStateFlow(ExampleState.Init) val state = _state.asStateFlow() // ...}Compose에서 해당 방식을 이용하면 nav..

아이나비 맵 SDK Compose로 사용해보기아이나비 맵 SDK는 컴포즈 버전이 따로 존재하지 않고 xml로 되어있는 layout을 이용하거나 Fragment 인스턴스를 이용해서 사용해야한다.해당 작업을 진행하고 나면 아이나비 맵뿐만 아니라 다른 지도 sdk도 compose를 이용하여 작성할 수 있을 것이라고 생각한다.1안 xml layout을 이용하여 AndroidView로 Wrapping@Composablefun InaviMapUsingXmlView( modifier: Modifier = Modifier,) { val context = LocalContext.current AndroidView( modifier = modifier.fillMaxSize(), f..

[안드로이드] Inner Shadow, Drop Shadow 처리하는 방법사이드 프로젝트를 진행하면서 figma를 확인하여 UI 작업을 하고 있었다. figma에 그려진 UI 중에 Effect란에 Inner Shadow, Drop Shadow가 포함되어 있는 부분이 존재해서 이를 처리할 방법을 궁리해보거나 자료를 찾아보았다.Modifier.shadow그림자를 처리하기 위해 Modifier에서 기본적으로 제공하는 함수@Stablefun Modifier.shadow( elevation: Dp, shape: Shape = RectangleShape, clip: Boolean = elevation > 0.dp, ambientColor: Color = DefaultShadowColor, ..

[안드로이드] Jetpack Compose UI Test 맛보기사이드 프로젝트를 진행하면서 UI Preview가 존재하지만 Test 코드는 어떻게 짜야할지 찾아보았습니다.https://developer.android.com/codelabs/jetpack-compose-testing?hl=ko#0 Jetpack Compose에서 테스트  |  Android Developers이 Codelab에서는 Jetpack Compose로 만든 UI를 테스트하는 방법을 알아봅니다. 격리 테스트, 디버깅 테스트, 시맨틱 트리, 동기화를 알아보면서 첫 번째 테스트를 작성합니다.developer.android.com의존성 추가// libs.versions.tomiui-test-manifest = { group = "andr..

Compose 밑줄 텍스트와 클릭 가능하게 만들기사이드 프로젝트를 진행하면서 아래 사진과 같은 UI 기능을 개발해야 하는 상황에 봉착했습니다.텍스트는 유지하면서 이용약관 과 개인보호 정책에 underline이 들어가야 하고, 두 가지 글자는 다른 onclick을 부여해야 했습니다.AnnotatedStringThe basic data structure of text with multiple styles하나의 텍스트 안에 다양한 스타일을 적용할 수 있는 객체getStringAnnotations 을 이용하여 클릭 범위 필터링 가능코드@Composableinternal fun TermsText( onClickTermsOfUse: () -> Unit, onClickPrivacyPolicy: () -> ..

Composable 함수의 속성 @Composable 어노테이션을 통해서 함수나 표현식의 타입을 변경 해당 타입에 일부 제약 사항이나 특성을 부여 Compose Runtime Composable 함수가 사전에 정의된 특성을 준수하도록 가정 효과 병렬적인 Composition 우선순위에 따른 임의의 Composition 정렬 효과적인 Recomposition 위치 기억법 (positional memoization) 호출 컨텍스트 (Calling context) Compose Compiler는 일반적인 컴파일러 실행단계 중에 동작 Composable 함수의 중간 표현인 Intermediate Representation을 변환하여 추가적인 정보 부여 함수의 매개변수 목록의 끝에 새롭게 추가된 Composer ..

Composable Function Jetpack Compose에서 가장 기본이 되는 요소 Composable Function의 의미 Composable 트리 구조 작성에 사용 Compose Runtime이 메모리에서 Composable 함수를 하나의 node로 이해 Composable Function 작성 방법 @Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Text( text = "Hello $name!", modifier = modifier ) } @Composable 어노테이션을 이용하여 Composable 함수 작성 가능 어노테이션의 의미는 컴파일러에게 이 함수가 트리의 한 노드로 작동할 것이라는 의도 전달 함수에서..

CompositionLocalProvider? 사이드 프로젝트를 진행하면서 아래와 같은 코드를 작성하게 되었습니다. CompositionLocalProvider(LocalAnalyticsHelper provides analyticsHelper) { FakeGpsTheme( darkTheme = darkTheme, androidTheme = shouldUseAndroidTheme(uiState), disableDynamicTheming = shouldDisableDynamicTheming(uiState), ) { FakeGpsApp(networkMonitor = networkMonitor) } } 해당 코드에서 CompositionLocalProvider 이 무슨 역할을 해주는지 알아보겠습니다. Compo..