知识点：
1. 定制NSButton
2. 定制圆角窗口
3. 使用NSStackView
4. 实现点击docker图标，重新显示窗口的功能
效果图：
仿QQ浏览器导入书签窗口
定制NSButton
关于如何定制NSButton的基础内容，可以参考https://github.com/zhaorui/BlueButton在这里我们需要仿照QQ浏览器的导入书签窗口，定制一个圆角带阴影的按钮。
定制NSButton通常有两种技术，第一种是通过重写NSView的draw(_:)方法，该技术效率较低。另一种是设置NSView的wantsUpdateLayer属性为true，这样每次重绘NSButton的时候都会调用updateLayer()函数，效率较高，我们使用layer来定制新按钮就是采用这种方法。
首先是继承NSButton，在storyboard中按钮的style设置为square，重写viewDidMoveToWindow()函数，给按钮添加两层layer，它们分别是CALayer(用于存放按钮图片)，CATextLayer(用于存放按钮底部文字)。实现鼠标悬停时出现灰色背景的功能也很简单，只需要利用addTrackingRect(_:owner:userData:assumeInside:)给按钮设置跟踪区域，然后重写按钮的mouseEntered(with:)和mouseExited(with:)方法即可。
class ImportButton: NSButton{
private var mouseInButton =false
override func mouseEntered(with event: NSEvent) {
mouseInButton = true
self.needsDisplay = true
}
override func mouseExited(with event: NSEvent) {
mouseInButton = false
self.needsDisplay = true
}
override func viewDidMoveToWindow(){
...
let image_layer = CALayer()
let title_layer = CATextLayer()
//定制layer
...
addTrackingRect(self.bounds, owner: self, userData: nil, assumeInside: false)
}
override var wantsUpdateLayer: Bool{
return true
}
override func updateLayer() {
if mouseInButton {
self.layer?.backgroundColor = NSColor.gray.cgColor
} else {
self.layer?.backgroundColor = NSColor.gray.cgColor
}
}
}
定制圆角窗口
设置窗口为圆角的原理是将窗口隐藏，然后定制窗口的contentView以圆角显示。
ZRMainWindowController.swift
class ZRMainWindowController: NSWindowController {
override func windowDidload() {
super.windowDidload()
window?.isMovableByWindowBackground = true //设置窗口可以点击背景移动
window?.isReleaseWhenClosed = false
window?.isOpaque = fasle //设置窗口为透明
(NSApp.delegateas!AppDelegate).window_controller=self
}
}
MainView.swift
class MainView: NSView {
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)//重绘contentView, 以圆角显示
NSColor.white.set()
NSBezierPath(roundedRect: dirtyRect, xRadius:10, yRadius:10).fill()
}
}
使用NSStackView
NSStackView的使用方法相对简单，较为常用的有addView(_:in:)，removeView(_)，以及views属性，熟练这三件东西，就能对NSStackView进行简单的添加，删除，查找操作了。这里着重介绍NSStackView的在storyboard中的属性，选中一个NSStackView, 在Attributes Inspector中就能看到它们。
Orientation: [Horizontal, Vertical] 指定NSStackView的增长方向，只有水平和垂直两种。
Alignment: [Top, Bottom...] 这个也好理解，就是StackView 中的所有子view以某种形式对齐。
Distribution: [Fill, Fill Equally, Fill Proportionally, Equal Spacing, Equal Centering, Use Gravity Area]
以代码中的secondRow为例, secondRow使用Autolayout固定了其宽度和高度，方便我们理解Distribution属性。
去掉一下代码的注释，给NSStackView添加红色背景，可以清晰的看见效果。
ZRStackView.swift
class ZRStackView : NSStackView {
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
//NSColor.red.set()
//NSBezierPath(rect: dirtyRect).fill()
}
}
Fill，表示像secondRow添加子view时，子view会填满整个NSStackView
Fill Equally，表示子view会以相同大小进行填充，而忽略子view自身大小
Fill Proportionally，表示子view的大小不会忽略，填充的时候根据各个子view的大小，按大小比例进行填充。
Equal Spacing, 每一个子view按实际大小填充，保证每个子view间的间距一致。
Equal Centering, 每一个子view按实际大小填充，保证每个子view的中心点间的间距一致。
Use Gravity Area: 非常有用的一个布局，示例代码中就是使用该布局。使用后NSStackView被分割成了3个区域，分别是Leading Views, Center Views, 以及Trailing Views。使用它子view就不会占满整个NSStackView。在代码中我们如下给NSStackView添加子view。
@IBAction func addChrome(_sender:ImportButton) {
if secondRow.views.contains(chromeBtn) {
secondRow.removeView(chromeBtn)
} else {
secondRow.addView(chromeBtn, in: .leading)
}
}
实现点击docker图标，重新显示窗口的功能
重写NSApplicationDelegate中的方法applicationShouldHandleReopen(_, hasVisibleWindows:) ->Bool，每次点击docker图标AppDelegate会负责调用该函数。在AppDelegate中添加变量window_controller保持对窗口的引用，这样即使关闭窗口后，窗口控制器也不会被释放。最后，参考上面ZRMainWindowController.swift的代码，设置window的isReleaseWhenClosed属性，保证窗口不被释放。
网友评论