분류 전체보기

아래 글의 업데이트 버전이다.2024.04.29 - [Jetpack Compose] - [Jetpack Compose] Drag and Drop(드래그해서 재정렬) 기능 만들기 [Jetpack Compose] Drag and Drop(드래그해서 재정렬) 기능 만들기Drag and Drop 시작하며최초 목표는 버튼을 잡고 바로 위아래로 슬라이드 하면 드래그되면서 순서가 변경되게 하려 했지만 LazyColumn의 드래그가 clickable이나 detectDragGestures보다 먼저 인식되는 문제developuzzle.tistory.com해당 글에서는 드래그 앤 드롭이라고 했었지만 컴포즈에 별도의 드래그 앤 드롭(Drag and Drop) API 가 별도 존재하기 때문에 좀 더 명확한 이름인 정렬 가능한 ..

Compose의 NavigationBar(전 BottomNavigation)에는 Floating Action Button(FAB)가 없다. 따라서 위의 사진처럼 중앙 버튼이 위로 이동한 형태의 내비게이션 바를 만들기 위해서는 커스텀이 필요하다. 코드 설명Scafflod의 FAB를 사용해 제작할 수 있는데 Scafflod의 FAB는 bottomBar 파라미터 위에 별도로 그려지기 때문에 bottomBar에서 해당 공간을 마련해야 한다.Scaffold( bottomBar = { 중앙에 공간 필요 }, floatingActionButtonPosition = FabPosition.Center, floatingActionButton = { Box( contentA..

Navigation Indicator 사용화면참고로 필자가 사용한 방법은 내비게이션 아이템의 너비가 모두 동일할 때만 사용할 수 있다. 각 아이템의 너비가 달라도 사용할 수 있는 방법은 추후에 별도의 글을 작성 후 추가할 예정이다. 코드 설명- 클래스sealed class Screen( val route: String, val label: String, val selectedIcon: Int, val unselectedIcon: Int) { object HomeScreen: Screen("home_screen", "홈", R.drawable.ic_home_filled, R.drawable.ic_home) object ListScreen: Screen("stash_scr..

Color Picker 시작하며앱 기본 색상 설정화면과 아이템 항목별 배경색 설정을 위해 컬러 피커가 필요해져 몇 개의 라이브러리를 찾아보았는데 기능적으로는 괜찮았지만 디자인 커스텀을 하기 어려워 직접 만들어보았다. 디자인이 마음에 든다면 그대로 사용해도 좋고 필자처럼 본인이 직접 만들고자 하는 사람은 동작 원리를 참고해 직접 커스텀하면 된다. 사용 화면- 첫 번째 영상을 보게 되면 원형 팔레트에서 색상과 채도를 함께 설정하고 그 아래에 있는 두 개의 슬라이더를 통해 각각 명도와 투명도를 조절하게 된다. - 두 번째 영상을 보게 되면 상단의 ARGB값을 수정해 색상을 직접 입력할 수도 있는데 먼저 ffaaggnn는 존재하지 않는 컬러라서 없다는 표시가 뜨게 된다. 다음으로 ffabab는 ARGB 형식..

Scroll Picker 사용화면해당 휠 피커는 연, 월, 일을 선택하는 휠 피커이며 원하는 항목을 사용하도록 커스텀할 수 있다. 예를 들어 맑음, 흐림, 비, 눈, 강풍처럼 날씨를 선택하는 휠 피커를 만들 수도 있다. 코드 설명- 변수// 초기값(2025년 3월)val yearMonth: YearMonth by remember { mutableStateOf(YearMonth.now()) }// ListStateval yearListState = rememberLazyListState(yearMonth.year - 1900)val monthListState = rememberLazyListState(yearMonth.monthValue - 1)// 변수val density = LocalDensity...

시작하며앱 개발 중 텍스트필드에 입력이 제대로 되지 않는 문제가 발생하였다. 글자가 입력 도중 사라지기도 하고 자음은 단독으로 입력되지 않았다. 처음에는 단순한 버그라 생각하고 재시작, 캐시 초기화 등등 일반적으로 해볼 수 있는 방법을 모두 해보았지만 문제는 해결되지 않았다. 도와줘요 ChatGPT먼저 챗GPT에게 물어보았고 이러한 답변을 받았다. 하지만 이미 재구성 최적화를 위해 많은 텍스트필드를 TextFieldState를 사용하는 것으로 바꿔두었고(이전 글 참고) 설마 전부 되돌려야 하나 싶었다. 일단 해결 방법을 보고 텍스트필드 한 개만 value/onValueChange로 롤백해 보았고 슬프게도 문제없이 동작하였고 설마 한글만 그러겠어 싶어서 영어도 작성해 봤지만 더 슬프게도 문제없이 입력되었다..

시작하며BasiceTextField에는 value/onValueChange를 사용하는 버전과 TextFieldState를 사용하는 버전이 존재한다. 이 글에서는 TextFieldState를 사용하는 BasicTextField에 대해 자세히 알아본다. TextFieldState에 대한 내용은 아래 글에서 설명하였다. https://developuzzle.tistory.com/entry/Jetpack-Compose-TextFieldState-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [Jetpack Compose] TextFieldState 사용하기시작하며Compose의 TextField로는 String과 TextFieldValue를 사용하는 두 개의 버전이 존재한다. TextFiel..

시작하며Compose의 TextField로는 String과 TextFieldValue를 사용하는 두 개의 버전이 존재한다. TextFieldValue는 selection을 포함하고 있는 클래스로 String을 사용하는 기본 TextField에 커서 위치를 조절할 수 있는 기능이 추가된 버전이다. 하지만 일반 TextField는 커스텀이 어려운 편이라 커스텀하기 용이한 BasicTextField를 사용하게 되는데 BasicTextField에는 기존 두 가지 버전 이외에도 TextFieldState를 사용하는 버전이 추가되어 총 세 가지 버전이 존재한다. 이 글에서는 그중에서 TextFieldState이 사용되는 BasicTextField와 TextFieldState에 대해 알아본다.  TextFieldSt..