* 컴포즈 강의를 구매할까 책을 살까 하다가 안드로이드 공식문서에 강의와 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를 정의하고, 코드..
* 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안에서 처리하는 것으로 시도했다. ..
* Compose에서 SnackBar, Topbar, FloatingActionButton 등을 사용하려면 Scffold로 감싸주고 사용을 해야한다. * 아래는 Button을 눌렀을 때 SnackBar를 띄우는 코드이다. (키보드도 숨김) showSnackbar는 suspend 함수로 되어있어서 coroutine을 사용해야 한다. 코루틴을 사용하려면 위에 remeberCoroutineScope()를 선언해주면 된다. * 마지막으로 TextField와 Button 사이의 마진을 24dp로 주고싶을 땐 Spacer를 사용한다.Spacer(modifier = Modifier.height(24.dp)) * 실행결과
* 단순히 TextField를 띄우고 글을 입력하고, 아래 버튼을 띄우는 코드이다. * 여기서 textValue = remember { mutableStateOf("") } 쪽을 구조분해를 사용해 볼 예정이다. textValue를 MutableState으로 선언하고 MutableState 내부 코드로 들어가보면 아래와 같은 interface라는 것을 알 수 있다. value와 component1, component2. * 따라서 textValue를 아래와 같이 text, setValue로 분해할 수 있다. text는 String 형태, setValue는 (String) -> Unit 형태이다. * 그러므로 아래쪽 TextField에 value = text, onValueChange에는 setV..
* 우리가 ImageCard를 Composable로 빼놓은 이유는 ImageCard를 재사용하고 싶은 이유도 있다. 하지만 현재 저장해 놓은 상태는 재사용이 불가능한 구조이다. 상태를 저장하는 값이 외부에서 지정이 되는 형태로 되야지만 재사용이 가능해진다. * 따라서, 상태를 저장하는 부분을 MainActivity쪽으로 뺀 다음 ImageCard에 isFavorite를 변수로 받게 수정했다. * 이렇게 되면 ImageCard에 들어오는 isFavorite은 이제 변수가 아닌 상수가 되어버린다. 따라서 ImageCard 아래에 상태를 변경하는 부분 코드는 쓸 수가 없다. * 따라서, Callback 함수를 만들고 클릭이 발생하면 현재 favorite 반대값을 넣어줘서 return 해준다.* 마지막에..
모르는 사이에 조금씩 조금씩..
