如何在iMessage组聊天

Question

我正在尝试在导航栏中放置一个集合视图，如iMessage组聊天中所示，其中所有成员的首字母都在导航栏中以圆圈形式显示。

我在SO上找到了答案here，我尽力将其转换为iOS10 / Swift 3，但集合视图单元格未正确显示在导航栏中。这是我的代码：

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) -> Int {
    return 1
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 5
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> 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) -> CGSize {
    return CGSize(width: CGFloat(50), height: CGFloat(50))
}

}

导航栏类：

import Foundation
import UIKit



class NavigationBar: UINavigationBar {

var chatController: ChatController?

override func sizeThatFits(_ size: CGSize) -> 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
}


}

看起来集合视图单元格正在显示，但它们位于导航栏下方而不是内部（请参见下图）。如果我隐藏导航栏，单元格会转到视图的顶部，但我想将它们放在导航栏中。

这是我在app delegate中的UI代码，不确定我是否在这里犯了新手错误：

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.

    window = UIWindow(frame: UIScreen.main.bounds)
    window?.makeKeyAndVisible()
    window?.rootViewController = UINavigationController(rootViewController: ChatController())

    return true
}

我正在以编程方式执行此操作（没有故事板）。谁能看到我哪里出错？

Answer 1

这是我提出的解决方案

来自Apple

  

如果要在导航栏中显示自定义视图，必须先将这些视图包装在UIBarButtonItem对象中，然后再将它们添加到导航项中。

     

有关导航项如何与导航控制器，自定义视图控制器以及显示其内容的导航栏配合使用的信息，请参阅View Controller Programming Guide for iOS。

weak var collectionView: UICollectionView?
override func viewDidLoad() {
    super.viewDidLoad()
    let navigationitem = UINavigationItem(title: "")    //creates a new item with no title
    navigationitem.titleView = collectionView //your collectionview here to display as a view instead of the title that is usually there
    self.navigationController?.navigationBar.items = [navigationitem] //adds the navigation item to the navigationbar
}

从文档中我相信这应该有效。请记住，您的集合视图单元格足够小，以适应导航栏。让我知道，如果它不起作用，也许我明天可以做点什么。