原文

歡迎回到 macOS 開發(fā)系列教程的第二部分谜悟！

在第一部分则吟，你學(xué)了怎樣安裝 Xcode，怎樣創(chuàng)建一個(gè)新的 APP皇忿，添加 UI畴蹭，連接 UI 和代碼臭蚁，調(diào)試代碼和怎樣獲得幫助罢防。如果你對(duì)這些還不太確定，回到第一部分再瀏覽一遍晰洒。
在這一部分幔荒，你將創(chuàng)建一個(gè)更復(fù)雜的 APP 的用戶接口糊闽。你將學(xué)到怎樣讓一個(gè)窗口可調(diào)整大小，已經(jīng)設(shè)計(jì)和導(dǎo)航到第二個(gè)窗口顯示 APP 的偏好設(shè)置爹梁。

準(zhǔn)備開始

打開 Xcode右犹， 在歡迎窗口中點(diǎn)擊 Create a new Xcode project，或者選擇 File/New/Project…就像在第一部分一樣姚垃。選擇 macOS/Application/Cocoa Application念链，點(diǎn)擊下一步，將 APP 命名為 EggTimer积糯，確保語(yǔ)言選擇 Swift掂墓， Use Storyboards 是選中的。點(diǎn)擊 Next 選擇項(xiàng)目保存的地方絮宁。

編譯運(yùn)行 APP梆暮，確保它工作正常。

EggTimer App

你即將創(chuàng)建的 APP 是 EggTimer App绍昂。它從選擇的時(shí)間開始倒數(shù)計(jì)數(shù)剩余的時(shí)間啦粹。有一幅圖片雞蛋熟的時(shí)候會(huì)改變偿荷，雞蛋準(zhǔn)備好的時(shí)候會(huì)播放音樂。第二個(gè)窗口將顯示 APP 的偏好唠椭。

image.png

從項(xiàng)目導(dǎo)航器打開 Main.storyboard跳纳。像在第一部分中看到的一樣，你已經(jīng)擁有了 3 個(gè)組件：

• Application Scene
• Window Controller Scene
• View Controller Scene

Application Scene 包含菜單欄和菜單贪嫂，程序運(yùn)行時(shí)它會(huì)出現(xiàn)寺庄。Window Controller 定義了程序窗口的行為：它怎樣調(diào)整大小，新窗口怎么顯示力崇，APP 是否保存窗口大小和位置等等斗塘。一個(gè)窗口控制器可以管理多個(gè)窗口，但是如果它們需要不同的屬性亮靴，你需要添加多個(gè) Window Controller馍盟。

View Controller 顯示窗口中的用戶接口——這是你布置 UI 的地方。

注意茧吊，有一個(gè)箭頭指向 Window Controller贞岭。這表明當(dāng) APP 啟動(dòng)時(shí)，它將控制最初的顯示搓侄。你可以通過(guò)選擇文檔大綱中的 Window Controller瞄桨，然后查看 Attributes Inspector 來(lái)確認(rèn)這點(diǎn)。取消 Is Initial Controller選項(xiàng)箭頭就會(huì)消失讶踪。再次選中它芯侥，因?yàn)槟愦_實(shí)想讓它成為最初的控制器。

Window Controller

開始用戶接口之前確保選擇了 Main.storyboard乳讥。在 Window Controller 里點(diǎn)擊選擇窗口筹麸。在 Window Controller 可視化編輯器了顯示了 “View Controller”，因?yàn)樗前诳刂破骼锏某簟?duì)于這個(gè) APP物赶，你不想讓它縮小到 346 x 471以下。這也是這個(gè)窗口的初始大小留晚。

image.png

到 Size Inspector 里將內(nèi)容寬度設(shè)置為 346酵紫，高度設(shè)置為 471。檢查 Minimum Content Size错维，確保最小寬度和高度與內(nèi)容大小一致奖地。可視編輯器中的 Window Controller 大小將改變赋焕。你可能會(huì)想移動(dòng)一下它参歹，不讓它覆蓋其他對(duì)象。

雖然沒有嚴(yán)格的必要隆判，如果你把 View Controller 的尺寸調(diào)整為跟包含它的 Window Controller 一樣犬庇，可視化界面看起來(lái)更容易僧界。點(diǎn)擊 View Controller，確保在文檔大綱里視圖是選中的臭挽。在尺寸檢查器了將寬和高分別設(shè)置為 346 和 471捂襟。如果需要，從新定位所有對(duì)象』斗澹現(xiàn)在 WindowController 和 ViewController 在可視編輯器里顯示為相同大小了葬荷。選擇 WindowController 中的窗口，在屬性檢查器了將它的標(biāo)題改為 Egg Timer纽帖。將 Autosave 命名為 EggTimerMainWindow宠漩，這樣在啟動(dòng)時(shí)自動(dòng)保存窗口的大小和位置。

image.png

如果你是一個(gè) iOS 程序員懊直，你還將處理各種不同的設(shè)備類型和旋轉(zhuǎn)哄孤。在 macOS 編程中，你必須處理無(wú)限的窗口大小和高寬比吹截。這是為什么我把窗口的初始尺寸弄得有點(diǎn)怪異。幸運(yùn)的是 Auto Layout 為你負(fù)責(zé)了所有工作凝危。

UI 布局——第一部分

基本的 UI 由兩個(gè) stack views 組成波俄。第一個(gè)包含剩余時(shí)間文本和圖片。第二個(gè)沿著底部包含 3 個(gè)按鈕蛾默。從按鈕開始：

• 在對(duì)象庫(kù)里搜索 Button
• 拖一個(gè) Gradient button 到視圖里
• 使用屬性檢查器將它的圖片刪除懦铺，標(biāo)題改為 Start
• 字體改為 System 24

image.png

• 擴(kuò)展按鈕讓它顯示所有文本
• 選中 Start 按鈕，按兩下 Command-D 復(fù)制兩份
• 拖出兩個(gè)按鈕支鸡，讓你能看到他們
• 將新按鈕的標(biāo)題改為 Stop 和 Reset
• 選中 3 個(gè)按鈕冬念，選擇 Editor/Embed In/Stack View

image.png

為了讓按鈕填充 Stack View，選擇 Stack View 作如下改變：

• Distribution: Fill Equally
• Spacing: 0

選擇可視編輯器下面的 Add New Constraints 按鈕牧挣，像下面一樣設(shè)置左急前、右、下瀑构、高度約束裆针。選擇 Update Frames: Items of New Constraints 然后點(diǎn)擊 Apply 4 Constraints。

image.png

stack view 現(xiàn)在放置正確了寺晌，但是按鈕比 stack view 短世吨。在文檔大綱里面，按著 CTRL 拖動(dòng) Start 按鈕到 Stack View呻征，然后選擇 Equal Heights耘婚。其他兩個(gè)按鈕相同做法。

image.png

現(xiàn)在按鈕完全像你希望的那樣了陆赋。
編譯運(yùn)行 APP沐祷。嘗試改變窗口大腥卤铡：按鈕緊貼著窗口的底部，大小均勻的隨著窗口寬帶變化戈轿。

image.png

最后在視圖檢查器里面將 Stop 和 Reset 設(shè)置為無(wú)效凌受。在計(jì)時(shí)器開始之前它們是有效的是沒有意義的。

UI 布局——第二部分

第二個(gè) stack view 包含剩余時(shí)間文本和圖片思杯。拖動(dòng)一個(gè)標(biāo)簽到視圖里面胜蛉，將標(biāo)題設(shè)置為 6:00，對(duì)齊方式設(shè)置為 center色乾。當(dāng)前的系統(tǒng)實(shí)體 （San Francisco）使用等比例間距誊册，對(duì)于數(shù)字這意味著如果你有一個(gè)計(jì)時(shí)器，數(shù)字發(fā)生改變時(shí)它似乎跳來(lái)跳去的暖璧。這真的很煩人案怯。

將字體改為 Helvetica Neue 避免這種情況，字體大小設(shè)置為 100澎办。這會(huì)使得文本太大嘲碱，所有擴(kuò)展標(biāo)簽直到你能看到它。

image.png

在對(duì)象庫(kù)的過(guò)濾框里輸入 image局蚀，搜索并添加圖片控件麦锯。這會(huì)帶出幾個(gè)可能的結(jié)果，你想要的是 Image View琅绅。將它拖到視圖里扶欣，放在文本標(biāo)簽下面。

從這里下載資源千扶。解壓文件料祠，打開 Egg Images 文件夾。在 Xcode 里點(diǎn)擊項(xiàng)目導(dǎo)航器里的 Assets.xcassets澎羞。

拖動(dòng) 6 個(gè)圖片到資源庫(kù)中∷枵溃現(xiàn)在你的 APP 可以使用它們了。因?yàn)閳D片文件名中包含 “@2x”妆绞，它們已經(jīng)自動(dòng)分配到了每個(gè)圖片資源的 2x 部分梧宫。

image.png

回到 Main.storyboard，選擇你剛才添加的圖片視圖摆碉，在屬性檢查器里點(diǎn)擊 Image 彈出菜單塘匣。你能看到你剛才添加的圖片和內(nèi)置圖片。選擇 stopped巷帝。

制作第二個(gè) stack view：選擇剩余時(shí)間文本標(biāo)簽和圖片視圖忌卤。選擇 Editor/Embed In/Stack View。現(xiàn)在你需要配置 stack view 填滿空閑空間楞泼。在可視編輯器底部點(diǎn)擊 Add New Constraints 按鈕添加它們的約束驰徊。

image.png

stack view 按要求擴(kuò)展了笤闯，但是圖片仍然太小。選擇圖片視圖棍厂，將它的左右約束想下面顯示的一樣設(shè)置為 Standard Value颗味。

image.png

在屬性檢查器里將 Scaling 設(shè)置為 Proportionally Up or Down。
編譯運(yùn)行 APP牺弹。改變窗口大小浦马，查看所有 UI 元素是否像我們期望的一樣改變大小和位置。

image.png

連接 UI 和代碼

像在第一部分中學(xué)到的一樣张漂，你需要設(shè)置 @IBOutlets 和 @IBActions 連接 UI 和代碼晶默。對(duì)于這個(gè)窗口你需要為一下元素設(shè)置 @IBOutlets：

• 剩余時(shí)間標(biāo)簽
• Egg 圖片
• 3個(gè)按鈕

當(dāng)用戶點(diǎn)擊按鈕時(shí)，3 個(gè)按鈕還需要 @IBActions 來(lái)觸發(fā)函數(shù)航攒。在項(xiàng)目導(dǎo)航中選擇 Main.storyboard磺陡。按著 Option 點(diǎn)擊 ViewController.swift，在輔助窗口中打開它漠畜。如果你的空間不夠币他，使用右上角的按鈕隱藏工具面板和導(dǎo)航面板。選擇 countdown timer label憔狞，就像在第一部分一樣蝴悉，按著 CTRL 拖到 ViewController 類里。將標(biāo)簽名稱設(shè)為 timeLeftField躯喇。重復(fù) egg image view，名稱設(shè)為 eggImageView硝枉。為按鈕設(shè)置 outlets廉丽，名稱設(shè)為 startButton， stopButton 和 resetButton妻味。

按鈕還需要 @IBActions正压。按著 CTRL 拖動(dòng) Start 按鈕，但是這次連接類型改為 Action责球。名稱設(shè)為 startButtonClicked焦履。重復(fù)為另外兩個(gè)按鈕創(chuàng)建 Action，名稱為 stopButtonClicked 和 resetButtonClicked雏逾。如果你想我一樣嘉裤，經(jīng)常忘記將連接類型改為 Action，你將得到兩個(gè) IBOutlets栖博，而不是 @IBAction.屑宠。為了移除 IBOutlets，先刪除 ViewController 里面多余的代碼行仇让，然后轉(zhuǎn)到連工具面板中的接檢測(cè)器典奉。在 Referencing Outlets 下面你將看到兩個(gè)條目躺翻。點(diǎn)擊錯(cuò)誤條目旁邊的 X 刪除它。然后回去卫玖，這次記得改變連接菜單 @IBAction公你。

image.png

現(xiàn)在 ViewController 看起來(lái)應(yīng)該像這樣：

image.png

在本系列的第3部分，你將向這些函數(shù)里添加代碼假瞬，讓它們工作陕靠。關(guān)閉輔助編輯器，重新打開導(dǎo)航和工具面板笨触，如果你關(guān)閉了它們懦傍。

菜單

在 Main.storyboard 里，點(diǎn)擊 menu bar 或者Application Scene 選擇它芦劣。APP 模板提供了一組默認(rèn)的菜單粗俱，但是，對(duì)這個(gè) APP 來(lái)說(shuō)它們大部分是不需要的虚吟。探索這些菜單最容易的方法是使用 Document Outline寸认。使用展開三角形顯示菜單視圖和它的內(nèi)如。

image.png

菜單的結(jié)構(gòu)是一系列的嵌套的菜單和菜單想串慰。切換到工具面板的身份檢測(cè)器偏塞，這樣當(dāng)你點(diǎn)擊它們是能看到它們實(shí)際是什么。Main Menu 是一個(gè) NSMenu 類的實(shí)例邦鲫。它包含一個(gè) NSMenuItems 數(shù)組：View 就是其中之一灸叼。視圖菜單條目包含一個(gè)子菜單 （NSMenu），這個(gè)子菜單包含自己的 NSMenuItems庆捺。注意 Separator 條目只是一個(gè)特殊化的 NSMenuItem古今。

第一件事是刪除這個(gè) APP 里不需要的菜單。在 Document Outline 里選擇 File 菜單滔以，然后 按 Delete 刪除它捉腥。如果你在視圖編輯器里刪除它，你只能刪除 File 菜單條目里的菜單你画，因此會(huì)在菜單條里留下一個(gè)空白抵碟。如果發(fā)生這種情況，選擇空白坏匪，再次按 Delete 刪除它拟逮。
一直刪除直到只剩下 EggTimer, Window 和 Help。

image.png

現(xiàn)在你將添加一個(gè)新的菜單适滓，用來(lái)模仿 3 個(gè)按鈕的操作唱歧。在對(duì)象庫(kù)里搜索 Menu。記住每個(gè)菜單都是從菜單項(xiàng)開始的，拖動(dòng)一個(gè) Menu Item 到菜單條中颅崩，放到 EggTimer 和 Window 之間几于。它將顯示為一個(gè)藍(lán)色盒子，那是因?yàn)樗€沒有一個(gè)帶標(biāo)題的菜單⊙睾螅現(xiàn)在拖動(dòng)一個(gè) Menu 放到藍(lán)色盒子中沿彭。如果你覺得難以定位到藍(lán)色盒子，可以拖動(dòng)到文檔大綱尖滚，放到新的 Item 下喉刘。新菜單依然沒有標(biāo)題，但是現(xiàn)在它有 3 個(gè)條目了漆弄。

image.png

選中菜單的同時(shí)（不是菜單項(xiàng)）睦裳，到屬性檢查器里將標(biāo)題改為 Timer。這將為你的新菜單分配一個(gè)名字撼唾。選擇 Item1 將它的標(biāo)題改為 Start 廉邑，可以通過(guò)雙擊修改它，或者在屬性檢查器里修改倒谷。

點(diǎn)擊屬性檢查器里的 Key Equivalent蛛蒙，按 Command-S 賦予它鍵盤快捷鍵。通常 Command-S 意思是保存渤愁，但是因?yàn)槟阋呀?jīng)刪除了 File 菜單牵祟，這不會(huì)造成沖突，盡管重用通用快捷鍵為其他目的不是一個(gè)好的實(shí)踐抖格。用同樣的方法將第二個(gè)條目設(shè)置為 Stop诺苹，快捷鍵為 Command-X。第三個(gè)條目的標(biāo)題為 Reset雹拄，快捷鍵為 Command-R收奔。

image.png

在可視化編輯器中，你可以在菜單條的頂部看到 3 個(gè)按鈕办桨。切換到省份檢查器筹淫。依次點(diǎn)擊每一個(gè)按鈕站辉，顯示它們連接到 Application呢撞、First Responder 和 AppDelegate。First Responder 通常是當(dāng)前最前面的 view controller饰剥，它能收到來(lái)自菜單項(xiàng)的動(dòng)作殊霞。
按著 Option 點(diǎn)擊 ViewController.swift，在按鈕的 @IBActions 代碼的下面添加以下代碼汰蓉。

// MARK: - IBActions - menus

@IBAction func startTimerMenuItemSelected(_ sender: Any) {
  startButtonClicked(sender)
}

@IBAction func stopTimerMenuItemSelected(_ sender: Any) {
  stopButtonClicked(sender)
}

@IBAction func resetTimerMenuItemSelected(_ sender: Any) {
  resetButtonClicked(sender)
}

這些函數(shù)將通過(guò)菜單調(diào)用绷蹲，它們?cè)僬{(diào)用按鈕動(dòng)作的函數(shù)。你可以直接讓菜單項(xiàng)調(diào)用按鈕的方法，但是我選擇這種方式使調(diào)試時(shí)一系列事件更明顯祝钢。保存文件比规，關(guān)閉輔助編輯器。

按著 CTRL 鍵將 Start 菜單拖到代表 First Responder 的橙色方塊拦英。將彈出一個(gè)巨大的選項(xiàng)清單蜒什。輸入 “sta”快速滾動(dòng)到正確的部分，選擇 startTimerMenuItemSelected疤估。

用同樣的方法將 Stop 菜單項(xiàng)連接到 stopTimerMenuItemSelected灾常，Reset 菜單項(xiàng)連接到 resetTimerMenuItemSelected。現(xiàn)在當(dāng) EggTimer 窗口出現(xiàn)在前面铃拇，選擇菜單項(xiàng)將會(huì)調(diào)用這些方法钞瀑。

然而，3 個(gè)按鈕不會(huì)同時(shí)為有效狀態(tài)慷荔，菜單項(xiàng)需要反映這些按鈕的狀態(tài)雕什。這不會(huì)在 ViewController 里發(fā)生，因?yàn)樗粫?huì)總是 First Responder拧廊，所以菜單項(xiàng)將被 AppDelegate 控制监徘。

在打開 Main.storyboard 和 菜單可見的同時(shí)，按著 Option 點(diǎn)擊項(xiàng)目導(dǎo)航中的 AppDelegate.swift吧碾。按著 CTRL 將 Start 拖到 AppDelegate凰盔，賦予 outlet 名稱 startTimerMenuItem。其他菜單項(xiàng)同樣做法倦春，名稱分別為 stopTimerMenuItem 和 resetTimerMenuItem户敬。

image.png

在第3部分，你將編寫代碼來(lái)在需要的時(shí)候啟用和禁用菜單項(xiàng)睁本，但現(xiàn)在尿庐，你需要關(guān)閉自動(dòng)的啟用和禁用。通常 APP 會(huì)檢查當(dāng)前的 First Responder 是否有一個(gè)菜單項(xiàng)對(duì)應(yīng)的方法呢堰，如果沒有禁用它抄瑟。這個(gè) APP 你希望自己控制它。選擇 Timer 菜單取消屬性選擇器中的 Auto Enables Items枉疼。

偏好窗口

image.png

EggTimer 的主窗口現(xiàn)在看起來(lái)不錯(cuò)皮假，但現(xiàn)在它需要一個(gè)偏好窗口讓用戶選擇他們需要將雞蛋煮得多好。
偏好窗口以一個(gè)單獨(dú)的窗口出現(xiàn)骂维，擁有它自己的控制器惹资。這是因?yàn)槠么翱趯⒂凶约旱哪J(rèn)尺寸，并且不能改變大小航闺。同一個(gè)窗口控制器擁有多個(gè)視圖控制器是有可能的褪测，但是那樣它們將共享那個(gè)窗口控制器的屬性猴誊。

打開 Main.storyboard，如果輔助編輯器是打開的關(guān)閉它侮措，在對(duì)象庫(kù)中搜索 “window”懈叹。拖一個(gè) Window Controller 到可視編輯器。它將同時(shí)創(chuàng)建一個(gè) View Controller 來(lái)包含它的內(nèi)容分扎。在窗口里面重新排列它們项阴，讓新的窗口控制器靠近菜單條。

打開 EggTimer 菜單笆包，按著 CTRL 從 Preferences… 拖到新的窗口控制器环揽。在彈出菜單中選擇 Show。這將創(chuàng)建一個(gè) segue庵佣，這導(dǎo)致無(wú)論什么時(shí)候用戶點(diǎn)擊 EggTimer 菜單中的 Preferences… 窗口控制器將顯示新的視圖控制器歉胶。

image.png

新的偏好窗口將顯示一個(gè)新的 view controller，所以你需要為 view controller 設(shè)計(jì)一個(gè)類巴粪。在項(xiàng)目導(dǎo)航里面選擇已經(jīng)存在的 ViewController.swift 文件通今。這樣確保你新建的文件在項(xiàng)目導(dǎo)航中有一個(gè)邏輯位置。選擇 File/New/File…肛根。

image.png

選擇 macOS/Cocoa Class 點(diǎn)擊下一步辫塌。選擇類名 PrefsViewController，為它創(chuàng)建一個(gè)子類 NSViewController派哲。語(yǔ)言選擇 Swift臼氨，取消 Also create XIB file for user interface。點(diǎn)擊下一步創(chuàng)建并保存文件芭届。

image.png

回到 Main.storyboard储矩，選擇新的視圖控制器。確保你是選擇了 view controller 自己褂乍，而不是 view持隧。在文檔大綱中選擇更容易。在身份檢查器里將類設(shè)置為 PrefsViewController逃片。

image.png

選擇偏好窗口控制器里的窗口屡拨，使用屬性檢查器將它的標(biāo)題設(shè)置為 Preferences。不要設(shè)置 autosave 名稱褥实，因?yàn)檫@個(gè)窗口每次都要顯示在屏幕的中心呀狼。取消 Minimize 和 Resize，讓窗口大小是固定的性锭。

image.png

到尺寸檢查器里面將 Content Size 的寬設(shè)置為 416赠潦，高設(shè)置為 214叫胖。在初始位置下草冈，從兩個(gè)下拉菜單里選擇 Center Horizontally 和 Center Vertically。

image.png

選擇 PrefsViewController 里的視圖，使用尺寸檢查器將它的寬設(shè)置為 416怎棱，高設(shè)置為 214哩俭。

PrefsViewController 將顯示一個(gè)用來(lái)選擇預(yù)置的時(shí)間下拉菜單，和一個(gè)選擇自定義時(shí)間的滑塊拳恋。每一個(gè)都有一個(gè)對(duì)應(yīng)的標(biāo)簽凡资，還有兩個(gè)按鈕：Cancel 和 OK。這是一個(gè)動(dòng)態(tài)顯示已選擇時(shí)間的標(biāo)簽谬运。

image.png

拖動(dòng)下面這些控件到視圖控制器隙赁，像圖中一樣排列它們：

• Label – 標(biāo)題設(shè)置為 “Preset Egg Timings:”
• Pop Up Button
• Label – 標(biāo)題設(shè)置為 “Custom Egg Timing:”
• Label – 標(biāo)題設(shè)置為 “6 minutes”
• Horizontal Slider
• Push Button – 標(biāo)題設(shè)置為 “Cancel”
• Push Button – 標(biāo)題設(shè)置為 “OK”

因?yàn)檫@個(gè)窗口大小不可變，所以不需要設(shè)置布局約束——對(duì)象總是像你安排的那樣出現(xiàn)梆暖。拖動(dòng)對(duì)象來(lái)定位它伞访，使用藍(lán)色參考線來(lái)幫助你。擴(kuò)展 “6 minutes” 標(biāo)簽的寬度幾乎到窗口的右邊轰驳，因?yàn)樗赡馨芏辔谋竞裰馈ｋp擊 Pop Up Button 查看它最初的 3 個(gè)條目并設(shè)置它們的標(biāo)題：

• For runny soft-boiled eggs (barely set whites): 3 minutes （松軟的煮蛋，幾乎沒有凝成白色）
• For slightly runny soft-boiled eggs: 4 minutes （輕微松軟的煮蛋）
• For custardy yet firm soft-boiled eggs: 6 minutes （這是什么鳥蛋级解，像奶油凍的軟蛋冒黑？）

從對(duì)象庫(kù)中拖入倆個(gè) Menu Items，然后是一個(gè)分割菜單條勤哗，最后是另一個(gè)菜單項(xiàng)抡爹。如果有定位的問(wèn)題，可以使用文檔大綱芒划。
將剩余的菜單項(xiàng)的標(biāo)題設(shè)置為：

• For firm yet still creamy hard-boiled eggs: 10 minutes （堅(jiān)固但是有點(diǎn)乳脂狀的硬蛋）
• For very firm hard-boiled eggs: 15 minutes（非常硬的蛋）

• Custom（自定義）

  
  
  image.png

我不會(huì)假裝有很好的關(guān)于煮蛋的知識(shí)豁延， 這些時(shí)間和描述來(lái)自 The Kitchn.

選擇彈出菜單，注意不是菜單項(xiàng)腊状，將 Selected Item 設(shè)置為 6 分鐘那個(gè)選項(xiàng)诱咏。

現(xiàn)在你要做一個(gè)非常巧妙的技巧，讓 APP 準(zhǔn)確的知道選擇了幾分鐘缴挖。在視圖檢查器里將每一個(gè)彈出菜單項(xiàng)的 tag 設(shè)置為數(shù)字：3, 4, 6, 10, 15袋狞。Custom 菜單項(xiàng)保留為 0。

image.png

現(xiàn)在選擇滑塊映屋，在屬性檢查器里將 Tick marks 設(shè)置為 25苟鸯，Minimum Value 設(shè)置為 1，Maximum Value 設(shè)置為 25棚点，Current Value 設(shè)置為 6早处，選中 Only stop on tick marks。你可能想要將滑塊向下移動(dòng)幾個(gè)像素瘫析。通過(guò)不選擇 Enabled 來(lái)禁用它——它只有在彈出菜單中 Custom 被選擇時(shí)才啟用砌梆。

image.png

連接偏好對(duì)象

按著 Option 點(diǎn)擊項(xiàng)目導(dǎo)航中的 PrefsViewController.swift默责，如果需要空間隱藏側(cè)邊的面板。你需要彈出菜單咸包、滑塊和標(biāo)簽的 @IBOutlets桃序。按著 CTRL 將它們拖到 PrefsViewController，將名稱設(shè)置如下：

• Popup: presetsPopup
• Slider: customSlider
• Label: customTextField

下一步烂瘫，通過(guò)按著 CTRL 拖動(dòng)來(lái)創(chuàng)建 @IBActions媒熊，記得每次都在連接菜單中選擇 Action：

• Popup: popupValueChanged
• Slider: sliderValueChanged
• Cancel button: cancelButtonClicked
• OK button: okButtonClicked

你的代碼現(xiàn)在看起來(lái)應(yīng)該像這樣：

image.png

現(xiàn)在偏好窗口的布局完成了。編譯運(yùn)行 APP坟比，從 EggTimer 菜單中選擇 Preferences 芦鳍。看完偏好窗口后點(diǎn)擊標(biāo)題欄中的紅色按鈕關(guān)閉窗口葛账。

image.png

App 的圖標(biāo)

現(xiàn)在 UI 設(shè)計(jì)只剩下最后一部分——為 APP 添加一個(gè)圖標(biāo)了怜校。你已經(jīng)下載了一個(gè)資源文件夾，并安裝了一部分圖片到 Assets.xcassets 了注竿。再次打開文件夾找到 egg-icon.png 文件茄茁。

在項(xiàng)目導(dǎo)航中選擇 Assests.xcassets。點(diǎn)擊 AppIcon巩割。將 egg-icon.png 拖到 Mac 256pt 1x 盒子中裙顽。就像在第一部分中討論的一樣，對(duì)于一個(gè)產(chǎn)品 APP宣谈，你應(yīng)該提供 AppIcon 中顯示的所有尺寸愈犹，但是在這個(gè) APP 中單獨(dú)提供一個(gè)就足夠了。

image.png

編譯運(yùn)行 APP闻丑，確認(rèn)新的圖標(biāo)出現(xiàn)在 Dock 中漩怎。如果你仍然看見默認(rèn)圖標(biāo)，選擇 Product 菜單中的 Clean 再試試嗦嗡。

現(xiàn)在你已經(jīng)完全實(shí)現(xiàn)了 APP 的 UI勋锤，但是 APP 還沒有做任何事情。如果你在任何地方感到迷惑侥祭，可以從 the Xcode project 下載全部 UI 實(shí)現(xiàn)叁执，為下一部分做準(zhǔn)備。

在這個(gè)系列的第3部分矮冬，你將添加代碼讓 APP 工作起來(lái)谈宛。