ANDROID/UI - UX (28) 썸네일형 리스트형 안드로이드 RecyclerView 커스텀 LayoutManager 구성하기 현재 안드로이드에서는 RecyclerView와 사용 가능한 세 개의 LayoutManager를 제공하고 있다.(GridLayoutManager, LinearLayoutManager, StaggeredLayoutManager) 하지만 경우에 따라 여기중 어느 것으로도 원하는 아이템 구성을 RecyclerView에 적용하지 못할 수 있다. 그렇다면 이제.. 직접 커스텀 LayoutManager를 구성해야만 한다! 이번 작업을 위해 아래의 포스트를 참조했다. A Custom LayoutManager Case: Bumble Beeline A step by step guide to building a custom LayoutManager medium.com 이제 직접 해야할 때 커스텀 LayoutManager를 .. [Android/UI-UX] 텍스트의 일부에 스타일 및 터치 이벤트 설정하기 안드로이드 TextView에 적용하는 Text의 일부의 스타일을 바꾸고, 터치 이벤트도 주고 싶다면 어떻게 해야 할까? Spannable Text로 이를 해결할 수 있다. 1. 적용하고자 하는 string을 toSpannable()을 사용해 Spannable로 만든다. 2. setSpan으로 적용할 Span을 필요한 만큼 설정한다. 클릭 이벤트를 주고 싶다면 ClickableSpan을, 텍스트 스타일을 변경하려면 TextApperanceSpan을 사용한다. 3. 설정이 완료된 Spannable을 적용하고자 하는 TextView의 text에 설정하면 된다. val textView: TextView val sampleString = "Clickable and styleable" val clickableSpa.. [Android/UI-UX] 유동적인 TextView의 사이즈를 제한하고, 정렬까지(with ConstraintLayout) UI 구성을 하면서 때때로 유동적으로 늘어나는 View 때문에 골머리를 앓을 때가 많다. 극단적으로 짧은데서 극단적으로 길어질 수 있는 텍스트를 담는 TextView, 그리고 이 좌측에 붙어야 하는 ImageView까지.. 하드코딩으로 가기 쉬운 요구사항 들이다. 다행스럽게도 안드로이드에는 ConstraintLayout이 있었으니, 이를 이용해 아래 세가지의 요구사항을 모두 충족시킬 수 있었다. TextView는 화면의 우측에 붙는다. TextView는 화면의 중앙 영역까지만 늘어난다 TextView의 좌측에는 아이콘이 들어간 ImageView가 있어야 한다. [안드로이드/UI-UX] Material BadgeDrawable 로 Badge를 원하는 뷰에 적용하기 Material Design의 BottomNavigationView를 사용해본 적이 있다면 매우 간편하게 Badge를 업데이트 할 수 있음을 경험한 적이 있을 것이다. 금번에 뱃지를 BottomNavigationView가 아닌 별도 View(이를테면 TextView 라던지)에 달아야 하는 경우가 생겼는데, 쓸만하고 예쁘다 싶은 라이브러리가 잘 없었기에, Material의 Badge가 떠오르는 건 어쩔 수가 없었다. 그런데 다행스럽게도 구글에서 Material Components 1.1.0-alpha09 버전부터 Badge를 지원하고 있다는 반가운 소식! Release 1.1.0-alpha09 · material-components/material-components-android Dependency Up.. [안드로이드] Material Design의 Chips를 사용해보자 Google은 Material Design과 함께 별도로 안드로이드에서 바로 사용 가능한 Component들을 제공하고 있다. 이 중 필터링 설정이나 작은 텍스트를 보여주는데 유용한 Chips를 사용해봤다. Material Design에서는 다음과 같은 네 종류의 Chip들을 정의하고 있다. Entry Chip Filter Chip Choice Chip Action Chip Entry Chip은 복잡한 정보를 간략하게 보여 줄 때 사용하도록 권장하고 있고, chip 아이콘과 닫기 아이콘을 별도로 설정이 가능하다. 추가적으로 체크 상태(선택된 상태)를 지정이 가능하다. Fliter Chip은 검색 결과나 내용등에 필터를 걸 때 사용하도록 권장하는 chip이다. 추가적으로 체크 상태(선택된 상태)를 지정이 .. [안드로이드 | 코틀린 ] 뷰가 겹치는 상황에서 터치 우선순위 관리하기 보통 이런저런 상호작용이 들어가는 UI/UX 를 개발하다 보면 겹치는 뷰로 인해 골머리가 썩게 되기 마련이다. 이번 경우에는 BottomSheetBehavor가 적용된 Layout과 부모뷰인 SwipeRefreshLayout간의 간섭으로 인해 생기는 이슈였는데, 펼쳐진 자식뷰가 Swipe 가능한 부모뷰를 전부 덮게 되면서, 스와이프로 내릴 수 있는 자식 뷰를 내리지 못하고 부모뷰를 통째로 스와이프 해버리게 되어 결론적으로 펼쳐지고 나서는 접을 수가 없는 상황이 생겨버렸다. 터치 이벤트의 우선순위를 조정이 가능하단 것은 인지하고 있었는데, 이를 어떻게 지정해주어야 하는가? 검색끝에 깔끔한 해결책을 찾을 수 있었다. 우선순위를 두고자 하는 뷰에 onTouchListener를 넣어 특정 조건에서 부모 뷰에 r.. [안드로이드] Elevation 효과가 적용된 CardView ViewPager 구현하기 이번에 매터리얼 카드뷰 형태의 ViewPager를 구현해야 하는 요구사항이 생기면서, 일전에 한번 스쳐본 적이 있던 레퍼지토리에 다시 방문했다. rubensousa/ViewPagerCards ViewPager cards inspired by Duolingo. Contribute to rubensousa/ViewPagerCards development by creating an account on GitHub. github.com 해당 레퍼지토리에서는 일반적인 CardView 형태의 ViewPager 구현은 물론 Elevation 효과까지 적용 가능한 코드들을 제공하고 있다. JAVA 기반 소스이기에 이를 프로젝트에 적용하면서 코틀린 및 binding된 요소들과 섞는 작업을 했다. 작업을 진행하면서 필요한.. [안드로이드] ViewPager의 페이지 별 요소를 참조할 때의 유의점 ViewPager에 개별 페이지를 구현하고자 할 때에는 기존 방식에서 이슈가 없었는데, 개별 페이지 내에서 조작해야 하는 요소가 들어가고 나니 문제가 생겼다. 페이지를 이동하면서 페이지들의 생명주기가 변하는 것, 그리고 참조값이 달라지기 때문인지 넣어준 버튼들과 터치 이벤트가 제대로 동작하지 않았다. 이를 해결해주기 위해서는 Adapter 내에서 instantiateItem을 override 해주어야 했다. override한 instantiateItem 내부에 참조하는 요소들을 지역변수로 할당해주니 페이지 별로 참조하고자 했던 요소들이 정상적으로 동작하는 걸 확인할 수 있었다. override fun instantiateItem(container: ViewGroup, position: Int): Any .. 이전 1 2 3 4 다음
