plzy의 개발 블로그

Compose를 사용하기 전에는 Splash Theme를 사용하거나, startActivity 등 사용해서 만들면 됐었다. 하지만 Compose에서는 조금 방법이 다르다. 바로 Navigation을 사용해야한다. 먼저 splash로 사용할 화면과, splash 후에 나올 화면을 NavHost에 정의해 준다. startDestination 에서 어느 화면이 가장 먼저 실행될 것인지 명시해준다. @Composable fun BosoDiaryApp() { // navigation 설정 val navController = rememberNavController() NavHost( navController = navController, startDestination = Screen.Splash.route ) { ..

기존에 list 뷰를 만들려면 RecyclerView.Adapter, RecyclerView.ViewHolder 등을 만들어야 했다. 무척 번거로웠지만 compose에서는 어떻게 만들면 될까? LazyColumn LazyColumn이란 compose에서 list를 만들 때 쓰는 layout이다. 이름부터 볼 수 있듯이 세로형 list를 만들 수 있는 것인데 한번 코드를 살펴보자. @Composable fun Greetings(name: List = List(1000) { "${it}" }) { LazyColumn(Modifier.padding(vertical = 4.dp)) { items(name) { name -> Greeting(name = name) } } } items에 어떠한 데이터가 들어갈지 ..

Compose에서 쓰이는 기존 레이아웃 요소에는 Column Row Box 3가지가 있다. 각각 어떻게 쓰이는지 알아보자. Column column의 하위 요소는 세로로 그려진다. 이 코드를 봐보자. Column( modifier = Modifier .fillMaxWidth() .padding(24.dp) ) { Text(text = "hello.") Text(text = name) } 이 코드를 preview로 봐보면 이러한 상태가 되며 각 Text가 세로로 그려진다. Row row의 하위 요소는 가로로 그려진다. 이 코드를 봐보자. Row( modifier = Modifier .fillMaxWidth() .padding(24.dp) ) { Text(text = "hello.") Text(text = ..

여러분은 작년까지만 해도 xml ui를 많이 짜왔을 것입니다. 지금 취업 우대사항을 보면 compose 활용능력이 있는걸 볼 수 있는데, 과연 compose란 무엇인지 살펴보도록 합니다. Compose 란 기존의 UI 문제점을 해결하기 위해 등장했습니다. 기존에는 만약 버튼이 재활용될려면 XML을 만들고 커스텀뷰 속성 선언 뒤 코틀린 혹은 자바로 코드를 작성해야하는 불필요한 작업을 했었습니다. 이러한 과정은 너무 귀찮기 때문에 compose 즉 선언형 UI 가 등장했습니다. 기존의 코드에는 textView.text="Hello World" 명령하듯이, 써내려가는 방식입니다. 그래서 명령형 UI 라고 부릅니다. 선언적 UI는 Text("hello world") 선언하듯이 코드를 써내려가는 방식입니다. 그래..