ios - 如何像 iMessage 群聊一样在导航栏中放置 Collection View

Question

我试图在导航栏中放置一个 Collection View ，如 iMessage 群聊中所示，其中所有成员的姓名首字母都在导航栏中的圆圈中。

我找到了答案here就这样，我尽力将其转换为 iOS10/Swift 3，但 Collection View 单元格没有正确显示在导航栏中。这是我的代码:

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
}


}

看起来 Collection View 单元格已显示，但它们位于导航栏下方而不是导航栏内部(见下图)。如果我隐藏导航栏，单元格将转到 View 顶部，但我希望将它们放在导航栏中。

这是我在应用程序委托(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
}

我正在以编程方式执行此操作(没有 Storyboard)。谁能看出我哪里出错了？

Answer 1

这是我提出的解决方案

来自Apple

If you want to display custom views in the navigation bar, you must wrap those views inside a UIBarButtonItem object before adding them to the navigation item.

For information about how navigation items work together with a navigation controller, custom view controllers, and the navigation bar to display their content, see 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
}

从文档中我相信这应该可行。请记住让您的 Collection View 单元格足够小以适合导航栏。如果不起作用请告诉我，也许我明天可以解决一些问题。