텍스처를 활용한 스티키 헤더 예제.

개요

요즘 Swift UI가 나오면서 SwiftUI를 너무나 쓰고 싶은데 그 놈에 최소 버전 때문에 쓰질 못 해 여러가지 오픈소스 UI Layout을 파 보게 되었다.그 중 Textrue와 Flexlayout 이라는 두 녀석이 눈에 띄었다.

어떤 것을 먼저 공부 해 볼까 하다가 텍스처가 RxSwift에 Extension 되어 있는 코드가 많아 텍스처 부터 파 보기로 결심했다. 텍스처를 공부 하면서 스티키 헤더 화면을 만들면 어떤 코드가 나올 지 매우 궁금했다.

결과물<주황색 아래 AA_A 부분이 스티키 헤더>

코드 요약

메인 화면 ASCollectionNode리스팅 되는 형태는 TableView로 해 볼까 하다가 UICollectionView가 다양하게 표현 할 수가 있어 UICollectionView으로 만들고 있다.ASCollectionNode는 UICollectionView를 ASTableNode는 UITableView를 포함하고 있는 형태다.
첫 번째 Section은 헤더가 없는 다이나믹 셀 하나 추가(주황색 셀)셀을 클릭하면 문자열이 추가 되면서 자동으로 높이가 늘어난다.
두 번째 Section은 메뉴 헤더 1개, 다이나믹 셀 1개, 컨텐츠 셀 5개로 구성메뉴 헤더는 ASCollectionNode로 구성 하였고 횡 스크롤이 되도록 구성다이나믹 셀(하늘 색)은 안내 표기 용으로 넣음컨텐츠 셀은 Github로 부터 받아온 리스팅 정보를 표기 하도록 구성

스티키 헤더 레이아웃 코드

플레이그라운드 처럼 사용하고 있는 텍스처 프로젝트이다.프로젝트 코드를 까 보면 엄청나게 삽질하고 있는 나의 모습을 볼 수 있다. 🥺

이 파일 코드만 보면 된다.

거의 2주? 동안 텍스처 공부만 하였는데 이론이 부족하여 레이아웃 구성하는데 시간을 많이 할애 하였다. 그 쉬운 가운데 정렬 부터 하기 어려웠으니… 그리고 잘못 된 코드 하나가 비동기 처리 시 노드들을 모두 사라지게 하는 마법을 부리고 있었다.다행히 찾았지만… 이 문제로 인해 정말 많은 시간을 소요했다.
레이아웃 구성이 어느 정도 마스터 되면 스토리보드, xib를 안 써도 레이아웃 구성을 쉽게 할 것이라 생각한다. 필요한 곳곳에 노드만 넣어주면 딱 맞아 들어가고 높이 조절 또한 자동으로 해 주니 얼마나 편한가…
스토리 보드로 구성 했을 경우 화면 구성을 쉽게 하는 대신 다이나믹한 화면이 필요 할 때 높이 및 제약 조건을 이리저리 구성을 해 줘야 했다.