title: How to put a collection view in the navigation bar like in iMessage group chats
body: <p>I'm attempting to put a collection view within the navigation bar, as seen in iMessage group chats where all members have their initials in circles in the nav bar.</p>
  
  <p>I found an answer <a href="https://stackoverflow.com/questions/36377942/add-uicollectionview-to-navigationbar">here</a> on SO and I did my best to convert it to iOS10/Swift 3, but the collection view cells are not showing up in the nav bar correctly. Here's my code:</p>
  
  <pre><code>import UIKit
  
  
  weak var collectionView: UICollectionView?
  
  class ChatController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
  
  override func viewDidLoad() {
      super.viewDidLoad()
  
      let layout = UICollectionViewFlowLayout()
      let collectionView = UICollectionView(frame: CGRect(x: CGFloat(0), y: CGFloat(0), width: CGFloat(300), height: CGFloat(80)), collectionViewLayout: layout)
      collectionView.backgroundColor = UIColor.clear
      navigationItem.titleView? = collectionView
      collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
      collectionView.delegate? = self
      collectionView.dataSource? = self
      view.addSubview(collectionView)
      collectionView.reloadData()
  }
  
  
  func numberOfSections(in collectionView: UICollectionView) -&gt; Int {
      return 1
  }
  
  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -&gt; Int {
      return 5
  }
  
  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -&gt; UICollectionViewCell {
      let cell = (collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) )
      cell.backgroundColor = UIColor.orange
      cell.layer.cornerRadius = 24
      return cell
  }
  
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -&gt; CGSize {
      return CGSize(width: CGFloat(50), height: CGFloat(50))
  }
  
  }
  </code></pre>
  
  <p>And the Navigation Bar class:</p>
  
  <pre><code>import Foundation
  import UIKit
  
  
  
  class NavigationBar: UINavigationBar {
  
  var chatController: ChatController?
  
  override func sizeThatFits(_ size: CGSize) -&gt; CGSize {
      return CGSize(width: CGFloat(self.superview!.bounds.size.width), height: CGFloat(80))
  }
  
  func setFrame(frame: CGRect) {
      var f = frame
      f.size.height = 80
      super.frame = f
  }
  
  
  }
  </code></pre>
  
  <p>It looks like the collection view cells are showing up, but they're below the nav bar instead of inside it (see below image). If I hide the nav bar the cells go to the top of the view, but I want to have them within the nav bar.</p>
  
  <p><a href="https://i.stack.imgur.com/WWoCI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WWoCI.png" alt="enter image description here"></a></p>
  
  <p>Here's my UI code in app delegate, not sure if I'm making a newbie mistake here:</p>
  
  <pre><code>func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -&gt; Bool {
      // Override point for customization after application launch.
  
      window = UIWindow(frame: UIScreen.main.bounds)
      window?.makeKeyAndVisible()
      window?.rootViewController = UINavigationController(rootViewController: ChatController())
  
      return true
  }
  </code></pre>
  
  <p>I'm doing this programmatically (no storyboard). Can anyone see where I'm going wrong?</p>