Android/Jetpack Compose (22) 썸네일형 리스트형 [Compose] Coil을 사용하여 벡터파일인 SVG Image을 불러오는 방법. (feat. GIF Image) 개발을 하면서 이미지 파일을 사용하다 보면 어렵지 않게 SVG 파일을 사용할 수 있다. SVG는 Scalable Vector Graphics의 약자로 2 차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다. JPEG, PNG와 함께 자주 사용되는 이미지 파일 형태로, SVG는 특히 해상도를 대응해야 하는 복잡하지 않은 이미지 파일, 아이콘 등에 자주 사용한다. 필자도 실무를 진행하면서 SVG 파일을 자주 사용해왔는데, 생각해 보면 이번 이슈를 만나기 전까지는 SVG 파일은 resource file로 로컬에 저장해 두고 불러오는 형식으로만 사용을 했었다는 것을 알 수 있었다. 지금까지 Image load library로는 glide만 사용하고 있었는데, Glide에서는 별도의 작업을 해주지 않으.. [Compose] Text Style에 em 단위를 사용해보기. Compose를 사용해 UI를 그리다 보면, 다양한 Style을 가지고 있는 Text 뷰를 그리게 된다. 이번에 업무를 진행하다 Text에 대한 디테일한 Style을 조정하다가 지금까지 사용해 왔던 글자의 크기 단위인 sp를 사용하지 않고, 기존에서 몇 % 와 같이 배율을 통해 Text의 style을 조정해야 하는 케이스가 발생했다. 비율을 통해 Text style을 조정하려다보니 Compose에서는 sp뿐 아니라 em의 단위가 있다는 것을 발견하여 한번 사용해 보았다. 우선, em의 단위란 무엇인가부터 확인해 보자. 저번에도 확인했었던 TextUnit에 대한 설명을 보면 다음과 같이 나와있다. This unit can hold either scaled pixels (SP), relative font s.. [Compose] Parents View의 크기를 구해 자식뷰에 적용하기. Compose를 사용하여 UI를 그리다 보면, 생각보다 유동적인 뷰를 갖고 있는 UI를 그리는 경우가 많다. 기본적으로 Column, Row를 사용하는 경우에는 유동적인 View라고 하더라도 쉽게 구현이 가능하지만, Box를 사용하게 되면 생각보다 까다로운 점들이 많이 생긴다. 필자는 업무를 진행하다보니 Box Layout 내부에 있으면서 유동적인 데이터에 따라서 별도의 뷰를 또 그려야 하는 상황을 자주 마주쳤다. 이때, 어떻게 꼼수를 써가면서 구현을 하다가 막히는 케이스가 발견되어 다른 방법을 찾아보다 부모의 뷰의 크기를 구하여 적용하는 방법을 찾아내어 적용하였다. 해당 방법을 사용하기 위해서는 fun Modifier.onSizeChanged 해당 Modifier 함수 하나만 사용하면 된다. 해당 함수.. [Compose] Flexbox Layout를 구현해보자. 필자가 실무를 경험하면서 유용하게 사용했던 UI Component 중 Flexbox Layout이라는 것이 있다. FlexBox Layout은 UI에서 아이템의 개수, 크기가 다를 때 디바이스 크기에 맞춰 한 라인에 보여줄 아이템의 개수를 정해주고 라인을 바꾸어 아이템을 보여주는 것이다. 이러한 특성을 띄고 있기 때문에 주로 해시태그 와 같은 UI를 그려줄 때 많이 사용한다. 이런식으로 말이다. 해시태그라고 하여 텍스트만 생각할 수 있지만 이미지 같은 것들도 많이 사용하곤 한다. 위와 같이 그려주기 위해서는 어떻게 해야 할까? 코드는 생각하지 않고, 단순하게 생각해 보면 다음과 같다. 추가할 아이템의 크기 (width, height)를 구한다. 아이템을 추가했을 때 그려줄 영역을 초과하는지 계산한다. 초.. [Compose] Modifier Extension - 클릭 이벤트 효과 방지, 다중 클릭 이벤트 방지 필자가 Compose를 실무에서 사용하면서, 가장 자주 사용하는 두 가지 Click Event 유틸을 소개하고자 한다. 첫 번째로는 클릭 이벤트 효과를 없애주는 것, 두 번째로는 다중 클릭 이벤트를 방지해 주는 것이다. 이 두가지 유틸은 한번 작성해 두면 수정 없이 사용이 가능할 뿐 아니라, 항상 사용하기 때문에 Compose로 개발을 하는데 큰 도움이 되지 않을까 생각한다. 기본적으로 버튼과 같은 경우 클릭 이벤트 효과. RippleEffect가 존재하기 때문에 원하지 않아도 클릭되었다는 것을 명시적으로 보게 된다. 하지만, 실무에서 서비스를 만들다보면 클릭 이벤트 효과가 있는 것이 더 어색하고 이상한 케이스가 많기 때문에 클릭 이벤트에는 늘 해당 유틸을 적용시켰다. 따라서, Modifier에서 적용할.. [Compose] Keyboard Issue in LazyColumn TextField 필자가 Compose를 사용하던 도중 만났던 문제 중 하나로, LazyColumn 안에 TextField Component가 존재할 때 Keyboard가 정상적으로 보이지 않았던 문제가 있다. 처음 해당 문제를 발견했을 때는 단순히 LazyColumn에서 Focus를 잘못 잡는다던지, 아니면 Recomposable이 일어나는 과정에서 Keyboard에 들어갔던 Focus를 잃어버렸기 때문에 발생한 문제라고 파악을 했었다. 문제가 발생하는 경우는 아래의 영상과 같다. 결과부터, 해결책부터 말하자면, Compose에서 자체적으로 갖고 있던 문제였고 1.4.0-alpha04 버전 이후로 해결이 되었으며 해당 버전 이후의 버전으로 사용하면 위와 같은 이슈는 발생하지 않는다. 이번 글에서는 Compose 1.3... [Android] Compose Sample Project에서 겪은 Version 문제 해결 방법과 순서 오랜만에 블로그 글을 작성하기 앞서, 기존에 작성했던 프로젝트들을 한번 둘러보았다. 둘러보던 도중, Compose Sample Project가 정상적으로 Build 되지 않았고, 해당 문제는 다양한 Version이 낮아 발생하는 이슈로 빌드가 되지 않았다. 따라서, 해당 프로젝트가 정상적으로 빌드되기까지 진행했던 작업들에 대해 기록해두고자 한다. Compose의 버전을 올림으로서 발생하는 Compose syntax Error를 제외하고, 일반적으로 IDE 환경에서 발생할 수 있는 이슈들이라고 생각이 되었고, 필자와 마찬가지로 낮은 버전에서 버전을 올릴 경우 최소 아래 기술한 내용들을 모두 체크하고 작업해야 하므로 이후 작업에도 도움이 될 것이라고 판단하였다. Sample Project를 가져와서 다시 빌.. [Android] Epoxy를 사용하여 RecyclerView를 쉽게 사용해보자 -3. other layout 본 게시글은 이전 글에 이어서 작성된 부분입니다. 2022.09.01 - [Android/Utility] - [Android] Epoxy를 사용하여 RecyclerView를 쉽게 사용해보자 -1. 기본 2022.09.05 - [Android/Utility] - [Android] Epoxy를 사용하여 RecyclerView를 쉽게 사용해보자 -2. DataBinding 이전 게시글에 이어서, 이번엔 Epoxy를 사용하여 흔히 사용하는 layout을 만들어보고자 한다. 이전 게시글에서는 가장 기본적으로 LinearLayout을 사용하여 recyclerView를 구현했었다. val linearlayoutManager = LinearLayoutManager(this) binding.epoxyRecyclerVie.. 이전 1 2 3 다음
