知识点:
1. 定制NSButton
2. 定制圆角窗口
3. 使用NSStackView
4. 实现点击docker图标,重新显示窗口的功能
效果图:
定制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属性,保证窗口不被释放。