How to Render Vertical Video Cells in Horizontal Layout
YouTubeIn this episode, I'll show you guys how to easily bring back our home feed video cells. We'll do this in a way that separates our code nicely into a different cell class so that it'll be easier to maintain further down the road. Lastly, we'll take a look at how to change the title in our nav bar to appropriately respond to section changes in our home controller. Enjoy!
!codebreak
<div class='filename'>FeedCell.swift</div>
!codebreak
!syntax-highlight
class FeedCell: BaseCell, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
lazy var collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.backgroundColor = UIColor.whiteColor()
cv.dataSource = self
cv.delegate = self
return cv
}()
var videos: [Video]?
let cellId = "cellId"
func fetchVideos() {
ApiService.sharedInstance.fetchVideos { (videos: [Video]) in
self.videos = videos
self.collectionView.reloadData()
}
}
override func setupViews() {
super.setupViews()
fetchVideos()
backgroundColor = .brownColor()
addSubview(collectionView)
addConstraintsWithFormat("H:|[v0]|", views: collectionView)
addConstraintsWithFormat("V:|[v0]|", views: collectionView)
collectionView.registerClass(VideoCell.self, forCellWithReuseIdentifier: cellId)
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return videos?.count ?? 0
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cellId", forIndexPath: indexPath) as! VideoCell
cell.video = videos?[indexPath.item]
return cell
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let height = (frame.width - 16 - 16) * 9 / 16
return CGSizeMake(frame.width, height + 16 + 88)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return 0
}
}
!codebreak
<div class='filename'>HomeController.swift</div>
!codebreak
!syntax-highlight
class HomeController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
//...
let titles = ["Home", "Trending", "Subscriptions", "Account"]
//...
func scrollToMenuIndex(menuIndex: Int) {
let indexPath = NSIndexPath(forItem: menuIndex, inSection: 0)
collectionView?.scrollToItemAtIndexPath(indexPath, atScrollPosition: .None, animated: true)
setTitleForIndex(menuIndex)
}
private func setTitleForIndex(index: Int) {
if let titleLabel = navigationItem.titleView as? UILabel {
titleLabel.text = " \(titles[index])"
}
}
//...
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)
setTitleForIndex(Int(index))
}
//...
}