Pap.er 模仿 - 第二天

最后更新：2017-12-19

在第一天中, 我们完成了项目的基本设置、隐藏Dock、显示和隐藏Popover等操作,接下来的这章中, Pap.er将会去搭建对应 UI.

一、设置Popover对应颜色

官方的Pap.er的箭头部分色值为RGB=(34, 34, 34)

查找官方的NSPopover API,发现没有设置对应和方法, 尝试更改ContentViewController.view, 但是也是没有对应的属性来设置, 通过 Stack Overflow, 可以更改颜色设置.

Step1: 新建一个继承于NSView的子类,命名为: MainPopoverRootView;
Step2: 再新建一个继承于NSView的子类,命名为: MainPopoverBackgroundView;
Step3: 对新建的 MainPopoverRootView 和 MainPopoverBackgroundView 分别做如下的设置:

// MainPopoverRootView
class MainPopoverRootView: NSView {
    
    override func viewDidMoveToWindow() {
        let aFrameView = self.window?.contentView?.superview
        
        let aBGView = MainPopoverBackgroundView(frame: aFrameView?.bounds ?? .zero)
        aFrameView?.addSubview(aBGView, positioned: .below, relativeTo: aFrameView)
        aBGView.autoresizingMask = [.width, .height]
        super.viewDidMoveToWindow()
    }
}

// MainPopoverBackgroundView
class MainPopoverBackgroundView: NSView {
    
    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)
        
        NSColor(red: 34/255.0, green: 34/255.0, blue: 34/255.0, alpha: 1).set()
        dirtyRect.fill()
    }
}

Step4: 打开 MainPopoverViewController.xib,设置如下:

Step5：运行结果如下:

二、构建主界面

1. 打开 MainPopoverViewController.xib,设置宽高为: 285 * 600
   

2. 将解析的资源里面的 paperHeader、reload_button、Settings、download 文件拖入资源文件夹