목록Android (63)
시배's Android
Mavericks + Compose + Naver API Android 앱 개발에서 최신 기술인 Mavericks와 Compose를 활용하여 Naver API를 사용하여 책을 검색하는 앱을 구현해보겠습니다. MavericksState data class SearchUiState( val keyword: String = "", val books: Async = Uninitialized ) : MavericksState 책 검색 앱에서 사용할 SearchUiState 클래스는 Mavericks의 MavericksState 인터페이스를 구현합니다. 이 클래스는 책 검색 UI의 상태를 관리하고, 검색어 키워드와 검색 결과인 책 목록을 저장합니다. Async 클래스는 비동기 작업을 처리하기 위해 Mavericks..
Mavericks 매버릭스(Mavericks)는 Airbnb, Tonal 및 기타 대형 앱에서 사용되는 안드로이드 MVI 프레임워크로, 쉽게 배울 수 있으면서도 복잡한 플로우를 지원할만큼 강력합니다. 매버릭스를 만들 때 목표는 제품을 더 쉽고 빠르게, 더 재미있게 개발하는 것이었습니다. 우리는 매버릭스가 성공하기 위해 안드로이드 개발에 처음으로 참여하는 사람들에게도 쉽게 배울 수 있어야 하지만 Airbnb에서 가장 복잡한 화면도 지원할 수 있어야 한다고 믿습니다. 매버릭스는 Airbnb의 수백 개의 화면에서 사용되며, 새로운 화면의 100%에서 사용되고 있습니다. 또한 10억 개 이상의 다운로드를 가진 앱부터 작은 샘플 앱까지 무수히 많은 다른 앱에서도 채택되고 있습니다. 매버릭스는 Android Jet..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bWia4g/btsowXmAEvc/9sgCcAuax94Am9mOmuCyf1/img.png)
안드로이드 앱 개발에서 MVI (Model-View-Intent) 아키텍처는 현재 많은 개발자들에게 인기가 높아지고 있는 패턴입니다. MVI는 앱의 상태 관리와 UI 처리를 효과적으로 분리하여 앱의 유지보수성을 향상시키고, 디버깅과 테스트를 용이하게 만드는 장점을 가지고 있습니다. MVI 아키텍처란? MVI 아키텍처는 기존의 MVVM(Model-View-ViewModel) 패턴에서 발전된 아키텍처로, 상태 중심의 설계를 강조합니다. 앱의 상태를 하나의 단일 소스로 관리하고, 상태가 변경될 때마다 UI를 업데이트하는 방식을 채택합니다. MVI에서는 세 가지 주요 구성 요소가 있습니다. Model: 앱의 상태를 나타내는 데이터 모델입니다. 상태 변경에 따라 업데이트되며, 뷰와 독립적으로 존재합니다. View..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/waG2i/btsnFePYQDt/InloS8ef7RtIlCnA0XK2N1/img.png)
val context = LocalContext.current val activity = context as AppCompatActivity 일반적으로 compose에서 activity가 필요로 할 경우 위와 같은 코드를 통해 가져올 수 있습니다. 하지만 Hilt가 적용되어 있을 경우 이 부분에서는 크래시가 발생하였고 FragmentContextWrapper를 Activity로 변환할 수 없다는 내용이었습니다. FragmentContextWrapper 클래스는 ContextWrapper를 상속받고 있었고, HIlt 내부에서 사용하는 ViewComponentManager에서 관리되고 있었습니다. 해결 방법은 FragmentComponentManager 클래스의 findActivity 메서드를 이용하는 것입..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bus7fW/btsnF5roRNo/iBizpaszzUWza7JnsNM6DK/img.png)
Layout Compose의 Layout은 레이아웃을 커스터마이징 하는 데 사용됩니다. Layout은 자체적인 측정 및 배치 로직을 가지며, 하위 요소들을 포함하여 화면에 표시할 위치와 크기를 결정합니다. 먼저, Layout 클래스를 상속하여 사용자 정의 레이아웃을 작성해보겠습니다. 다음은 커스텀 레이아웃을 구현하기 위한 기본적인 코드입니다. import androidx.compose.foundation.layout.Layout import androidx.compose.runtime.Composable import androidx.compose.ui.LayoutModifier import androidx.compose.ui.Modifier import androidx.compose.ui.geometry..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/sRuG1/btsnj8t9SYT/NmKl2E5Uv65V4jOLTfRHbk/img.gif)
CollapsingToolbarLayout CollapsingToolbarLayout은 스크롤 동작에 따라 다양한 효과를 적용할 수 있습니다. 예를 들어 스크롤을 아래로 내릴 때 툴바가 축소되면 화면 상단에 고정되고 이미지가 페이드아웃되는 효과 등을 설정할 수 있습니다. 위 Gif처럼 Compose에서 구현을 하려면 TopAppBarDefaults에 정의되어 있는 ScrollBehavior와 LargeTopAppBar를 통해 구현할 수 있습니다. @OptIn(ExperimentalMaterial3Api::class) @Composable fun Test() { val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior() Scaffol..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bQpGZG/btsmRqDeCvK/mpsUb4rK8QXnt6wJCN7Cik/img.png)
Recomposition Compose의 recomposition은 UI를 업데이트하기 위해 필요한 변경 작업을 식별하고 수행하는 과정을 의미합니다. Recomposition은 선언적인 방식으로 작성된 Composable 함수들이 동작하는 핵심 메커니즘 중 하나입니다. Compose에서는 UI를 구성하는 각각의 Composable 함수는 독립적인 단위로 작동합니다. Composable 함수는 입력된 상태(State)에 따라 UI를 그리고 업데이트하는 역할을 담당합니다. Composable 함수는 상태가 변경될 때마다 자동으로 호출되고, 변경된 부분만 다시 그리고 업데이트합니다. Recomposition은 Composable 함수가 동일한 입력에 대해 동일한 출력을 생성하는지 확인하기 위해 수행됩니다. C..