MACOS NSCollectionView的使用及介绍
一个NSCollectionView对象显示的是可定制布局的有序数据集合,最简单的集合视图显示在其网格中的item中,你可以定义你想要的布局去管理item。NSCollectionView和UIKit中UICollectionView有很多相似之处,不过NSCollectionView的结构和UICollectionView有些差异,但使用方法差不多,都需要遵循dataSource和delegate,都有LayoutFlow特性。
0.png1.NScollectionView在storyboard中的层次结构
如下图
1.png由此可以发现CollectionView并非只有ColletionView一个视图,它只是Bordered Scroll View 里面的一个子视图。
2.搭建实例UI界面
从右下角控件Library拖拽1个NSCollectionView、一个NSTextFieldView和1个NSButton到视图控制器中,并进行约束
2.png3.创建一个继承与NSCollectionViewItem的SBCollectionItem,并勾选xib
5.png如下图所示
6.png并在右下角的控件Library中拖拽一个NSObject对象到SBCollectionItem.xib中,如上图所示
设置Object对象class为SBCollectionItem,如下图所示
在SBCollectionItem.xib中添加一个label,约束居中。
3.连线并写代码
将storyboard中对于控件连线到ViewController.swift文件中,并命名,代码如下:
import Cocoa
class ViewController: NSViewController ,NSCollectionViewDataSource, NSTextFieldDelegate{
//输入框
let reuse = "reuseItem"
var data:[String] = ["张三","李四","王五","小六"]
var item = SBCollectionItem()
@IBOutlet weak var collectionView: NSCollectionView!//colletionView
@IBOutlet weak var inputMessages: NSTextField!//输入框
override func viewDidLoad() {
super.viewDidLoad()
inputMessages.delegate=self
collectionView.register(NSNib.init(nibNamed: "SBCollectionItem", bundle:nil), forItemWithIdentifier: reuse)
//成为第一响应者
inputMessages.becomeFirstResponder()
}
//点击Add按钮响应的事件
@IBAction func add(_ sender: Any) {
addMessages()
}
//添加信息
func addMessages(){
if !inputMessages.stringValue.isEmpty {
data.append(inputMessages.stringValue)
let indexPath = NSIndexPath.init(forItem: data.count-1, inSection: 0)
collectionView.insertItems(at: [indexPath as IndexPath])
collectionView.scrollToItems(at: [indexPath as IndexPath], scrollPosition: .bottom)
collectionView.reloadItems(at: [indexPath as IndexPath])
inputMessages.stringValue=""
}
}
override var representedObject: Any? {
didSet {
// Update the view, if already loaded.
}
}
//MARK: NSCollectionViewDataSource
func collectionView(_ collectionView: NSCollectionView, numberOfItemsInSection section: Int) -> Int {
return data.count
}
func collectionView(_ collectionView: NSCollectionView, itemForRepresentedObjectAt indexPath: IndexPath) -> NSCollectionViewItem {
item = collectionView.makeItem(withIdentifier: reuse, for: indexPath) as! SBCollectionItem
item.nameLabel.stringValue=data[indexPath.item]
return item
}
//MARK:NSTextFieldDelegate
//按回车键即可发送内容
override func controlTextDidEndEditing(_ obj: Notification) {
addMessages()
}
}
4.运行程序
9.gif源码-->:github
网友评论
我从SB中拖入一个NSCollectionView,连VC创建对象,可是这个控件默认继承的是NSScrollView!,里面没有register(NSNib方法,如果使用则报错, Extra argument 'forItemWithIdentifier' in call -- 如果强行将collectionView的继承改为NSCollectionView!,这样不会报错,可是运行的时候提示说没有找到方法...这个怎么办,当前版本Xcode8.3.1
item.nameLabel.stringValue=data[indexPath.item]
我这里报错了, item.nameLabel = nil,请问这是哪里错了?
另外,我对比了一下 SBCollectionItem.xib ,教程里 Label 下有Constraints ,我工程里没有,是版本的问题还是需要手动设置?
nameLabel 控件我也加了,并且连线到SBCollectionViewItem.swift 了。为何会是nil