Mac OSX 开发基础控件学习之 NSOutlineView

NSOutlineView-feature.png

在开发基于osx的Application的过程中,当我们需要显示一组列表结构的数据时,比较容易想到的控件是NSTableView;但如果你显示的数据有层级结构时,NSTableView就会面临一个问题:因为在osx中,NSTableView没有分组功能( sections) 因为在cocoa 中提供了另一个控件供满足我们的需求NSOutlineView它是继承自NSTableView的子类,是Mac OSX Application常用的控件之一,与NSTableView相似,NSOutlineView也使用行和列来显示内容,但所不同的是NSOutlineView使用具有层级的数据结构 下面我们通过一个示例(你也可以从这里Demo下载工程,但更推荐自己一步一步创建工程并实现功能)来简单学习一下怎样使用NSOutlineView显示带有层级结构的数据内容

创建osx项目工程,并搭建UI界面,大致效果如下图:

UI界面

  • 从控件库中,拖动Source List 控件(NSOutlineView)storyboard中,并添加约束。
初始化设置NSOutlineView

初始化设置

  • 本示例中,列数为默认值1: Columns = 1
  • 设置行的交替显示效果:enable Alternating Rows
  • 设置层级缩进:Indentation = 16
运行效果

空白效果

这是一个空白的NSOutlineView效果,接下来,我们要添加Data model数据模型,并设置DataSourceDelegate

Data Model 数据模型

NSOutlineViewData modelNSTableView有些不同,因为NSOutlineView显示层级结构,因此Data model中要能够表示出这种数据的层级来:root node -> leaf node

  • 在工程中添加RootModel Class

Root Model 在Root Model 中,添加两个属性:nameisLeaf

name 和isLeaf

  • 同样的操作,再添加Leaf Model Class

LeafModel Class

  • RootModel 中,添加子节点数组属性

children

ViewController 中初始化模型数据

setup mode

设置NSOutlineView的DataSourceDelegate

Data Source 和 Delegate

ViewController 实现数据源代理方法

ViewController 实现方法

  • NSOutlineView数据源方法调用顺序:numberOfChildrenOfItem->child index: Int ->isItemExpandable
  • cell 的重用:
   cell = outlineView.make(withIdentifier: "HeaderCell", owner: self) as? NSTableCellView

设置根节点cell的重用标识

cell = outlineView.make(withIdentifier: "DataCell", owner: self) as? NSTableCellView

设置子节点cell重用标识

最终运行效果

运行效果

One more thing
  • 设置展开所有节点或者某一节点

设置展开指定节点

  1. 从storyboard中,将NSOutlineView连线到Viewcontroller,添加属性outlineView

  1. 在 viewDidAppear中,添加代码实现:
  // 展开所有节点
        outlineView.expandItem(nil, expandChildren: true)
        // 展开第一个节点
        // outlineView.expandItem(outlineView.item(atRow: 0), expandChildren: true)
        // 展开第二个节点
       //  outlineView.expandItem(outlineView.item(atRow: 1), expandChildren: true)
  • 效果如下:

展开效果

感谢阅读
  • 限于水平,难免有疏漏之处,各位可在评论中指出,共同学习讨论~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp 如何创建修改保存位图 创建保存图片在 Image 控件使用WriteableBitmap 转换通过读写像素转换 CanvasBitmap

在 UWP 使用底层的图像渲染就是使用 Softwarebitmap ,这个类提供直接数据修改,可以使用这个类进行软渲染。实际上 Softwarebitmap ...

42110
来自专栏CSDN技术头条

前端知识点总结——Vue

作用:将表达式执行的结果 输出当调用元素的 innerHTML 中;还可以将数据绑定到视图。

13920
来自专栏韩东吉的Unity杂货铺

零基础入门 21: UGUI Inputfield

因为一些外部原因,以后文章的发布只会在公众号内推送,取消了在蛮牛专栏的文章更新,望蛮牛小伙伴周知,关注微信公众号,可以第一时间收到新分享的推送通知。

36320
来自专栏技术小讲堂

ASP.NET AJAX(3)__UpdatePanel

今天也不知道写不写的完了,最近闲下来了,却感冒了,早上起来都不会说话了,不过幸亏咱不是靠嘴皮子过活了,哎~~~~窃喜吧 上一篇简单写到UpdatePanel的一...

36750
来自专栏狮乐园

codereview-s8

之后再efficiencyView方法中调用stopPropagation方法阻止事件冒泡

9330
来自专栏zhisheng

使用 CodeMirror 打造属于自己的在线代码编辑器

前提 写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么...

94870
来自专栏大内老A

ASP.NET:创建Linked ValidationSummary, 深入理解ASP.NET的Validation

我想对于ASP.NET的Validator控件已经熟悉的不能再熟悉了。我们 已经习惯了用Validator控件来验证我们在表单的输入,并通过Validation...

32780
来自专栏从零开始学自动化测试

Selenium2+python自动化24-js处理富文本

前言 上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,...

30150
来自专栏小樱的经验随笔

【全网最全的博客美化系列教程】08.自定义地址栏Logo

首先你得准备一张png或者jpg/jepg的图片,这个时候你可能会想要你的博客头像作为图片,你只需要这样子:

10420
来自专栏崔庆才的专栏

腾讯云上Selenium用法示例

在上一节我们学习了 PhantomJS 的基本用法,归根结底它是一个没有界面的浏览器,而且运行的是 JavaScript 脚本,然而这就能写爬虫了吗?这又和Py...

83300

扫码关注云+社区

领取腾讯云代金券