Android/Android Custom View (8) 썸네일형 리스트형 [Jetpack Compose] Reorderable LazyList 에 Drag&Drop to Remove 곁들이기 동기 DND 8기를 통해 알게 된 좋은 분들과 여전히 함께 이런 저런 작업을 하고 있습니다. 동아리 활동 이후 새롭게 시작한 프로젝트의 UI 중, 다소 복잡하게 설계되어 있는 부분을 담당하게 되었고, 이를 해결 및 구현한 과정에 대해 기록하고자 합니다. 요구 사항은 무엇이었나? 1. + 버튼을 누르면 화면 상단에 재료를 입력할 수 있는 박스가 생성된다. 2. 해당 박스 내의 InputField 에 특정 값을 입력하고 Done 버튼을 누르면 화면 하단의 그리드에 재료가 추가된다. 3. 화면 하단 그리드의 항목은 길게 누른 뒤 드래그하여 순서를 변경할 수 있다. 이게 요구 사항의 전부였다면, 구현하는 데에 큰 어려움이 없었을 것입니다. 관련 기능을 제공하는 유명한 라이브러리가 있기 때문입니다. 하지만 곤란하.. [Jetpack Compose] ImageCropper 라이브러리 없이 구현하기 Part II 동기 비슷한 포스트를 이전에도 작성한 일이 있습니다. 그 당시에도 프로젝트에 들어갔던 코드를 활용해서 포스팅 했었는데, 당시엔 Jetpack Compose 가 그다지 익숙치 않기도 했고, 애초에 개발에 대한 인사이트도 그리 훌륭하진 않았습니다. 이번 네이버 부스트캠프 그룹 프로젝트에서도 비슷한 기능을 구현하게 되었는데, 이전과 조금은 다른 점이 있기에, 기록을 통해 다시 한 번 학습하고자 합니다. 이전엔 어땠는가 [Jetpack Compose] ImageCropper 라이브러리 없이 구현하기 현재 진행중인 사이드 프로젝트에서는 카카오 및 구글 로그인을 사용합니다. 그러므로, 이미지를 촬영 또는 디바이스에서 불러와 이를 수정 및 등록할 수 있도록 구현해야 합니다. 당연히 유수 blothhundr.tisto.. [Jetpack Compose] HorizontalPagerIndicator 라이브러리 없이 구현하기 Jetpack Compose Accompanist Jetpack Compose Accompanist 는 Compose Supplement Library Set 입니다. Compose 는 미완성 단계이고 XML 및 Android View 생태계를 완전히 대체하기에는 모자란 부분이 있는 것이 사실입니다. 그 부분들을 메우기 위해 Accompanist 는 수많은 편의 기능을 제공합니다. HorizontalPager, Indicator HorizontalPager 역시 Accompanist 가 제공하는 기능입니다. 동시에 Indicator 까지 제공하고 있습니다. 그럼에도 불구하고 직접 Indicator 를 구현한 이유는 애니메이션이 없었기 때문입니다. Accompanist 에서 제공하는 Indicator 는 .. [Jetpack Compose] ImageCropper 라이브러리 없이 구현하기 현재 진행중인 사이드 프로젝트에서는 카카오 및 구글 로그인을 사용합니다. 그러므로, 이미지를 촬영 또는 디바이스에서 불러와 이를 수정 및 등록할 수 있도록 구현해야 합니다. 당연히 유수한 ImageCropper 라이브러리가 있지만, 앱 내에서 여러 번 사용되는 기능이 아니기에 직접 구현하기로 했습니다. 단순한 기능 하나를 위해 특정 의존성을 추가하는 행위 자체가 꺼려지기도 했고, 불필요한 패키지 사이즈의 증가는 유저로 하여금 다운로드가 꺼려질 수 있기 때문입니다. 또한 UI 와 관련한 라이브러리는 가능하면 배제하자는 것이 제 주관이기도 합니다. Tl ; DR 소스 코드는 제 깃허브에서 보실 수 있습니다. GitHub - jangjh123/Jetpack-Compose-CustomView: Jetpack C.. [XML] AmbientLightView 1 인 개발을 진행했던 앱 '에이펙싱' 의 디자인이 너무 별로여서 새롭게 리뉴얼 중입니다. UI 를 개선함과 동시에 스토어 정보를 보여주는 기능을 새로이 개발 중에 있는데, 해당 기능의 UI 를 구현하다가 문제가 조금 생겼습니다. 스토어의 아이템은 특별 상품들인 Specials 와 일반 상품들인 Shop 으로 분류가 되는데, 각 상품군의 분류가 확실히 되지 않아서 해당 View 의 Elevation Color 를 변경하여 구분하려 했습니다. 관련된 속성을 사용하려 했으나, minSDK 와 호환이 되지 않는 이슈가 발생하여, 이를 해결하기 위해 CustomView 를 구현하였습니다. 물론 라이브러리를 사용해도 되고, minSDK 를 올려도 되지만, 저는 minSDK 만은 올리지 않겠다는 생각을 갖고 있기 .. [XML] LineWork 각종 계산을 통해서 텍스트가 위치할 정중앙 값을 구하여 배치한 TextView 입니다. 저는 심플하고 깔끔한 디자인을 좋아하여 자주 사용하게 될 것 같습니다. 라인과 텍스트의 색상, 두께의 변경이 가능하며 텍스트의 경우, 폰트도 변경할 수 있도록 하였습니다. 애니메이션을 사용하여 감성 가득한 View Interaction 을 구성할 수 있습니다. 앱 온 보딩시 사용하면 좋을 듯 합니다. [XML] HeaderTextView 헤더가 있는 뷰. 버튼으로 사용할 수도 있습니다. 헤더 텍스트의 색상, 크기 조절이 가능하며, 바디 텍스트의 경우 기본 텍스트뷰의 모든 속성을 사용할 수 있습니다. 테두리의 두께 역시 조절이 가능합니다. 근데 만들고 보니 현대카드 앱 느낌이 좀 나는 것 같습니다. 내친 김에 폰트까지 받아서 현대카드 처럼 만들었습니다. 색 배합을 다르게 하여 팬시한 연출도 가능합니다. [XML] ColoredBorderView 처음엔 사각형에 색상있는 테두리를 넣으려고 했던 건데, 구현을 하다보니 색상 변화를 넣으면 재미있을 것 같아 넣어보았습니다. 그랬더니 불 들어오는 마우스 패드 느낌도 납니다. 색상 변화 애니메이션은 클래스 내부 companion object 블럭에 객체를 생성했습니다. 테두리의 색상과 두께 조절 및 전체 사이즈 조정이 자유롭게 가능합니다. 내부 색상 역시 변경할 수 있으며, 애니메이션을 재생하지 않을 수 있습니다. 이전 1 다음
