如何像在iMessage群聊中一样将集合视图放在导航栏中 [英] How to put a collection view in the navigation bar like in iMessage group chats

问题描述

我正在尝试在导航栏中放置收藏夹视图，如在iMessage群聊中所看到的那样，所有成员的姓名首字母都放在导航栏中.

在SO上

这是我在应用程序委托中的UI代码，不确定我是否在这里犯了新手错误:

  func应用程序(_应用程序:UIApplication，didFinishLaunchingWithOptions launchOptions:[UIApplicationLaunchOptionsKey:任何]?)->布尔{//应用程序启动后进行自定义的替代点.窗口= UIWindow(框架:UIScreen.main.bounds)窗口?.makeKeyAndVisible()window?.rootViewController = UINavigationController(rootViewController:ChatController())返回真} 

我正在以编程方式执行此操作(没有情节提要).谁能看到我要去哪里错了?

解决方案

这是我建议的解决方案

来自 Apple

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

有关导航项目如何与导航控制器，自定义视图控制器以及导航栏一起显示其内容的信息，请参见

从文档中我相信这应该可行.请记住，您的收藏夹视图单元必须足够小以适合导航栏.让我知道它是否不起作用，也许明天我可以解决一些问题.

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.

I found an answer here 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:

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))
}

}

And the Navigation Bar class:

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
}


}

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.

Here's my UI code in app delegate, not sure if I'm making a newbie mistake here:

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
}

I'm doing this programmatically (no storyboard). Can anyone see where I'm going wrong?

解决方案

Here is my proposed solution

From 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
}

From the documentation I believe this should work. Remember to have your collection view cells small enough to fit in the navigation bar. Let me know if it doesn't work, maybe I can work something out tomorrow.

这篇关于如何像在iMessage群聊中一样将集合视图放在导航栏中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！