Android/Jetpack Compose (17) 썸네일형 리스트형 Jetpack Compose mutableStateOf 사용 방법 (remember, by, 코틀린 구조 분해) remeber mutableStateOf 사용방식 3가지에 대해서 알아보자. remember by remember (T, T) = remember 먼저 remember는 말 그대로 기억하겠다는 것이다. 예를 들어, 세로모드 또는 가로모드로 디바이스를 돌렸을 때 Composable은 ReComposition이 발생한다. 이 때, remeber로 선언된 변수는 초기화가 되지 않고 이전 값을 그대로 보여주게 된다. 1. remember - 일반적으로 사용하는 방식이다. v1.value를 이용해 get, set을 할 수 있다. val v1 = remember { mutableStateOf(false) } //set v1.value = true //get Text(text = "${v1.value}") 2. by.. Jetpack Compose CompositionLocal 먼저 소스와 결과물을 보자. @Composable fun View1() { val viewModel = MyViewModel() Column { Button(onClick = { /*TODO*/ }) { Text(text = "${viewModel.getTitle()} this is Button") } View2(viewModel = viewModel) } } @Composable fun View2(viewModel: MyViewModel) { TextField(value = "${viewModel.getTitle()} this is TexfField", onValueChange = {}) View3(viewModel = viewModel) } @Composable fun View3(viewModel: .. Jetpack Compose ConstraintLayout "뷰 시스템에서 ConstraintLayout은 크고 복잡한 레이아웃을 만드는 데 권장되는 방법이었습니다. 플랫 뷰 계층 구조가 중첩된 뷰보다 성능 면에서 더 좋았기 때문입니다. 그러나 이는 깊은 레이아웃 계층 구조를 효율적으로 처리할 수 있는 Compose에서는 문제가 되지 않습니다." (출처: https://developer.android.com/jetpack/compose/layouts/constraintlayout) Compose에서는 ConstraintLayout 사용을 권장하지 않는다. 하지만 복잡한 UI 개발을 하다보면 필요할 때가 있기 때문에 포스팅 해본다. 먼저 build.gradle 파일에 아래 항목을 추가한다. (참고: https://developer.android.com/jetpac.. Jetpack Compose LaunchedEffect를 이용한 CountDown 기능 구현 흔히 볼 수 있는 "N초 후에 화면이 닫힙니다"를 LaunchedEffect를 이용하여 간단하게 구현이 가능하다. 이전에 포스팅한 AlertDialog를 재활용하여 알럿창이 N초간 닫히지 않을 경우 자동으로 닫히도록 구현해보자. (Jetpack Compose AlertDialog 포스팅: https://loppav6.tistory.com/6?category=975534) 먼저 LaunchedEffect에 대해서 알아보자. LaunchedEffect는 코루틴 스코프에서 실행되는 컴포저블이다. 보통 suspend 함수를 취소하고 다시 실행해야할 때 사용한다. 그렇다면 rememberCoroutineScope를 생성해서 사용하면 되지 않을까? 아래와 같은 에러가 발생한다. LaunchedEffect를 사용하라.. Jetpack Compose QR Image 만들기 (with zxing library) TextField에 URL을 입력하고 QR이미지를 생성하는 코드를 만들어보자. zxing library를 사용하기 위해 build.gradle에 아래 항목을 추가한다. (참고: https://github.com/journeyapps/zxing-android-embedded) dependencies { implementation('com.journeyapps:zxing-android-embedded:4.3.0') { transitive = false } implementation 'com.google.zxing:core:3.4.1' } 1. URL을 입력받을 TextField를 만든다. TextField는 입력받은 Text를 State객체에 담아 value 필드를 통해 표시해준다. onValueChange.. Jetpack Compose Scaffold(with SnackBar, CoroutineScope) Scaffold는 기존 안드로이드 UI에서 복잡하게 구현했던, DrawerLayout, TopBar, BottomBar등을 간단하게 구현할 수 있는 도구이다. 구성요소로는 다음과 같다. scaffoldState: DrawerState 설정(DrawerState.Opened, DrawerState.Closed) topBar: 상단 액션바 floatingActionButton: 플로팅 버튼 floatingActionButtonPosition: 플로팅 버튼 위치 지정 drawerContent: Drawer UI Content: scaffold 주요 UI bottomBar: 하단 바 snackBar는 scaffoldState를 통해 호출 가능하다. snackBar는 suspend 함수이기 때문에 비동기로 처리 .. Jetpack Compose AlertDialog 기존에 Dialog를 사용하려면 Dialog 클래스 생성 AlertDialog.Builder 사용, DialogFragment 사용 등 괜시리 복잡하다. Compose는 기존에 복잡한 UI 구조를 간단하게 만들어 사용할 수 있고 직관적이고 어렵지 않아서 좋다. 최초 Composition 발생 시 AlertDialog도 로딩된다. State객체를 활용하여 AlertDialog를 보여줄지 말지 결정하면 된다. 소스는 직관적이라 따로 리딩할 것은 없고, 참고사항으로 onDismissRequest는 다이얼로그 외부영역 터치 시 동작하는 부분이다. 외부 터치 시 닫고 싶으면 State객체를 조작하면 된다. @Composable fun MainView() { Column { val showDialog = remem.. Jetpack Compose ViewModel에서 State객체를 통한 Compose UI 업데이트 Compose에서는 State객체를 이용하여 Observable하게 동작하도록 구현하는 것을 권장한다. Compose UI는 State객체를 관찰하다가 State객체의 값이 변하면 Compose UI는 Re-Composition을 발생시켜 UI를 업데이트 한다. developer 사이트의 Jetpack Compose를 소개하는 소스를 참고하여 예제를 만들어 보자. 본 예제에서는 별모양의 이미지를 클릭하면 On/Off 하는 기능을 만들어 볼 것이다. 먼저 ViewModel을 사용하기 위해 build.gradle 파일에 아래 항목을 추가한다. (참고: https://developer.android.com/jetpack/compose/libraries#viewmodel) dependencies { implem.. 이전 1 2 3 다음
