如何把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 
} 


} 

它看起來像集合視圖細胞被顯示出來，但他們的導航欄，而不是在它裏面下方（見下文圖片）。如果我隱藏導航欄，單元格將轉到視圖的頂部，但我希望在導航欄中包含它們。

下面是在應用程序委託我的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

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 
} 

從文檔，我相信這應該工作。請記住讓您的收藏集查看單元格足夠小以適合導航欄。讓我知道如果它不起作用，也許我明天可以解決一些問題。