프로필 화면에 들어가면 많이 사용되는 탭바 NestedScrollView를 구현해 보았다. 사용 라이브러리 tabman snapkit 구현 결과물 구현 방식 2개의 스크롤 뷰를 이용. overlay scrollview: 직접적인 스크롤이 일어나는 스크롤 뷰 container scrollview: UI가 들어갈 스크롤 뷰. container scrollview: HeaderView와 하단 탭바뷰로 구성 overlay ScrollView의 content Size를 headerView의 height + 현재 선택된 탭바의 ViewController의 scrollView(tableView 혹은 collectionView)의 contentSize의 height값을으로 만든 후, overlay scrollView의..
이전 글에 이어서 PHPicker로 가져온 이미지를 FilManager를 이용해 저장하고, 저장한 이미지를 가져와서 보여주려고 한다. 가져온 이미 지는 png() 메서드를 사용해서, png 데이터로 변경 후 png 형식으로 저장했다. func savePetImage(petId: String, petImageList: [Data]) throws { guard let defaultDirectory = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first else { return } let petImageDirectoryURL = defaultDirectory.appendingPathComponent(petId, conform..
PHPicker로 가져온 이미지 방향이 회전 PHPicker를 이용하여 이미지를 여럿 선택하여 ImageView에 렌더링 할 때, 이미지 방향이 바뀌는 문제가 발생했다. 또 가져온 UIImage를 png() 함수를 이용해 Filemanager에 저장한 후, 해당 이미지를 가져와서 다시 UIImage로 렌더링 할 경우에도 같은 문제가 발생했다. 원인은 UIImage.Orientation 때문이었다. iOS에서 카메라로 사진을 찍을 때, 여러 방향에서 사진을 찍을 수 있다. 이때, 사진을 저장할 때, 기본적으로 가로모드 (카메라가 왼쪽에 있는 방향)를 기본으로 사진을 저장한다. 즉 사진을 찍었을 때, 세로 모드로 찍었어도, 저장될 때 가로 방향으로 픽셀 데이터를 인코딩하여 저장한다. 왼쪽 사진처럼 세로 모드..
NSCollectionViewDiffableDataSource는 편리하다. 기존 dataSource와 다르게 SnapShot에 섹션과 데이터를 넣고, DiffableDatasource에 apply만 해주면, 애니메이션이 적용되면서 즉각적으로 변경이 된다. 하지만 사용할때 주의해야 할 점이 있다. 기존 CollectionViewDataSource를 채택해서 reloadData()를 수행 했을 때, CollectionView에 보이는 모드 셀이 reload 되면서 cellForItemAt 함수를 호출하는 방식이였다. 그래서 reload가 되면 셀이 바뀌든 바뀌지 않았든 해당 화면에서 보이는 셀은 다시 cellForItemAt에 의해 셀이 그려지는 방식이었다. 하지만 DiffableDataSource는 app..
나오게 된 이유 앱이 복잡해짐에 따라 controller는 많은 일을 하게 되는데, controller가 복잡해짐에 따라, indexPath로 셀에 넣을 데이터를 지정하는 방식은 오류를 불러일으킬 가능성이 높음. 데이터는 시간에 따라 변하고, UI는 이런 데이터가 변하는 것을 동기화해야 하는데, 이는 오류가 발생하기 쉬운 접근 방식이므로, 이를 해결하기 위해 도입되었다. Snapshot UI의 상태이며, DiffableDatasource는 이 snapshot을 이용하여 UI를 업데이트 한다. apply의 인자값으로 전달 collectionView/tableView를 업데이트한다. 각 섹션이나 데이터는 서로를 구분할 수 있는 고유한 식별자가 있어야 하는데, 이를 위해 enum을 사용하거나, hashable..
나오게 된 이유 iOS6에서 출시된 UICollectionViewLayout을 통한 추상화로 인해 LineBasedLayout으로 레이아웃을 쉽게 할 수 있었으나, 시간이 지나면서 점점 복잡해짐. 따라서 기존 lineBasedLayout을 사용하지 않고 사용자 정의 레이아웃을 구축해야 하는데, 이를 구현하는 데는 까다로워 이를 위해 나온 레이아웃이 Compositional Layout임. CompositionalLayout 기본 구성 Layout: 콜렉션 뷰의 레이아웃 Section: 각 섹션 Group: 각 섹션의 행. 앞으로 반복하게 될 반복 구조, 항목의 열 또는 행을 나타냄. item: 콜렉션 뷰의 셀 크기 정의 각 요소의 크기를 지정하기 위해 Compositional Layout은 NSColle..