본문 바로가기
반응형

Android Jetpack Compose29

Bottom Navigation 구현방법 총정리 # Route 오늘은 BottomNavigation 의 구현방법에 대해서 정리해 보도록 하겠습니다. BottomNavigation을 구현하기 위해서는, Jetpack Compose Navigation 구현방법에 대해서 알고 있으면 도움이 되는데요. 이에 관해서는 아래 글을 참조해 주세요. >> Navigation 구현 방법 총정리 # Route Jetpack Compose 1.  Route 정의 먼저 BottomNavigation 에서 사용할 Route 들을 sealed class 로 정의해 주겠습니다. badge count 를 활용하기 위해서, badgeCount 를 넣어주었습니다. sealed class Screen( val route: String, val title: String, val icon: Image.. 2023. 5. 29.
Navigation 구현 방법 총정리 # Route Jetpack Compose 오늘은 Jetpack Compose 에서 구현하는 Navigation 에 대해서 정리해 보도록 하겠습니다. 1. Navigation Library 가장 먼저 준비할 것은 navigation 구현을 위해 라이브러리를 implement 하는 것 입니다. 아래의 라이브러리들이 모두 이 글의 예제를 구현하는데 필수적인 것은 아니지만, navigation과 viewModel, savedState 등을 같이 사용하기에 도움을 주는 라이브러리이므로 포함시켰습니다. app레벨의 build.gradle에 implement 시켜주면 됩니다. dependencies { def nav_version = "2.5.3" implementation "androidx.navigation:navigation-compose:$nav_v.. 2023. 5. 27.
Nested Navigation 구현 및 총정리 # 중첩 Route Jetpack Compose 실제 앱을 만들다보면, Navigation Graph가 복잡해 지게 됩니다. 중첩된, 즉 nested navigation이 필요하기 때문인데요. 오늘은 Jetpack Compose 에서 Nested Navigation 을 구현하는 방법에 대해서 정리해 보겠습니다. 이 글을 이해하기 위해서는 Jetpack Compose Navigation 구현방법에 대해서 알고 있어야 하는데요. 이에 관해서는 아래 글을 참조해 주세요. >> Navigation 구현 방법 총정리 # Route Jetpack Compose 1. 라이브러리 Implementation 이 글에 나오는 코드를 구현하기 위해서, 아래 라이브러리들이 app레벨의 build.gradle에 implement 되어야 합니다. dependencies { d.. 2023. 5. 26.
DisposableEffect 에서 화면종료 전 리소스 정리 구현 # 구 onDestroy jetpack Compose 오늘은 Jetpack Compose 의 Side effect 중 하나인, DisposableEffect 에 대해서 정리해 보도록 하겠습니다. 참고로, SideEffect 에 대해서는 아래 글을 참조해 주세요. >> LaunchedEffect , Side Effect 그리고 rememberCoroutine 총정리 1. DisposableEffect 1-1. DisposableEffect Disposable 은 일회용처럼 사용하고 버릴 수 있는 물건을 가르키는데요. Composable 에서 DisposableEffect 는, 아래의 경우에 실행이 됩니다. 아래에서 key값은 DisposableEffect에 인자로 들어가는 key값을 말합니다. Composable 이 Composition에서 제거되는 경우(C.. 2023. 5. 13.
LaunchedEffect , Side Effect 그리고 rememberCoroutine 정리 오늘은 Jetpack Compose 의 Side Effect 와 LaunchedEffect, 그리고 rememberCoroutine 에 대해서 정리해 보도록 하겠습니다. 1. Side Effect Side effect 의 단어 뜻은 원래 부차적이고, 의도하지 않은 효과를 말하는데요. 부작용을 가르키기도 합니다. Jetpack Compose 에서, Side effect 는 Composable 함수(의 scope)를 벗어난 곳에서 앱의 state 변경이 일어나는 것을 뜻 합니다. 참고로 State 에 대해서는 아래 글을 참조해 주세요. >> State 를 이해하고 TextField 구현하기 # Jetpack Compose UI Part2 공식문서의 언급된 것에 따르면, Composable 의 이상적인 형태는.. 2023. 5. 12.
BackHandler 에 대한 정리 # 유저가 Back 버튼 누를 때 Jetpack Compose 오늘은 Jetpack Compose 에서 유저가 백버튼을 누를 때, 구현해야 하는 코드를 넣는 부분인 BackHandler 에 대해서 정리해 보겠습니다. 1. BackHandler BackHandler는 Compose의 탑레벨 Composable 함수인데요. 유저가 시스템의 back button을 눌렀을 때, 이벤트를 핸들링 할 수 있는 곳 입니다. 코드로 보도록 하겠습니다. 보다시피 람다블록에 코드만 넣어주기만 하면 되기 때문에 정말 쉬워보입니다. @Composable fun MyScreen() { BackHandler(onBack = { println("Back button pressed") }) } 2023. 5. 11.
Row 와 Column 의 Arrangement 와 Space # Jetpack Compose 오늘은 Jetpack Compose 의 UI배치를 결정하는 Arrangement 에 대해서 정리해 보도록 하겠습니다. 그 중에서도 Row와 Column의 Space를 중심으로 정리해 보려고 하는데요. 이 Space를 이해하고 있으면 UI 배치를 하기가 쉬워지기 때문입니다. 1. Row 와 Column 의 Space에 관한 3가지 Row를 사용할 때, 가로 배열에 대한 부분에 대해서는 아래와 같이 사용하는 코드를 보신적이 있을 텐데요. 아래에서는 SpaceBetween 을 이용해서 Column과 Box를 각각 왼쪽과 오른쪽에 위치시켰습니다. 왜 그런지, SpaceBetween, SpaceAround, SpaceEvenly 를 보면서 이해해 보도록 하겠습니다. Row( horizontalArrangement.. 2023. 5. 2.
Android Default Font 지정하는 방법 정리 # Theme Jetpack Compose 요즘 개발하는 앱들은 Custom 폰트들을 적용하는 경우가 많은데요. Android 개발하면서 매번 폰트를 지정하는 일은 매우 비효율적인 일입니다. 오늘은 Android 의 Jetpack Compose 에서, Default font를 지정하는 방법에 대해서 정리해 보도록 하겠습니다. 1. Custom 폰트 저장 가장 먼저 default 로 지정할 font 를, font 폴더에 저장해 주어야 합니다. 먼저, 아래와 같이 New> resource directory를 선택해서 폰트를 넣을 디렉토리를 선택해 주구요. 2023. 4. 30.
IconButton Ripple Effect 구현 # Jetpack Compose 기존 XML 의 ImageButton 유아이에 대응되는 것이 바로 IconButton 인데요. 오늘은 이 버튼에 Ripple Effect주는 방법에 대해서 정리해 보도록 하겠습니다. 1. IconButton 에 Ripple Effect 주기 1-1. Indication XML 에서는 ImageButton으로 구현하였던 것들은 대부분 IconButton 으로 변환할 수 있는데요. 먼저 코드를 보겠습니다. 핵심적인 부분이 바로 Modifier.Indication() 부분인데요. Visual Effect 를 그려주는 부분이 됩니다. IconButton( onClick = {}, modifier = Modifier .size(40.dp) .indication(interactionSource, ripple) ){.. 2023. 4. 28.
다른 Origin 에서 들어오는 route 에 대한 처리 방법 # Jetpack Compose Navigation 오늘은 각각 다른 origin(출발지)에서 공유되는 Screen 으로 route가 들어오는 경우, 그것의 처리 방법에 대해서 정리해 보도록 하겠습니다. 1. 큰 그림 각각 다른 Origin에서 들어오는 경우의 생각해야 할 문제점은, 다른 UI에서 각각 다른 데이터를 들고 들어온다는 것 입니다. 이것은 origin 별로 다르게 데이터를 처리해서 보여주어야 한다는 것을 의미합니다. 이 문제를 해결하기 위한 방법은 여러가지이겠지만, 다음과 같은 방법이 있을 수 있겠네요. 우선은 isFromXXOrigin 이라는 boolean 을 route의 argument 로 받아서, 그것을 보고 각기 다르게 처리하는 방식이구요. 다른 하나는 Sealed Class를 사용해서 route를 구분해서 받는 것 입니다. isFro.. 2023. 4. 27.
TopAppBar 공유하는 방법 정리 # Jetpack Compose 오늘은 Jetpack Compose UI에서 사용하는, TopAppBar를 여러Screen에서 공유하는 방법에 대해서 정리해 보겠습니다. 1. TopAppBar 여러 Screen에서, 상단의 TopAppBar를 공유해야 한다면, Composable Function 을 작성한 후에, Scaffold에 전달해 주면 됩니다. 먼저, 아래에서는 SharedTopAppBar라는 Composable 함수를 만들었습니다. @Composable fun SharedTopAppBar( title: String, onMenuItemClick: (MenuItem) -> Unit, menuItems: List ) { TopAppBar( title = { Text(text = title) }, actions = { menuIte.. 2023. 4. 25.
mutableStateOf 와 MutableStateFlow 비교 총정리 # collectAsState Jetpack Compose UI의 중심에 있는 Concept가 State 인데요. mutableStateOf 와 MutableStateFlow를 이용하면, mutable (가변)의 State 값을, 관찰해서 값의 변화에 따라 UI 나 혹은 다른 로직의 변형을 줄 수 있습니다. 오늘은 이 둘의 차이에 관해서 정리해 보겠습니다. 1. mutableStateOf mutableStateOf에 관해서는 공식문서에 자세히 설명이 되어있는데요. 관찰될 수 있는 MutableState를 생성해주는데, 이 타입으로 된 값이 변경될 때마다, 컴포저블이 다시 recompose 되도록 한다고 되어있습니다. 즉, 값에 따라서 Composable UI의 변경을 주어야 할 때 사용하기에 적합합니다. 사용방법은 아래와 같은데요. .. 2023. 4. 23.
공유되는 Route 의 Navigation 구현방법 # Jetpack Compose Jetpack Compose의 Navigation을 사용할 때, 페이지가 교차되는 Route 가 존재하는 경우가 생기게 되는데요. 오늘은 이런 교차되는 혹은 공유되는 Route 의 구현 방법에 대해서 정리해 보도록 하겠습니다. 다만, 이 글은 Jetpack Compose 의 Navigation의 기본 구현방법에 대해서는 다루지 않습니다. 1. 큰 그림 다음과 같은 형태의 NavigationGraph 가 있다고 가정해 보겠습니다. Main페이지에는 Home과 Profile 이 존재하는데, 둘다 같은 Settings로 routing 되어야 합니다. Home -> Settings Profile -> Settings 2023. 4. 22.
Paging Library 구현 방법 총정리 # Android 오늘은 Android Paging Library의 구현방법에 대해서 정리해 보도록 하겠습니다. 1. Library Implement 가장 먼저 할 것은 라이브러리 선언인데요. PagingLibrary는 다음의 것들을 선언해 주면 됩니다. def paging_version = "3.1.1" implementation "androidx.paging:paging-runtime:$paging_version" implementation "androidx.paging:paging-compose:1.0.0-alpha18" PagingLibrary를 어떻게 사용하느냐에 따라 다르지만, 대부분 서버와 로컬 DB를 필요로 하므로, 이를 기준으로 Room 과 Retrofit 에 대해서 라이브러리 설치와 설정이 이미 되어 있.. 2023. 4. 17.
Route 에서 전달된 값을 ViewModel 에서 받는 방법 # Jetpack Compose Navigaion savedStateHandle 오늘은 Route에서 넘어온 값을 ViewModel 에서 savedStateHandle 을 이용해 받아서 사용하는 방법에 대해서 정리해 보겠습니다. 1. Route에서 값을 넘겨줄 때 먼저 route에서 값을 넘겨주는 코드를 보고 가겠습니다. testId를 route에 실어서 보내주는 코드인데요. TestId는 ViewModel에서 받아서 사용할 것이므로, TestPage에 인자로 넘겨주지 않았습니다. ... composable( route = "test_route" + "/{testId}", arguments = listOf( navArgument("testId") { type = NavType.LongType defaultValue = -8889L }, ), ) { TestPage() } 2023. 4. 13.
collectAsState 로 Flow 타입 데이터 받기 구현 방법 # Jetpack Compose 오늘은 collectAsState 로 Flow 타입 데이터를 받는 것을 구현하는 방법에 대해서 정리해 보도록 하겠습니다. 1. CollectAsState 구현 collectAsState 을 사용하게 되는 시나리오에 대해서 정리해 보겠습니다. RoomDB등을 이용한 Repository에서 Flow타입의 데이터가 흘러나온다고 가정해 보겠습니다. 이 때 viewModel에서 해당 데이터를 받습니다. 그리고 Jetpack Compose UI 에서 그 데이터를 collectAsState형태로 받게 됩니다. 하나씩 보도록 하겠습니다. 1-1. Repository 에서 흘러나오는 데이터 관찰 먼저 roomDB에서 아래와 같은 Repository가 있다고 가정해 보겠습니다. flow는 비동기적으로 데이터의 강을 obs.. 2023. 4. 10.
Jetpack Compose 화면 하단에 배치하기 Jetpack Compose 에서는 Constraint Layout 을 사용하지 않고도, 사용자의 화면 하단에 무언가를 쉽게 배치할 수 있습니다. 보통 앱의 광고배너가 화면하단에 사용되는데요. 오늘은 이것을 구현하는 방법에 대해서 정리해 보도록 하겠습니다. 1. Colomn 의 화면 하단에 배치하기 이것을 하기위해 필요한 핵심은, Column 과 weight 입니다. Column안에 들어있는 요소들에는 weight 를 줄 수 있는데요. 이를 이용해서, 화면상단부터 나열할 요소인 Column에는 아래와 같이 weight를 1f로 주고요. 그리고 화면 하단에 배치할 Box()에는 weight 관련해서는 아무것도 해주지 않기만 하면 됩니다. 2023. 3. 22.
Jetpack Compose 에서 자간 줄이는 방법 # letterSpacing 오늘은 Jetpack Compose 에서 자간을 줄이는 방법을 정리해 보도록 하겠습니다. 1. 자간 조절하기 Jetpack Compose 에서는 자간을 줄이기 위해서, letterSpacing 값을 수정해 주어야 하는데요. 이때 사용하는 타입이 TextUnit 입니다. 이 TextUnit 은 아래와 같이, sp나 em 단위를 사용하여 생성할 수 있습니다. 저희가 fontSize를 지정할 때 쓰는 단위와 같이 사용하시면 된다는 것이지요. 2. 자간 줄이기 이제 자간을 줄여보도록 하겠습니다. 여기서는 -1.sp 만큼의 자간을 줄여서 글자간격이 서로 달라붙도록 할 텐데요. 참고로 마이너스 값을 사용하기 위해서 앞뒤에 괄호를 붙여서 사용하였습니다. 2023. 3. 21.
Button Selector 구현 방법 # 버튼 눌렸을 때 Interaction Jetpack Compose 오늘은 Jetpack Compose에서 Button Selector를 구현하는 방법에 대해서 정리해 보도록 하겠습니다. 참고로 예전에 xml로 버튼 selector를 구현하는 방법은 아래 글에 정리되어 있습니다. >> Android 에서 Button 눌렸을 때 이미지 변경 방법 1. 예전방식 Selector 예전에는 아래와 같이 selector xml을 정의해서, pressed를 판별해서 눌려서 true이면 A이미지를, pressed 가 false이면 B이미지를 보여주도록 했습니다. 2. Compose 방식 Compose에서는 UI상태를 State을 통해서 얻고 변경하게 되는데요. pressed 상태는 Interaction State을 통해서 얻어올 수 있습니다. val interactionSource .. 2022. 11. 28.
Jetpack Compose 에서 점선 그리는 방법 정리 # Border dashed line 오늘은 Jetpack Compose 에서 점선을 그리는 방법에 대해서 정리해 보도록 하겠습니다. 1. PathEffect 점선을 그릴 때 필요한 객체가 dashPathEffect객체입니다. DashPathEffect는 JetpackCompose만을 위한 것이 아니라, API 레벨1 시절부터 존재해오던 고전 API입니다. 첫번째 인자가 interval을 나타내구요. 아래와 같이 2이상의 짝수개로 넣어주어야 합니다. val pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f) 2022. 11. 25.
BottomBar Hide 구현방법 정리 # Android Jetpack Compose Jetpack Compose에서는 Acitivity간 이동을 할일은 거의 없습니다. 대신 Compose에서 Navigation을 하는데요. 현재 화면의 route에 따라서 BottomBar 가 사라줘 주어야 할 경우가 있습니다. 오늘은 이것을 구현하는 방법에 대해서 정리해 보았습니다. 참고로 이글을 이해하기 위해서는 Navigation의 구현 방법에 대해서 알고 있어야 하는데요. 이에 대해서는 아래 글을 참조해 주세요. >> Navigation 과 Bottom Navigation 구현방법 정리 # Jetpack Compose 1. BottomBar 가리기 BottomBar 자체를 가리는 것은 그리 어려운 일은 아닙니다. 단순히 아래 이미지와 같이 BottomNavigationBar()부분을, if문으로 .. 2022. 11. 22.
Jetpack Compose 에서 Activity Result 가져오기 # rememberLauncherForActivityResult 오늘은 Jetpack Compose 에서 Acitivity Result를 가져오는 방법에 대해서 정리해 보도록 하겠습니다. 1. rememberLauncherForActivityResult 이전에는 Activity에서 다른 Activity로부터 결과값을 가져올 때 registerForActivityResult를 사용하였습니다. 이와 관련해서는 아래 글을 참조해 주시면 됩니다. >> registerForActivityResult 구현방법 정리 # 예전 onActivityResult Jetpack Compose에서 갤러리에서 이미지등을 가져오려면 registerForActivityResult가 아니라, rememberLauncherForActivityResult API를 사용해 주어야 합니다. 이 API는 .. 2022. 11. 21.
Navigation Drawer 구현방법 # Jetpack Compose 오늘은 Jetpack Compose 를 이용해서 Navigation Drawer 를 구현하는 방법에 대해서 정리해 보도록 하겠습니다. 이 글에서는 TopAppBar등 Scaffold를 이용하면 빠르게 구현할 수 있는 요소들이 있어서, Scaffold 를 사용하고 있는데요. 이에 대한 기본적인 내용은 아래 글을 참조해 주세요. >> Scaffold SnackBar Floating Action Button구현 # Android Jetpack Compose UI Part3 1. Drawer에 표현할 메뉴들 Enum Class로 정의하기 Drawer에 들어올 메뉴들을 미리 정의해 놓았습니다. sealed class로 정의하면, 다이나믹한 데이터를 추가할 수 있지만, enum Class로 들어오면, iterate.. 2022. 11. 16.
Scaffold, SnackBar 그리고 FloatingActionButton 정리 # Jetpack Compose UI Part3 지난 글에서는 Jetpack Compose의 중요한 개념인 State에 대해서 정리하였는데요. 이번 글에서는 Scaffold를 이용해서 머리티얼디자인을 사용하는 방법에 대해서 정리해 보도록 하겠습니다. Jetpack Compose의 지난 글 링크는 아래와 같습니다. >> Jetpack Compose 기본 UI Part1 # Color Card Modifier Column Row >> Jetpack Compose 기본 UI Part2 # State TextField 1. Scaffold Layout 1-1. Scaffold Layout Scaffold 는 Material Design 구조가 적용되어 있는 레이아웃입니다. 이 레이아웃을 이용하면 화면에 Material Design 컴포넌트들을 적절하게 넣을 .. 2022. 11. 15.
State 를 이해하고 TextField 구현하기 # Jetpack Compose UI Part2 지난 글에 이어서 Jetpack Compose 기본 UI Part2에서는 State 에 대해서 다루고, 이를 이용해 TextField를 구현해 보도록 하겠습니다. 지난 part1 글은 아래 링크를 참조해주세요. >> Jetpack Compose UI Part1 # Color Card Modifier Column Row 1. State 1-1. State State의 의미는 상태인데요. 현재 UI의 상태를 의미합니다. UI는 유저나 네트워크의 응답등 따라서 변경된 상태가 반영되어야 하는데요. Composable 함수는 이렇게 변화된 상태를 나타낼 때, 변경된 Value를 가지고 관찰하고 있는 State를 통해 Notify를 받고 그 값을 이용해 Composable함수를 재호출합니다. 이 과정에서, Comp.. 2022. 11. 14.
Jetpack Compose UI Part1 # Color Card Modifier Column Row 오늘은 안드로이드 Jetpack Compose에 대해서 알아보고, 기본적인 UI API들에 대해서 정리해 보겠습니다. 1. Android Jetpack Compose 1-1. NoXML, welcome functions 이제 xml 필요없이 kotlin만으로, Android의 UI까지 개발할 수 있게 되었는데요. 만약, 텍스트, 라디오 버튼의로 구성된 UI가 가로로 있다고 가정해 보겠습니다. 이전에는 xml로 UI를 구성하고, 그것의 reference를 Kotlin코드에서 가져와서, 응답이나 반응등을 코드에서 구현하였는데요. background 이미지를 바꾸거나, 색을 변경해 주었습니다. 이제는 아래와 같은 코드로 UI를 구성하게 되었습니다. Compose에서는 UI 요소들은 더이상 객체가 아니라 함수입.. 2022. 11. 11.
Time Picker 와 Date Picker Compose 로 구현하기 # Android Jetpack Picker 오늘은 Jetpack Compose로 Time Picker 와 Date Picker 를 구현하는 방법에 대해서 정리해 보도록 하겠습니다. 이 글에서 사용하는 API는 특별히 Jetpack Compose 만의 API는 아니구요. 예전부터 사용되던 API인데, ComposeUI에서 가져다가 State에 저장해서 사용하는 방법입니다. 언젠가는 구글에서 JetpackCompose만의 API가 나올지도 모르겠지만, 아직은 기존의 API를 가져다가 사용해야 합니다. 1. TimePicker 1-1. TimePickerDialog API TimePicker Dialog는 API1부터 존재해오던 API입니다. 이 클래스의 생성자를 보면, 다음과 같이 OnTimeSetListener 콜백을 넣어주어야 한다는 것을 알 수.. 2022. 10. 31.
ConstraintLayout 을 Compose 로 구현하는 방법 # Android 오늘은 Compose를 이용해서, Constraint Layout의 구현방법에 대해서 정리해 보도록 하겠습니다. 1. ConstrainLayout 라이브러리 constraint layout을 이용하기 위해서는, 아래와 같이 app레벨의 build.gradle에서 라이브러리를 implement 해 주어야 합니다. implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1" 2. ConstraintSet ConstraintLayout을 사용하기 위해서, UI에 id를 부여해서 사용하는데요. 아래처럼 createRefFor()함수로 reference를 생성한다음, constrain()함수에 인자로 넣어서 사용합니다. constrain람다 .. 2022. 10. 20.
Navigation 과 Bottom Navigation 구현방법 정리 # Jetpack Compose 이 글은 예전에 작성된 글로서, 주제가 방대하여서 Navigation과 Bottom Navigation 의 구현방법을, 아래 2개의 글로 분리하여 정리하였습니다. 1. Navigation 구현방법 Navigation 구현방법은 아래 글을 참조해 주시면 되구요. >> Navigation 구현 방법 총정리 # Route Jetpack Compose Navigation 구현 방법 총정리 # Route Jetpack Compose 오늘은 Jetpack Compose 에서 구현하는 Navigation 에 대해서 정리해 보도록 하겠습니다. 1. Navigation Library 가장 먼저 준비할 것은 navigation 구현을 위해 라이브러리를 implement 하는 것 입니다. 아래의 라이 developer88... 2022. 10. 19.

티스토리툴바