나만을 위한 블로그

먼저 앱 gradle에 라이브러리 의존성을 추가한다. implementation(platform("androidx.compose:compose-bom:2023.06.01")) 그리고 적당한 이미지를 하나 준비하고 drawable 폴더에 넣어둔다. 아래는 액티비티의 전체 코드다. import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.f..

리스트에 여러 아이템을 불러올 때 대개 로딩 시간이 걸리기 마련이다. 이 때 흰 화면만 덩그러니 띄워두면 유저는 데이터를 불러오는 중인지 에러가 난 건지 모를 수밖에 없기 때문에 로띠 애니메이션을 돌리는 등의 데이터를 불러오고 있다는 애니메이션을 표시한다. 흔히 스켈레톤 뷰라고도 하는 기법도 유저에게 로딩 중임을 표시하는 방법인데, 이 포스팅에선 별도 라이브러리 없이 순수 컴포즈만으로 이를 구현하는 방법을 포스팅한다. 먼저 파일을 하나 만든다. import androidx.compose.animation.core.animateFloat import androidx.compose.animation.core.infiniteRepeatable import androidx.compose.animation.cor..

여러 아이템들이 표시되는 화면의 맨 위에서 계속 스크롤을 시도하면 위에서 재활용 아이콘이 나오고, 이 때 손을 떼면 화면에 표시되는 데이터들을 새로고침하는 기능이 있다. 안드로이드에선 이를 Swipe Refresh라고 부른다. 이 포스팅에선 컴포즈에서 이걸 구현한 예제 코드를 확인한다. 먼저 이 예제에서 사용한 라이브러리는 현재 deprecated 되었음에 주의한다. 그래서 실제로 사용한다면 이 라이브러리 대신 다른 걸 사용하는 게 맘 편할 것이다. 여기선 예제 포스팅이기 때문에 그냥 사용했다. implementation("com.google.accompanist:accompanist-swiperefresh:0.27.0") 그리고 뷰모델을 만든다. import androidx.lifecycle.ViewM..

먼저 뷰모델 의존성을 추가한다. implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1") 그리고 뷰모델을 만든다. 별다른 API 통신 없이 뷰모델 사용법만 보여주기 위해 간단하게 작성했다. import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.setValue import androidx.compose.ui.graphics.Color import androidx.lifecycle.ViewModel class MyViewModel: ViewModel() { var backgroun..

사용자에게 선택할 수 있는 요소들을 제공할 때 가장 자주 사용되는 것들이 제목의 3가지 컴포넌트다. 이것들을 컴포즈에선 어떻게 사용할 수 있는지 확인해 본다. 먼저 data class를 만든다. data class ToggleComponentInfo( val isChecked: Boolean, val text: String ) 액티비티의 전체 코드는 아래와 같다. import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.clickable import androidx.compose.foundation.l..

Compose로 앱을 만들 때 NavigationDrawer를 구현하는 방법에 대해 포스팅한다. 먼저 NavigationDrawer가 열렸을 때 표시할 제목, 아이콘들을 갖고 있을 data class를 만든다. import androidx.compose.ui.graphics.vector.ImageVector data class NavigationItem( val title: String, val selectedIcon: ImageVector, val unselectedIcon: ImageVector, val badgeCount: Int? = null ) 그리고 액티비티를 구성한다. import android.os.Bundle import androidx.activity.ComponentActivity i..

Compose로 앱을 만들 때도 당연히 브로드캐스트 리시버를 사용해야 하는 경우가 발생할 수 있다. 이 포스팅에선 기기에서 비행기 모드를 온오프 했을 때 이를 감지하는 것, 버튼을 누르면 내가 정의한 인텐트를 브로드캐스트 리시버를 통해 받는 예제와 관련 코드 분석을 진행한다. 그러나 브로드캐스트 리시버가 무엇인지 잘 모를 수 있으니 먼저 브로드캐스트 리시버가 무엇인지 확인하고 넘어간다. 브로드캐스트 리시버(Broadcast Receiver)는 어떻게 작동할까? 라디오를 생각해 보자. 라디오는 여러 주파수에서 방송하는 많은 채널들이 있다. 난 주파수를 바꿔가면서 원하는 채널을 들을 수 있다. 이와 유사하게 브로드캐스트 리시버는 안드로이드 시스템에서 발생하는 여러 이벤트를 듣고 반응한다. 배터리 부족, 비행..

Compose에서 이미지를 가져와 리스트 형태로 표시하는 예제를 다룬 영상이 있어 공부한 후 포스팅한다. 링크는 아래 남긴다. https://www.youtube.com/watch?v=uHX5NB6wHao&t=102s 이미지 처리 라이브러리는 Coil을 사용한다. 오늘 날짜인 23.08.13 기준 최신 버전은 아래와 같으니 참고한다. implementation("io.coil-kt:coil-compose:2.4.0") 그리고 에뮬레이터로 안드로이드 12, 13 기기에서 어떻게 보이는지 확인했기 때문에 무료 이미지 몇 장을 준비해서 에뮬레이터에 옮겨둔 다음 진행했다. 에뮬레이터에 사진 파일을 넣는 방법은 아래 순서대로 따라하면 된다. 이 과정은 당연히 하나의 에뮬레이터에만 적용되며 한 에뮬레이터에 옮겼다고..

리사이클러뷰에서 아이템에 체크박스를 넣어 사용했듯 Compose에서도 같은 경우가 당연히 발생할 수 있다. 그러나 Compose에는 리사이클러뷰 대신 LazyColumn이 존재하고, 어댑터가 따로 존재하지 않는다. 이 상황에서 어떻게 체크박스를 만들고 체크 상태를 유지하게 할 수 있을까? 코드로는 아래와 같이 작성하면 스크롤하더라도 체크 상태가 유지되는 체크박스를 만들 수 있다. @Composable fun TodoCard( modifier: Modifier = Modifier, title: String, content: String ) { var checked by rememberSaveable { mutableStateOf(false) } Card(modifier = modifier) { Column..

일반적인 리사이클러뷰에 스티키 헤더와 헤더별로 그룹화된 아이템들이 들어가도록 구현하려면 둘 이상의 뷰홀더를 구현해야 하고, 복잡한 코드를 작성해야 하는 불편함과 공수가 걸린다. 그러나 Compose에선 이 작업을 아주 많이 간소화시켜서 구현할 수 있다. 클릭 이벤트를 적용하는 것도 쉽다. 말은 필요없고 코드부터 본다. 먼저 res/values 패키지 안에 적당히 이름 붙인 values resource file을 만들고 아래 코드를 붙여넣는다. 서버에서 받아오는 대신 하드코딩한 문자열을 사용할 것이다. First Item First Item1 First Item2 Second Item Second Item2 Second Item3 Second Item4 Third Fourth Fifth Fifth Item..