macOS 开发:NSScrollView 学习笔记

最近抽空看了些 macOS 开发的资料。(自嘲下:iOS 开发都不是很会,就开始搞 macOS 开发。。)一开始觉得 macOS 和 iOS 估计差不多。但是呢,习惯 UIKit,再去碰 Appkit 这个古老的框架。只能说两者真不是一码事。。。

官方有份 NSScrollView 的教程。写的挺详细。可以看下。

Xcode 里面的文档没有很多的解释。有些连默认值都不知道有没有。使用 UIKit 时,遇到问题,跳到文档里面,很多情况下会有相应解释等。但是 AppKit 的话,大部分都没有多少解释。估计又是一个历史包袱吧~

那么如何去创建一个 NSScrollView?

1
2
let scrollView = NSScrollView()
let scrollView = NSScrollView(frame: NSRect())

这个和 UIScrollView 几乎一致。

UIKit 中,我们可以通过设置 UIScrollView 的 contentSize 来进行可滑动的操作。但是呢,在 NSScrollView 里,并没有 contentSize 供我们设置,取而代之的是 documentView。当我们要使用一个 NSScrollView 的时候,需要把 conentView 指向 scrollView 的 documentView。

1
2
3
let contentView = NSView(frame: NSRect(x: 0, y: 0, width: 1000, height: 1000))
contentView.backgroundColor = .yellow
bgScrollView.documentView = contentView

在官方的教程中,解释的很清楚。

p1

NSScrollView 是由 NSScroller\NSClipView\ContentView\NSRulerView 构成的。这个可以选择用 IB 构建一个 NSScrollView 来查看,比较直观。

p2

Clip View ,是一个 NSClipView。也就是 scrollView 的一个 contentView
的属性。官方的说法,负责剪切 documentView 的内容等。从 IB 的 图看到的层级,猜测 documentView 有可能就是这个 NSClipView 层级下的 view。

NSScrollView 给人的感觉,更像一个迷你窗口,然后通过滚动 documentView 来使的内容出现在窗口里面。

在使用上,一些属性配置可以见以下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let scrollView = NSScrollView()
// scrollerStyle。overlay / legacy。 overlay 的效果,则是 scroller 背景透明,而 legacy 则是 独立出 scroller 的区域,看起来比较丑~~个人觉得😂
scrollView.scrollerStyle = .overlay
// 滚动条的显示。用 IB 创建 scrollview 时,以下两个参数均为 true。但是 code 创建 scrollview 时,以下两个参数默认均为 false。很奇怪的设计。
scrollView.hasVerticalScroller = true
scrollView.hasHorizontalScroller = true
// 滚动条的样式:light、 dark、default。default 的话,其实就是 dark
scrollView.scrollerKnobStyle = .dark
// bounce 的效果。elasticity 是弹性的含义。automatic\allowed\none。
scrollView.horizontalScrollElasticity = .automatic
scrollView.verticalScrollElasticity = .automatic

由于 macOS 的坐标起点是在屏幕左下角。因此,在设置好 documentView 后,最好让 scrollView 滚到最上方的位置。为了方便,直接用 extension 增加了一个 scrollToTop 的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
extension NSScrollView {
/// Scroll to the ducument view top.
public
func scrollToTop() {
if let documentView = self.documentView {
if documentView.isFlipped {
documentView.scroll(.zero)
} else {
let maxHeight = max(bounds.height, documentView.bounds.height)
documentView.scroll(NSPoint(x: 0, y: maxHeight))
}
}
}
}
// 滚动到最上方
scrollView.scrollToTop()

其中,isFlipped 是坐标系翻转。是 NSView 的一个属性。

当然,NSScrollView 并非只有这么简简单单几行代码。还有一些设置。比如 scrollerInsets 是设置 NSScroller 的边距等。另外,还有一些通知,可以进行一些事件的监听。

最后上个demo

p3