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

구현 아이디어 Cell의 UI가 복잡하거나 여러가지의 타입이 있는 경우 보통 UITableView나 UICollectionView를 사용하지만, 위처럼 단순한 수평 스크롤 뷰는 UIScrollView와 UIStackView로 쉽게 구현 가능 주의할점은 UITableView, UICollectionView는 Cell을 재사용하여 UI성능에 이점이 있으므로, 데이터가 많을때는 UITableView나 UICollectionView를 사용 구현 핵심 부분은 데이터를 선택했을때 해당 데이터의 index를 알아내는 것인데, 이것또한 UIView의 tag를 활용하면 쉽게 구현이 가능 구현 * UI를 코드로 구현할 때 편의를 위해 아래 라이브러리 사용 pod 'SnapKit' pod 'Then' 수평 스크롤 뷰인 My..

1. 스크롤 영역을 암시해주는 Carousel 구현 - (UICollectionView, 수평 스크롤 뷰, paging 구현) 2. 스크롤 영역을 암시해주는 Carousel 구현 - 포커스 영역 이펙트 첫번째 글에서 구현한 Carousel) 이번 글에서 알아볼, 셀에 효과가 들어간 Carousel) * 포커스 되는 영역이 아닐 경우, dimmed 처리 * 구현 전에 이전까지 구현된 코드 다운로드: https://github.com/JK0369/ExCarousel 모델 생성 iOS에서 셀은 항상 reuse 되므로, cell에 직접 접근하여 속성을 변경하는 것보다 dataSource에 속성을 지정해준 다음 reloadData하도록 설계할것 상태 관리를 dataSource에서만 하도록 구현 기존에 아래처럼 있..

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. UICollectionViewFlowLayout 사용 방법 - 수평 스크롤 뷰 (horizontal scroll view) 2. UICollectionViewFlowLayout 사용 방법 - 격자, 그리드 뷰 (grid view) cf)UICollectionViewCompositionalLayout를 이용한 방법은 이 포스팅 글 참고 구현 아이디어 커스텀 셀 셀의 CGSize 크기는 collectionView를 사용하는쪽에서 정해질 것을 인지하고 cell에서는 autolayout 작성 시 크기를 생각하지 않고 레이아웃만 집중 collectionView 사용하는 곳 flowLayout인스턴스의 scrollDirection 방향을 horizontal로 설정 flowLayout인스턴스의 cellSize ..

Horizontal Scroll View 단순히 인터렉션이 없고 보여주기만 한다면 해당 Horizontal Scroll View 사용해도 무방하지만, Interaction이 필요한 경우 해당 클릭된 셀이 어떤 셀 이벤트인지 확인할 수 있는 ViewPager 글 참고 구현 아이디어 imageView를 scrollView에 추가할 때 xOffset값을 horizontalWidth값에 비례하여 삽입 후, scrollView의 contentSize.width값을 horizontalWidth * imageViews.count만큼 설정하면 완료 구현 BaseScrollView 정의 class BaseScrollView: UIScrollView { var model: Model? { didSet { if let mo..

cf) ScrollView + StackView를 이용한 수평 스크롤 뷰: https://ios-development.tistory.com/617 [iOS - swift] UI 컴포넌트 - 수평 스크롤 뷰 (ScrollView + StackView) cf) collectionView를 이용한 수평 스크롤 뷰: https://ios-development.tistory.com/632 [iOS - swift] CollectionView(컬렉션 뷰) - 수평 스크롤 뷰 (UICollectionViewFlowLayout) 1. custom layout이 아닌 UICo.. ios-development.tistory.com 1. CollectionView (컬렉션 뷰) - UICollectionViewFlowLayo..