Jetpack Compose (12) 썸네일형 리스트형 [Jetpack Compose] 12. by 위임 아래 영상을 보고 정리한 게시글입니다. https://www.youtube.com/watch?v=Fn_xJ_IRHiA&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=9 by 이전에 이렇게 쓴 적이 있음 @Composable fun HomeScreen(viewModel: MainViewModel = viewModel()) { val (text, setText) = remember { mutableStateOf("Hello World") } Column() { Text(text = text) Button(onClick = { setText("변경") }) { Text("클릭") } } } 위임 키워드 'by'를 쓰면 getter, setter가 재정의 돼서 편하게 쓸 수 .. [Jetpack Compose] 11. ViewModel 아래 영상을 보고 정리한 게시글입니다. https://www.youtube.com/watch?v=JuIw_SbSpRU&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=8 Recomposable 아래와 같이 작성하면 버튼을 눌러도 Text의 내용이 변하지 않음 @SuppressLint("UnrememberedMutableState") @Preview(showBackground = true) @Composable fun TestView() { val data = mutableStateOf("Hello") Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalA.. [Jetpack Compose] 10. Navigation - 값 전달하기 아래 영상을 보고 정리한 게시글입니다. https://www.youtube.com/watch?v=sHyQV3Jz_fA&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=7 To do 첫번째 화면의 TextField에 들어있는 값을 세번째 화면으로 넘길 예정 세번째 화면 매개변수로 value를 받아와서 이 값을 세번째 화면에 나타낼 것임 @Composable fun ThirdScreen(navController: NavHostController, value: String) { Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Align.. [Jetpack Compose] 9. Navigation - 화면 전환 아래 영상을 보고 정리한 게시글입니다. https://www.youtube.com/watch?v=sHyQV3Jz_fA&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=7 gradle 화면 전환을 할 때 Navigation을 사용함 버튼을 통해 화면 전환하는 예제를 해볼 예정 module 수준의 build.gradle에 dependency를 추가해야 함 implementation "androidx.navigation:navigation-compose:2.4.0" NavController Navigation을 순조롭게 도와주는 Composable 전환할 화면을 NavHost 안에 넣어주면 됨 @Preview(showBackground = true) @Composable fu.. [Jetpack Compose] 8. SnackBar, 코루틴 아래 영상을 보고 정리한 게시글입니다. https://www.youtube.com/watch?v=0Udm6oKFj-o&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=6 SnackBar 팝업 메시지를 띄울 때 사용함 ToastMessage와 비슷함 Scaffold 머티리얼 디자인을 사용할 때는 Scaffold로 감싸서 사용함 머티리얼 디자인 SnackBar FloatingButton and so on... 코루틴 showSnackBar 함수를 통해 snackBar를 나타냄 하지만 showSnackBar 함수는 suspend 함수임 => 코루틴에서 실행을 해야 함 composable 안에서는 아주 간단하게 scope를 정의해서 쓸 수 있음 val scaffoldState .. [Jetpack Compose] 7. TextField, 구조 분해 아래 영상을 보고 정리한 게시글입니다. https://www.youtube.com/watch?v=0Udm6oKFj-o&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=6 TextField 입력을 받을 수 있음 기존의 editText와 유사함 속성 value : 내가 입력한 값으로 String이 들어감 onValueChange : value가 바뀔 때 호출되는 함수 @Preview(showBackground = true) @Composable fun TestView() { Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignm.. [Jetpack Compose] 6. State 아래 영상을 보고 정리한 게시글입니다. https://www.youtube.com/watch?v=dAwnZfZPP48&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=5 IconButton을 클릴할 때마다 동작을 부여하고 싶음 (=> 클릭할 때마다 하트가 차거나 비거나 번갈아 나오도록 할 예정) State Compose는 State 기반으로 동작한다 원래는 boolean 변수 만들어서 값을 바꿔줘가면 되지만 jetpack compose는 state를 사용해서 깔끔하게 UI를 그릴 수 있음 state가 변경될 때마다 그에 해당하는 부분만 UI를 새로 그림 val isFavorite = remember { mutableStateOf(false) } IconButton(onC.. [Jetpack Compose] 5. Card, Image, Icon 아래 영상을 보고 정리한 게시글입니다. https://www.youtube.com/watch?v=dAwnZfZPP48&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=5 Card 기존의 cardView와 비슷 fillMaxWidth() : 화면의 가로를 꽉 채움 fillMaxWidth(0.5f) : 화면의 가로를 절반만 채움 RoundedCornerShape : 모서리 둥글게 Card( modifier = Modifier .fillMaxWidth(0.5f) .padding(16.dp), shape = RoundedCornerShape(8.dp), elevation = 5.dp ) 사진 Image Composable 객체 사용 painter : drawable에 들어있는 .. 이전 1 2 다음
