* 기존 Kotlin XML에서는 스크롤 가능한 행과 열을 나타낼 때 RecyclerView 등을 사용해서 나타냈다. Compose에서는 LazyColumn, LazyRow가 그 기능을 대체한다. * LazyRow@Composablefun AlignYourBodyRow( modifier: Modifier = Modifier) { LazyRow( modifier = modifier ) { items(alignYourBodyData) { item -> AlignYourBodyElement(item.drawable, item.text) } }}* LazyRow의 하위 요소는 컴포저블이 아니다. 대신 컴포저블을 목록 항목으로 내보내는 item 및 ..
* Compose에서 UI 구성요소를 만들려면 @Composable 주석을 함수에 달아줘야 한다. 이 주석은 이 함수가 데이터를 UI로 변환하므로 응답이 UI로 변환되도록 Compose 컴파일러에 알린다. 이 주석이 있는 함수를 구성 가능한 함수, 컴포저블(Composable)이라고도 한다. 이러한 함수는 Compose UI 구성 요소이다. * UI를 재사용 가능한 요소 라이브러리로 나눌 수 있다. 예를 들어, 선택할 수 있는 답변 목록을 구현하려는 경우 답변 목록을 가져오는 SingleChoiceQuestion이라는 새 함수를 정의한 위에서 정의한 SurveyAnswer 함수를 호출할 수 있다.@Composablefun surveyAnswer(answer: Answer) { /* ... */ }@Co..
* 컴포즈 강의를 구매할까 책을 살까 하다가 안드로이드 공식문서에 강의와 codelab으로 따라 칠 수 있는 코스가 있길래 동기들과 같이 스터디를 하며 블로그에 정리를 하기로 했다.(https://developer.android.com/courses/pathways/jetpack-compose-for-android-developers-1?hl=ko) 1. Compose 이해- Jetpack Compose는 선언형 UI 프레임워크이다. UI에 포함되어야 하는 내용을 설명하면 Compose가 나머지를 처리한다.이러한 UI 작성 방식은 기존의 우리가 작성하던 방식(XML 사용)과 매우 다르다. View를 사용하면, UI가 특정 방식으로 보이도록 하는 방법을 단계별로 설명한다. XML에서 UI를 정의하고, 코드..
* 안드로이드 프로젝트를 하다가 로딩 애니메이션의 개념이 정리되어 있는 것을 보고 신기해서 찾아봤다. * 로딩은 사용자의 행동에 대한 피드백으로 다음 화면을 불러올 준비를 하고 있다는 상황을 인지 시켜준다. * 적절한 로딩 애니메이션은 프로덕트의 완성도를 높일 뿐 아니라, 서비스의 브랜딩을 담아낼 수 있다. * 구글 리서치 자료에 따르면 모바일 웹 사이트의 로딩 시간이 3초 이상일 때 32%, 5초 이상은 90%, 6초 이상은 106% 마지막으로 10초가 넘으면 123%의 이탈률이 발생한다고 한다. 로딩 애니메이션에는 다양한 형태가 있다.* 로딩 애니메이션은 맥락에 따라 전체 로딩과 부분 로딩으로 나눌 수 있다. * 전체 로딩은 화면 전체에 적용되는 로딩으로 스켈레톤 UI, 스플래시 화면 등이 있다.* ..
* LazyColumn은 기존의 RecyclerView, ListView와 비슷한 것 같다.* lazyColumn은 세로 스크롤이고, 가로스크롤이 가능한 lazyRow, lazyGrid도 있다.공식문서에 사용법은 3가지로 나와있다.import androidx.compose.foundation.layout.Columnimport androidx.compose.foundation.lazy.LazyColumnimport androidx.compose.foundation.lazy.itemsimport androidx.compose.foundation.lazy.itemsIndexedimport androidx.compose.material.Textval itemsList = (0..5).toList()val it..
* 화면에 표시되는 내용이 변경된다면 State를 활용해야 한다.* ViewModel에서 mutableState은 읽기와 쓰기가 가능한 타입이고 그냥 State은 읽기만 가능한 타입이다. * 먼저, State를 다루는 방법엔 여러가지가 있는데 1, 3번째 방식은 앞에서 정리한 내용이기도 하다.1번째 방법은 그냥 MutableState 타입으로 다루는 것이다. 3번째 방법은 구조분해를 사용하여 text(getter 역할), setText(setter 역할)로 나누어 다룬다. 아래처럼 TextField에 (value = text, onValueChange = setText)로 텍스트 변경이 가능하다. 구조분해에서 text는 val로 선언되어 있기 때문에 String을 수정하려면 setText("변경") 이..
* ViewModel을 사용하여 아래 화면의 변경을 눌렀을 때 Hello Text를 변경해볼 예정이다. * 우선 "Hello" 텍스트는 변해야 할 데이터이기 때문에 data = mutableStateOf("Hello")로 위에서 선언해 준 다음 "Hello" 대신 data.value로 바꾼다. 그 뒤 Button의 onClick = { data.value = "World" }로 설정해주면 간단하게 버튼을 눌렀을 때 "World"로 바뀌는 것을 볼 수 있다. * 또 다른 방법은 ViewModel 을 사용하는 것이다. * ViewModel은 activity와 lifeCycle을 동일하게 가져가는 특성 때문에 remeber를 사용하지 않고 data = mutableStateOf("Hello")처럼 ..
* 버튼을 통해 다른 페이지로 넘어가는 Navigation 실습을 해볼 예정이다.* 먼저 implementation을 해주고 아래에 띄울 Screen(페이지)를 선언해준다.* setContent에서 navController 객체 생성 후 NavHost()로 불러와준다. startDestination을 "first"로 했기 때문에 FirstScreen()으로 시작하게 된다. * FirstScreen, SecondScreen, ThirdScreen을 원하는 대로 꾸민 다음 이제 페이지를 넘겨보자.* 각 Screen에서 콜백함수를 넘겨 setContent에서 처리하는 방법도 있다는데, 우선 간단하게 setContent에서 navController 를 넘겨서 Screen안에서 처리하는 것으로 시도했다. ..
모르는 사이에 조금씩 조금씩..
