Login required for access
In order to watch this lesson, you'll need to login to the website.
How to Swipe between Sections Horizontally
YouTube
Today 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) } //... }

Comments (14)
4 years ago
4 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
HELP & SUPPORT