图片
本次教學目標:
  1. 學會如何自行繪製視窗背景
操作環境: OS X Version 10.9.1 Xcode Version 5.1 (5B130a) 有時候對於制式的視窗感到厭煩,想要自行設計不一樣的樣式,自訂的TitleBar、透明背景,修改視窗的圓角,但這些在 Interface Builder卻沒有地方可以更改。 本次教學將教大家如何複寫 DrawRect: 方法,以建立一個透明背景的視窗。

建立 OS X Application 專案

這次我們建立一個名為 HelloDrawRect 的專案 請參考教學 OSX APP 教學 Part2-Timer 建立新專案
图片
新專案名為 HelloLocalNotification。
新增 MainWindowController,整理專案結構如下:
图片
再新增 Group 名為 Views,並在底下新增一Objective-C class名為 BackgroundView,繼承 NSView。
图片
最後專案結構如下:
图片

設計版面(layout)

图片
移除 Main.xib 的 Window 元件。
图片
選擇 MainWindowController.xib,調整 Window 的屬性如上圖,只勾選 Shadow。
图片
加上 Label ,調整至適當大小並將顏色改為綠色。
图片
於左上角加入 Round Button,並修改 image 屬性為 NSStopProgressFreestandingTemplate,調整 position 屬性。

編寫邏輯

接下來將開始編寫程式碼了。bearAppDelegate.h/.m 請參考 OSX APP 教學 OSX APP 教學 Part2-Timer Window 這個元件會包含一個主要的 View,可以想像是在視窗上還有一層透明的描圖紙。
图片
本次教學就是要將 Window 本身的顯示顏色都全部消去,將透明度調為0,然後再複寫 View DrawRect: 方法,來繪製想要呈現的樣子。在 DrawRect: 中繪製的過程 NSBezierPath 類別可以說是不可或缺的,我們用這個類別來繪製路徑,可以想像我們用畫筆在紙上畫出的線。 NSColor 的 setFill 方法則是決定目前繪圖所指用的填充色,當之後NSBezierPath  呼叫到 fill 方法時,就會在路徑封閉的區域中填滿設定的填充顏色。 以下是 BackgroundView.m 的 Code
awakeFromNib 方法,會在解開 Nib 時的時候被呼叫,我們在這時候去修改 Window 的屬性讓它變成透明,讓 View 繪製呈現。並在最後將上動畫的效果,使得在執行時是以漸進的方式呈現。以下是  MainWindowController.h/.m 的 Code

連接元件

图片
選擇 MainWindowController.xib,選取 Window下的 View,將屬性對應的類別改為 BackgroundView。
图片
對 File’s Owner 點擊右鍵,依圖連接元件。

測試結果

接下來測試一下完成的程式。 按下鍵盤上的 Command + Shift + K,清除專案之前編譯的檔案。 按下鍵盤上的 Command + R,編譯並執行程式。
图片
以漸進的方式顯示視窗,由於我們移除了 TitleBar,所以點擊左上角的自行設置的按鈕關閉視窗。

後續討論

關於這次的Sample Code 下載: https://github.com/TakoBear/OSXHelloDrawRect2014/05/13 更新: 本次教學由於隱藏了視窗的 title bar,所以造成無法移動視窗。這問題的解法是 NSWindow 有一個屬性 isMovableByWindowBackground ,將該值設成 YES,就可以透過點擊視窗任一位置移動了。 您可以將這段程式碼適當地加在 bearAppDelegate.m
或是 MainWindowController.m 中

參考