[Compose] 특정 텍스트 색상 변경에 대한 고민

문제 상황 Compose로 UI를 구성하던 중에 문제 상황이 발생하였습니다. 위의 이미지와 같이 검색 결과 중 검색어와 같은 글자의 텍스트 색상을 변경하는 디자인을 구성해야 했습니다. xml로 작업할 때는 RecyclerView의 adapter에서 함수를 사용해서 쉽게 변경할 수 있었지만, compose를 배우고 있는 터라 방법을 찾기 어려웠습니다. 구글링을 통해서 관련 라이브러리나 함수를 찾아보았지만 마땅한 방법이 없어서 직접 알고리즘을 구현하기로 결심하였습니다. 알고리즘 고민 단순히 검색 글자와 같은 부분을 찾아서 색상을 변경하기에는 아래와 같은 문제가 있었습니다. 1. 검색 내용을 여러개 포함하는 경우 - "바다" 단어로 검색을 하였을 때, "바다 앞 바다 카페" 의 검색 결과의 경우 2가지 검색 ..

• format_list_bulleted [Android] Tech,Study/[Android] Trouble Shoot
• · 2023. 9. 21.
• textsms

[Android,Paging] Compose에서 Paging Library 구현하기 (2)

Paging Library 구현 2번째 포스팅 입니다. https://jinudmjournal.tistory.com/131 [Android,Paging] Compose에서 Paging Library 구현하기 (1) Paging 라이브러리 Paging 라이브러리는 대규모 데이터 세트에서 페이징 된 데이터를 로드하여 표시하는 기능을 제공한다. Paging 라이브러리를 사용해서 네트워크 데이터 소스에서 페이징 된 데이 jinudmjournal.tistory.com Paging 구현 순서 이 포스팅에서 사용하는 Paging 구현 순서는 아래와 같다. 1. Data Model을 정의한다. - Entity, Dto, Domain Model, Mappers.. 2. RoomDB를 구현한다. 3. Retrofit 등 ..

• format_list_bulleted Deep Dive/Android Jetpack Compose
• · 2023. 9. 16.
• textsms

[Compose] Preview에 Viewmodel 연결하기

Jetpack Compose로 개발 중에 Preview에 Viewmdodel을 적용하는 코드를 작성한다. @Preview(showBackground = true) @Composable fun DefaultPreview2() { MyFoodDiaryBookAOSTheme { MainUi(todayViewModel = TodayViewModel()) } } Main화면을 담당하는 MainUi 적용 시, 위와 같이 뷰 모델을 적용해야 했다. 하지만 ComponentActivity 내부에서 viewmodel을 선언해서 사용해야하는데, MainUi 함수의 경우 따로 뷰 모델을 선언할 수 있는 코드를 작성할 수 없다. 따라서 적용하려 하는 뷰 모델의 껍데기 역할을 담당하는 FakeViewModel을 만들어서 Pre..

• format_list_bulleted Deep Dive/Android Jetpack Compose
• · 2023. 7. 26.
• textsms

[Android] Jetpack Compose (3)

https://developer.android.com/codelabs/jetpack-compose-migration?hl=ko#0 마지막으로 Compose를 활용해서 리스트 목록과 애니메이션을 추가하는 기능을 알아봤다. Jetpack Compose에서는 리싸이클러뷰처럼 어댑터와 레이아웃을 작성할 필요가 없다. LazyColumn, LazyRow, LazyVerticalGrid 처럼 Composable 함수를 사용해서 작성한다. Compose 함수로 UI를 구성할 때, Ui 상태를 저장하기 위해서 메시지 확장을 추적해야 한다. 이 추적 기능을 구현하기 위해서 remember와 mutableStateOf 함수를 사용해야 한다. Message Card 생성 리스트 뷰의 각 아이템에 애니메이션을 적용하고, 아이..

• format_list_bulleted Deep Dive/Android Jetpack Compose
• · 2023. 7. 25.
• textsms

[Android] Jetpack Compose (2)

UI 디자인하기 이전 포스팅에서 text뷰와 textField를 jetpack Compose 방식으로 적용하는 방법을 배웠다. 이제 화면을 담당하는 레이아웃과 그 내부의 코드를 작성하는 방법을 공부해야 한다. 이 방식을 익혀서 Activity에서 xml을 통해 작성한 레이아웃을 Jetpack Compose로 구현하는 연습을 한다. 연속 텍스트와 이미지 적용하기 구성 함수를 통해서 UI 계층 구조를 빌드하는 과정으로 연속 텍스트와 이미지를 적용한다. 간단한 메시지 함수를 빌드하고, 메시지를 표현하는 코드를 작성했다. 우선 메시지 데이터를 나타낼 data class를 선언했다. // 여러 텍스트 추가 data class Message( val author : String, val body : String, ..

• format_list_bulleted Deep Dive/Android Jetpack Compose
• · 2023. 6. 25.
• textsms

[Android] Jetpack Compose (1)

아래 블로그 포스팅을 참고했습니다. https://blog.mathpresso.com/jetpack-compose-%EB%A1%9C-%EA%B8%B0%EB%8A%A5%EC%A0%84%EC%B2%B4%EB%A5%BC-refactoring-%ED%95%B4%EB%B3%B4%EC%9E%90-2b921c624e80 요즘 핫🔥-한 Jetpack Compose 로 기능 하나를 통째로 Refactoring 해보기 곧 몰아칠 새로운 UI 개발 패러다임에 대비해보자 blog.mathpresso.com Jetpack Compose SwiftUI, Flutter 와 같은 선언형 UI 기존의 안드로이드의 XML이나 IOS의 StoryBoard로 작성하는 방식은 특정 상태에 따라 UI를 어떻게 보여줄 지를 구상하여 구현하게 된..

• format_list_bulleted Deep Dive/Android Jetpack Compose
• · 2023. 6. 25.
• textsms