android compose25 [Android, Kotlin] 카테고리 기능 구현 (17) 이번 포스팅에서는 마지막 기능인 카테고리 기능을 구현한 것에 대해 포스팅을 하려고 한다.꽤나 오래 걸렸는데, 내가 천천히 개발한 것도 있고 카테고리를 만들면서 다른 UI적 요소와 기능들이 추가되어야 했기 때문에 오래 걸렸던 것 같다. 바로 내가 어떻게 카테고리 기능을 구현했는지 간단하게 알아보도록 하자.간단히 알아볼 예정이라 코드에 대한 설명이 미흡할 수 있다..! 1. 카테고리 화면 생성우선은 먼저 카테고리 화면을 생성해 주었다.카테고리 화면에서는 자신이 생성한 모든 카테고리를 볼 수 있고, 카테고리를 수정하거나 삭제할 수 있도록 만들어 주었다. @Composablefun CategoryScreen(categoryViewModel: CategoryViewModel = viewModel()) { . . .. 2024. 5. 11. [Android, Kotlin] 일정 item에 menu 추가해서 일정 수정하기 기능 추가하기 (16) 이번에 만들 기능은 일정 추가 기능이다. 일정 수정을 일정 생성할 때 할 수 있었는데, 이를 생성하고 나서도 수정할 수 있게 만들어야 나중에 일정 생성하고도 수정사항이 있을 때, 일정을 새로 생성해야 하는 불편함을 줄일 수 있을 것 같았다. 그러면 바로 만들어 볼까? 1. 설계 우선은 일정 수정 기능을 어떻게 만들지 생각해야 한다. 일단 바로 생각난 것은 더보기 아이콘을 이용한 dropdown menu를 생성하는 것이었다. 일정 정보 item의 오른쪽 끝에 더보기 아이콘을 넣어서 더보기 icon을 클릭하면 dropdown menu를 열어서 일정 수정하기 기능을 만드려고 했었는데.... dropdown menu 특성상 커스텀이 어려웠고, 막상 적용해 보았는데 생각보다 안 어울려서 내가 따로 menu를 만들.. 2024. 4. 19. [Android, Kotlin] SwipeToDismiss을 이용한 밀어서 삭제하는 기능 구현하기 (15) 이번 포스팅에서는 LazyColumn 안에 SwipeToDismiss을 이용해 옆으로 밀어서 일정을 삭제할 수 있도록 하는 기능을 구현해 보겠다. SwipeToDismiss는 생각보다 많이 어렵지는 않았기에 이 글을 보고 나서 쉽게 사용할 수 있을 것이라고 생각한다. 그러면 바로 어떻게 사용하는지 알아보자. 참고로 따로 dependency를 설치할 필요는 없다. compose 기본 dependency에서 모두 지원되는 기능들이다. 1. dismissState 생성 SwipeToDismiss를 이용하기 위해서는 dismissState 데이터가 필요하다. dismissState는 사용자가 item을 옆으로 밀었을 때를 감지하는 역할을 한다. val dismissState = rememberDismissSta.. 2024. 4. 16. [Android, Kotlin] Compose로 동적 checkBox 리스트 만들기 (12) 오랜만에 포스팅을 올려본다. 요즘 현생을 사느라 많이 바빴었기에, 이제야 Planner 개발 기록을 올리게 되었다. 또한 기존 checkBox 리스트의 문제를 해결하느라 더 오래 걸렸던 것 같다 >:( 이번에는 주간 통계표를 구현하면서 있었던 일들에 대해서 설명해 주겠다. 1. 계획 주간 통계 리스트를 만들기 위해 기존에 구현한 로직을 테스트하던 중, 나는 문제 하나를 발견했다. Planner의 일정을 보여주는 로직은 날짜를 클릭해서(날짜가 변함에 따라서) 일정의 정보가 바뀌어야 하는 로직으로 구현하였는데, 날짜를 클릭해서 날짜를 바꾸면 기존의 checkbox state가 변하지 않고 바뀌기 전 것으로 계속 남아있는 문제를 발견했다. 위와 같이 기존에 선택된 일정 정보(11월 27일의 가장 위의 2개의 .. 2023. 12. 4. [Android, Kotlin] Compose에서 DataStore 사용하기 (11) 이번 시간에는 Plan Screen에 지난에 Create Plan을 만들면서 생성한 일정 정보를 앱에 띄워주는 작업을 해줄 것이다. 이 작업은 그냥 Firebase의 데이터를 불러와서 앱에다가 보여주면 되는 간단한 기능이고, 관련 자료도 많아서 굳이 코드를 보여주면서 자세히 설명해주지는 않겠다.(절대 귀찮아서가 아니다 ^^) 이번에 필자가 Plan Screen 기능을 적용하면서 겪은 문제는 여기 평범한 달력에 현재 날짜가 아닌 다른 날짜의 일정 정보를 추가하고자 할 때, 일정 추가를 통해 Create Plan Screen으로 갔다가 다시 이 화면으로 왔을 때에는 기본으로 설정한 날짜로 바뀌는 문제가 계속 발생했다. 그래서 이번에는 필자가 다음과 같은 문제를 어떻게 해결하였는지를 설명해보려 한다. 1. C.. 2023. 11. 19. [Android, Kotlin] Compose로 Firebase Google Login 구현하기 (8) 오랜만에 Planner V2 개발일지이다. 요즘 다른 활동(코테, 타 프로젝트)을 하느라 Planner V2를 잠시 놓았었는데 이제 다시 시작해볼까 한다. 이번에는 본격적인 기능 개발로 Firebase Google Login을 구현해 보도록 하겠다. 평범한(?) Planner에 구글 로그인을 넣은 이유는 로그인된 유저 정보를 이용해 일정들을 따로 Firebase Database에 저장하기 위해서이다. 그러면 바로 필자가 구글 로그인을 구현한 과정을 알아보자. 1. 라이브러리 추가하기 Firebase Auth 라이브러리를 추가해 주자. implementation("com.google.firebase:firebase-auth:22.2.0") implementation("com.google.android.gm.. 2023. 11. 9. [Android, Kotlin] Compose에서 동적 List 만들기 (7) 이번 포스팅에서는 Planner v2의 일정 생성 화면을 구현하면서 알게 되었던 지식들을 풀어볼까 한다. 마지막으로 ui를 구현할 화면은 일정 생성 화면이다. 일정 생성 화면은 plan screen의 점선으로 된 추가하기 card처럼 아무것도 없는 화면에 그 card를 눌러서 일정을 생성하고 일정 card를 클릭해서 일정을 수정할 수 있게 구현해 보겠다. 간단하게 UI를 구상해 보았다. text 부분에 일정 생성이라는 타이틀을 넣고 처음에는 아무것도 없는 화면에 점선으로 된 + card를 누르면 일정이 생성되고 일정을 클릭하면 일정의 정보를 수정할 수 있도록 구현하겠다. 1. 일정 Card 구현 우선은 일정 추가 card부터 만들어 보자. card의 border를 점선으로 설정하는 방법은 이전 포스팅에서.. 2023. 10. 24. [Android, Kotlin] Compose Lazycolumn의 scroll state 관리하기 (6) 이번에 Planner v2를 개발하면서 Plan(main) screen에서의 add schedule icon이 너무 사용자들에게 불편할 수도 있다는 느낌을 받았었다. 일정 header 부분에 + icon은 사용자들이 실제로 사용한다면 icon의 크기가 작아서 클릭이 힘들어 보일 것 같았다.(크기를 키우기에는 header 크기도 같이 커지기에 애매했다.) 그래서 기존의 icon을 LazyColumn의 맨 아래에 card로 만들어서 생성할 수 있도록 만들기로 했다. 그렇게 만들면 일정을 많이 생성하는 사용자들이 스크롤을 한참 해야 맨 아래로 도달해서 불편할 것 같았기에 따로 맨 아래, 맨 위로 스크롤 해주는 작은 button도 만들어 보기로 했다. 1. 자동 Scroll Button 만들기 button의 u.. 2023. 10. 21. [Android, Kotlin] Compose Vico 라이브러리로 ComposedChart 만들기 (5) 지난 포스팅에서 Compose Chart 라이브러리인 Vico 사용법과 Vico로 Column Chart 만드는 것까지 해보았다. 이번 포스팅에서는 지난 포스팅에서 언급했다시피, Vico에서 Composed Chart(혼합 차트)를 만들어 보도록 하겠다. 1. Composed Chart 만들기 Composed Chart는 혼합 차트를 뜻하는데, line chart와 column chart를 혼합해서 사용할 수 있다. 실제로 Vico wiki에서도 두 차트를 동시에 사용한 예제가 있었다. 하지만 필자는 Column Chart를 두 개를 이용해서 데이터를 표시하고 싶었기에, column 차트 2개를 사용했다. Vico 라이브러리에 대한 설명과 Column Chart 구현에 관한 자세한 설명이 필요하면 이전 .. 2023. 10. 20. [Android, Kotlin] Compose에서 Calendar 사용하기, LazyColumn Data 구성하기 (3) 이전 포스팅에서는 Compose에서 Bottom navigation bar를 만드는 것으로 마무리 지었는데 이번 포스팅에서는 필자가 Plan Screen의 UI를 만들면서 있었던 일에 대해 설명해 보겠다. UI 설계는 어떻게 하였는가? UI 설계는 기존 Planner의 UI를 참고해서 만들었다. 위에는 달력을 달고 아래에는 선택된 날짜의 일정들을 보여주는 방식으로 구현해 보겠다. 1. 달력 만들기 UI를 구성하려면 먼저 달력을 만들어야 한다. 필자가 Compose에서 제공하는 달력이 있나 찾아보았지만 아직은 관련 달력 라이브러리가 제공되지는 않는 듯했다. 그런데 사용할 만한 라이브러리는 찾을 수 있었다. https://github.com/kizitonwose/Calendar GitHub - kiziton.. 2023. 10. 16. [Android, Kotlin] Compose Material3 Bottom Navigation의 Indicator 효과를 제거하기 (2) 죽은 프로젝트 살리기 2탄 이슈 해결기 지난 죽은 프로젝트 살리기 1탄에서는 v2 계획 후 데이터베이스 설계까지 완료하였다. 그래서 필자는 지난 포스팅을 올리고 난 뒤로 바로 Planner v2 개발을 시작하였다. 필자의 머릿속에는 bottom navigation을 활용해서 화면 2개를 메인으로(달력이 있는 화면, 통계 화면) navigation bar를 구성하는 작업을 하는 중 다음과 같은 UI적 불편함(?)이 있었다. 사진을 보면 클릭이 된 부분에 파랗게(?) 둥근 effect가 발생하고 있는 것을 볼 수 있다. 필자 기억으로는 material3에서 제공하는 기본적인 indicator라고 알고 있는데, 필자의 경우에는 저 effect를 삭제하고 싶었다. 저 effect를 indicator라고 한다. .. 2023. 10. 14. [Android, Kotlin] Compose에서 glance를 이용해 위젯 만들기 이번에 공부한 내용은 compose로 위젯을 만드는 라이브러리인 glance이다. glance의 존재(?)는 이전에 들으러 갔던 컨퍼런스 강연에서 glance에 관련된 강연을 들게 되었는데, 그때부터 기회가 되면 공부해 보자 라는 생각을 하게 되었다. 그게 지금이다. glance는 compose에서 위젯을 쉽게 만들 수 있게 해주는 라이브러리이고 2023년 8~9월에 1.0.0을 출시한 따끈따끈한 신상(?) 라이브러리이다. 아무튼 그래서 이번에 compose glance를 공부한 내용을 블로그에 정리해보려 한다. 그럼 바로 glance 사용법을 알아보자. 1. 라이브러리 추가하기 먼저 glance 라이브러리를 추가해 준다. // glance implementation("androidx.glance:gla.. 2023. 10. 6. [Android, Kotlin] exoplayer와 media3를 이용해 영상 재생하기 이번에는 필자가 자주 시청하는 youtube를 보고 youtube가 exoplayer를 이용해 제작되었다는 말을 들었기 때문에 이번 기회에 exoplayer를 공부해 보기로 했다. 이번의 exoplayer 예제는 프로젝트 안의 mp4 파일을 불러오는 과정을 담았다. 참고로 현재 자주 사용하는 compose를 이용해 구현해 보겠다. exoplayer란 무엇일까? exoplayer는 android에서 사용 가능한 미디어 재생 라이브러리이다. 1. dependency 추가 exoplayer와 media3을 사용하기 위해 dependency를 추가한다. // exoplayer compose implementation("com.google.android.exoplayer:exoplayer:2.19.1") impl.. 2023. 8. 25. [Android, Kotlin] compose custom theme 만들기 이번 포스팅은 지난 포스팅에서 말했다시피 커스텀 테마에 대한 간단 설명과 코드를 알려주도록 하겠다. 커스텀 테마를 왜 만들어야 하는지 궁금한 사람들이 있을 것 같아 간단히 설명하자면 대형 프로젝트를 하다 보면 color가 다양해질 수 있기에 기본적으로 android studio에서 제공하는 color palette가 부족할 수 있다. 그리고 디자이너가 정한 color명을 그대로 적용하기 힘들기 때문이다. 이럴 때에는 custom theme를 만드는 것을 고려해 볼 수 있다. 그래서 필자는 이번 대형 프로젝트에 대비해 커스텀 테마를 제작해 보기로 했다. 자 그럼 이제 코드로 필자가 custom theme를 만들었던 과정을 확인해 보자. 시작하기 전에! 첫 번째 단계는 theme 상태를 확인할 수 있는 en.. 2023. 8. 18. [Android, Kotlin] compose로 custom checkbox 만들기 이번에 design system을 만드는 작업을 하고 있었는데 checkbox를 만들어야 할 일이 있었다. 이번에 필자 같은 경우 말고도 다른 프로젝트를 할 때에도 checkbox를 사용해야 할 일이 있을 것이다. 하지만 기본 checkbox의 모양으로는 만족스럽지 못한 경우도 있을 것이다. 그래서 이번에 필자는 custom checkbox를 만들어 보았다. 필자가 checkbox를 어떻게 만들었는지 코드를 통해 확인해 보자. 1. custom checkbox를 만들기 위한 준비물(?) 일단 처음 만들 때 필자는 custom dialog를 만들기 위해 무엇이 필요한지 생각해 보았다. 그래서 하나의 결론에 도달했다! check 되었을 때의 checkbox layout, check 되지 않았을 때의 chec.. 2023. 8. 18. 이전 1 2 다음 728x90
