Swift3.0 开发macOS应用程序（2） NSCollectionView

macOS开发从入门到精通视频教程

MACOS NSCollectionView的使用及介绍

一个NSCollectionView对象显示的是可定制布局的有序数据集合，最简单的集合视图显示在其网格中的item中，你可以定义你想要的布局去管理item。NSCollectionView和UIKit中UICollectionView有很多相似之处，不过NSCollectionView的结构和UICollectionView有些差异，但使用方法差不多，都需要遵循dataSource和delegate，都有LayoutFlow特性。

0.png

1.NScollectionView在storyboard中的层次结构

如下图

1.png

由此可以发现CollectionView并非只有ColletionView一个视图，它只是Bordered Scroll View 里面的一个子视图。

2.搭建实例UI界面

从右下角控件Library拖拽1个NSCollectionView、一个NSTextFieldView和1个NSButton到视图控制器中，并进行约束

2.png

3.创建一个继承与NSCollectionViewItem的SBCollectionItem,并勾选xib

5.png

如下图所示

6.png

并在右下角的控件Library中拖拽一个NSObject对象到SBCollectionItem.xib中，如上图所示
设置Object对象class为SBCollectionItem，如下图所示

7.png

在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