Android/Jetpack Compose (27) 썸네일형 리스트형 [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.. [Android] Epoxy를 사용하여 RecyclerView를 쉽게 사용해보자 -2. DataBinding 본 게시글은 이전 글에 이어서 작성된 부분입니다. 2022.09.01 - [Android/Utility] - [Android] Epoxy를 사용하여 RecyclerView를 쉽게 사용해보자 -1. 기본 이전 게시글에 이어서, Epoxy에 DataBinding을 적용하여 사용하는 방법에 대하여 알아보도록 하겠다. 우선, Epoxy에 Databinding을 사용하기 위해서는 Module 범위의 Gradle에 dependency를 추가해주어야 한다. implementation "com.airbnb.android:epoxy-databinding:$epoxy_version" 물론, android 블록에 dataBinding에 대한 사용 설정도 해주어야 한다. dataBinding { enabled = true }.. [Android] Epoxy를 사용하여 RecyclerView를 쉽게 사용해보자 -1. 기본 기술 블로그를 확인하다, Epoxy라는 유용해 보이는 라이브러리를 발견하였다. RecyclerView를 보다 사용하기 쉽게 도와주는 라이브러리라고 해서 찾아보고, 간단하게 적용해보았다. 해당 라이브러리를 사용하고, 가이드 한 글은 외국 블로그에서 많이 찾아볼 수 있었는데, 생각보다 따라서 구현했을 때 정상적으로 한 번에 실행되는 경우가 없었던 것 같다. 따라서, 해당 라이브러리의 Github를 토대로 필자가 적용한 순서대로 정리하여 글을 작성해 보았다. 우선, Epoxy가 무엇인가 ? Airbnb 사에서 만든 라이브러리로, RecyclerView에서 복잡한 화면을 쉽게 구현하는 것을 도와주는 라이브러리. 이다. RecyclerView를 사용하고 화면에 보여주기 위해서는 Adapter와 ViewHolder.. [Android] Compose 사용하기 - 2. Side Effect와 Coroutine 2 본 게시글은 이전 글에 이어서 작성된 부분입니다.2022.06.07 - [Android/Jetpack] - [Jetpack] Compose 사용하기 - 1. remember와 MutableState2022.06.10 - [Android/Jetpack] - [Jetpack] Compose 사용하기 - 2. Side Effect와 Coroutine 1 이전 게시글을 작성하다 보니 상당히 양이 많아지고 있어서 분리해서 작성하도록 하였다. Side Effect와 Coroutine 1 편에 이어서 작성된 글이니 1 ~ 3번째 항목에 대하여 확인이 필요한 경우 위의 이전 게시글을 확인하길 바란다.네 번째 항목은DisposableEffect이다. 이것은 LaunchedEffect와 동일한 역할을 하나, 재구현이나 종.. 이전 1 2 3 4 다음
