김종권의 iOS 앱 개발 알아가기

1. 스크롤 영역을 암시해주는 Carousel 구현 - (UICollectionView, 수평 스크롤 뷰, paging 구현) 2. 스크롤 영역을 암시해주는 Carousel 구현 - 포커스 영역 이펙트 구현 아이디어 수평 스크롤 뷰 구현 방법은 FlowLayout+UICollectionView으로 구현하는 방법인 이전 포스팅 글 참고 양옆에 item이 보여서, 스크롤 할 수 있다는 암시를 주도록 paging이 되어야 하므로 이 것을 구현하는 것이 핵심 paging을 직접 구현 `isPagingEnabled = false` 스크롤이 페이징처럼 보여지기 `decelearationRate = .fast` 페이징을 scrollViewWillEndDragging에서 구현 (UICollectionViewDelega..

쉽게 레이아웃을 구현하기 위해 사용한 프레임워크 SnapKit Then 구현 아이디어 UICollectionView를 사용하여 수평 스크롤 뷰 구현 UICollectionViewFlowLayout을 이용하여 스크롤 뷰 구현 포스팅 글 참고 하단에 사용할 IndicatorView는 UIView를 서브클래싱하여 커스텀으로 구현 IndicatorView는 trackView와 trackTintView 두 개의 UIView로 구현 trackView - IndicatorView에서의 배경 UI trackTintView - 스크롤 될 때 표시될 진행사항 UI final class IndicatorView: UIView { // MARK: UI private let trackView = UIView().then { $..

1. Section, Item 모델링 - 단일 Section, 다중 Item 모델링 방법 (UITableView, UICollectionView) 2. Section, Item 모델링 - 다중 Section, 다중 Item 모델링 방법 (UITableView, UICollectionView) 예제에 사용한 프레임워크 Then - 초기화하는 동시에 프로퍼티에 접근하여 sugar programming을 위해 사용 SnapKit - UI의 오토레이아웃 구현에 편의를 위해 사용 RxSwift, RxCocoa - 비동기 처리에 편의를 위해 사용 RxDataSources - dataSource는 UITableViewDataSource 델리게이트를 사용하면 되지만 편의를 위해서 RxDataSource 사용 cf) 만..

1. Section, Item 모델링 - 단일 Section, 다중 Item 모델링 방법 (UITableView, UICollectionView) 2. Section, Item 모델링 - 다중 Section, 다중 Item 모델링 방법 (UITableView, UICollectionView) 예제에 사용한 framework Cell안의 UI 인터렉션 처리를 위해 일반적으로 많이 사용하는 비동기 처리 방식 예제를 보이기 위해 아래 프레임워크 사용 RxSwift와 RxCocoa 사용 다중 Item 모델링 아이디어 ViewController에서 UITableView를 가지고 있고 이 tableView의 셀 처리를 쉽게 하고싶은 경우 모델링이 중요 tableView에서 사용할 데이터 소스의 형태는 아래와 같은 ..

예제에 사용한 프레임워크 SnapKit Then RxSwift, RxCocoa Kingfisher Alamofire # UI pod 'SnapKit' pod 'Then' # Util pod 'RxSwift' pod 'RxCocoa' pod 'Kingfisher' # Network pod 'Alamofire' 페이지네이션 아이디어 2가지 1번 방법) 스크롤된 위치를 계산하여, 남은 아래 영역이 프레임의 크기보다 작게 남은 경우, 페이지네이션 실행 2번 방법) delegate 메소드인 tableView(_:prefetchRowAt:) 를 사용하여 prefetch 사용 func tableView(_ tableView: UITableView, prefetchRowsAt indexPaths: [IndexPath]..

1. UICollectionViewFlowLayout 사용 방법 - 수평 스크롤 뷰 (horizontal scroll view) 2. UICollectionViewFlowLayout 사용 방법 - 격자, 그리드 뷰 (grid view) FlowLayout을 사용하면 columns 수도 손쉽게 변경 가능 구현 아이디어 셀의 레이아웃을 결정하는 곳은 델리게이트임을 알고 (UICollectinoViewDelegateFlowLayout) 여기서 셀의 크기를 결정하도록 설정 위 델리게이트 중 sizeForItemAt 메소드에서 collectionView의 width값을 가져와서 너비에 관한 적절한 크기를 계산해서 셀의 크기를 결정해주면 grid cell 완성 셀의 크기 계산 collectionView.bounds..

cf) UICollectionViewFlowLayout를 이용한 방법은 이 포스팅 글 참고 수평 스크롤 구현 방향 UICollectionView를 사용하여 스크롤을 구현 UIScrollView를 사용하면 터치 이벤트 시, 어떤 아이템을 터치했는지 체크하기가 까다롭기 때문에 Cell을 사용할 수 있는 UICollectionView 사용 IUCollectionView의 UICollectionViewFlowLayout를 사용해도 되지만, 더욱 복잡한 레이아웃을 쉽게 추가하기 쉬운 확장성 있는 CompositionlalLayout 사용 UICollectionViewCompositionalLayout 개념은 이전 포스팅 글 참고 스크롤 구현은 Timer를 두고 매초마다 collectionView.scrollToI..

1. UICollectionViewCompositionalLayout - 개념 (section, group, item) 2. UICollectionViewCompositionalLayout - 개념 SupplementaryView, Header, Footer) 3. UICollectionViewCompositionalLayout - 개념 (DecorationView, Badge, NSCollectionLayoutAnchor) 4. UICollectionViewCompositionalLayout - 개념 (orthogonalScrollingBehavior, 수평 스크롤, visibleItemsInvalidationHandler) 5. UICollectionViewCompositionalLayout - 응용..