How to Swipe between Sections Horizontally
YouTubeToday lets go over how to enable swiping between different sections of our YouTube application. To do this, we implement a horizontal scroll direction for our collection view layout. Next, we discuss how to enable paging to allow for the snappy behavior from screen to screen. Finally, I'll show you how to tie all of this together with our menu bar so the slider and highlights work together.
!codebreak
<div class='filename'>HomeController.swift</div>
!codebreak
!syntax-highlight
class HomeController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
//...
let cellId = "cellId"
//...
override func viewDidLoad() {
//...
setupCollectionView()
//...
}
func setupCollectionView() {
if let flowLayout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout {
flowLayout.scrollDirection = .Horizontal
flowLayout.minimumLineSpacing = 0
}
collectionView?.backgroundColor = UIColor.whiteColor()
// collectionView?.registerClass(VideoCell.self, forCellWithReuseIdentifier: "cellId")
collectionView?.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: cellId)
collectionView?.contentInset = UIEdgeInsetsMake(50, 0, 0, 0)
collectionView?.scrollIndicatorInsets = UIEdgeInsetsMake(50, 0, 0, 0)
collectionView?.pagingEnabled = true
}
func handleSearch() {
scrollToMenuIndex(2)
}
func scrollToMenuIndex(menuIndex: Int) {
let indexPath = NSIndexPath(forItem: menuIndex, inSection: 0)
collectionView?.scrollToItemAtIndexPath(indexPath, atScrollPosition: .None, animated: true)
}
lazy var menuBar: MenuBar = {
let mb = MenuBar()
mb.homeController = self
return mb
}()
override func scrollViewDidScroll(scrollView: UIScrollView) {
menuBar.horizontalBarLeftAnchorConstraint?.constant = scrollView.contentOffset.x / 4
}
override func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let index = targetContentOffset.memory.x / view.frame.width
let indexPath = NSIndexPath(forItem: Int(index), inSection: 0)
menuBar.collectionView.selectItemAtIndexPath(indexPath, animated: true, scrollPosition: .None)
}
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 4
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(cellId, forIndexPath: indexPath)
let colors: [UIColor] = [.blueColor(), .greenColor(), UIColor.grayColor(), .purpleColor()]
cell.backgroundColor = colors[indexPath.item]
return cell
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSizeMake(view.frame.width, view.frame.height)
}
}
!codebreak
<div class='filename'>MenuBar.swift</div>
!codebreak
!syntax-highlight
class MenuBar: UIView, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
//...
var homeController: HomeController?
//...
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
// print(indexPath.item)
// let x = CGFloat(indexPath.item) * frame.width / 4
// horizontalBarLeftAnchorConstraint?.constant = x
//
// UIView.animateWithDuration(0.75, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .CurveEaseOut, animations: {
// self.layoutIfNeeded()
// }, completion: nil)
homeController?.scrollToMenuIndex(indexPath.item)
}
//...
}