compose

[Compose]스톱워치

전 컴포즈 게시물에서는 간단하게 비만도 계산기를 만들어 봤다. 이번 게시물에서는 다음 그림과 같이 스톱워치를 만들어보면서 콜백함수와 컴포즈로 뷰 작업 하는 것에 익숙해져야겠다. 시작을 하면 초와 밀리초가 나오면서, 랩타임을 클릭했을 때 위와 같이 시간이 기록되고, 정지를 눌렀을 때 모든 기록된 시간이 초기화된다. 먼저 ViewModel로 기능먼저 구현해보자. private var time = 0 private var timerTask : Timer? = null //현재 진행되고 있는지 private val _isRunning = mutableStateOf(false) val isRunning : State = _isRunning private val _sec = mutableStateOf(0) val ..

[Compose]비만도 계산기

계속 xml로만 안드로이드 개발을 해왔는데 이제부터 익숙해지려면 Compose로만 해야할 것 같았다.. 그래서 간단히 이번 글에서는 xml이 아닌 compose로만 bmi 계산기를 만들어보자! 먼저 첫 번째 화면을 만들어보자. 첫 번째 화면에서의 앱의 가장 상단바를 Scaffold를 이용해서 만들 수 있다. Scaffold( topBar = { TopAppBar( title = { Text("비만도 계산기")} ) } ) 위와 같이 title을 만들어주면 앱의 상단바가 완성된다. 입력할 수 있는 TextField 두 개, 버튼 한 개가 있는데, 여기서 그냥 TextField가 아닌, 입력할 때 hint값이 올라가는 OutLinedTextField를 이용해야 한다. Column( modifier = Mod..

[Compose] ViewModel, State

컴포즈에서의 ViewModel 버튼을 클릭하였을 때 원래 있던 텍스트가 다른 텍스트로 변경되는 프로그램을 구현하였을 때 생명주기를 고려하지 않는다면 다음과 같이 구현할 수 있다. // val data = remember{mutableStateOf("Hello")} Button(onClick = { // data.value = "World" //눌러도 변경이 안됨. //변경이 되면 컴포즈가 다시 리셋이되어 hello가 계속 나옴 //따라서 리멤버 사용 만일 remember를 사용하지 않는다면 눌러도 변경이 안되는 것을 확인할 수 있다. 왜냐하면 변경이 되어도, 다시 컴포지션이 발생하여 리셋이 되어 원래 있던 Hello가 계속 나오게 된다. 이를 해결하기 위해 이전에 있던 상태를 기억하기 위해 위의 코드처럼..

[Compose] Navigation

프로젝트를 진행하면서 Navigation기능을 많이 사용하였다. 프래그먼트간의 이동을 더욱 편리하게하고, safe Args특성을 사용하여 데이터 전달을 더욱 안전하게 할 수 있기 때문이다. 컴포즈에서도 네비게이션을 사용하여 뷰를 옮길 수 있으며 데이터도 전달할 수 있다. 두 번째 화면의 이동은 아무런 조건 없이 가능하고, 세 번째 화면의 이동은 해당 textField에서 입력한 값이 있어야만 가능하고, 이동했을 때의 세 번째 화면에서는 해당 textfield에 있던 값을 띄워보자! gradle파일에 navigation compose 라이브러리를 작성하자. implementation 'androidx.navigation:navigation-compose:2.4.0-alpha10' setContent { v..

[Compose] TextField, Scaffold, SnackBar

이 글에서는 TextField를 만들어, 현재 입력하고 있는 값에서 버튼을 누르면 입력했던 값이 SnackBar형태로 나오는 간단한 프로그램을 짜보자. Scaffold( scaffoldState = scaffoldState //스낵바를 활용하기위해 ) { Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ){ TextField( // value = textValue.value, //비어있으면 입력이 안됨(값이 변하지 않기 때문에) // onValueChange = { // textValue.value = it /..