在 Xcode 中直接預覽應用 UI

在使用 Xcode 做 app 應用開發的時候,設計一下應用的 UI 界面是家常便飯,但是每次都要運行然後去模擬器裡查看輸出一件很麻煩的事情,尤其是當需要修改的元素很多、而且需要配適各種屏幕大小的時候——畢竟,現在 iPhone 的產品線不再那麼單一了。

所以,一口氣運行三四個模擬器這種事情恐怕也就只有你能幹得出來了。

其實,Xcode 並不是沒有給我們提供更方便的選擇——在storyboard編輯頁面,完全可以直接預覽 UI 而不需要編譯後在模擬器裡運行。

現在,我們來創建一個示例項目,這個項目我只添加了一點點基本的元素作為演示,這並不是一個完整的項目。

示例項目

示例項目

這個時候如果我想看看這個界面在手機上的真實模樣,那麼一般來講使用 cmd+r 編譯運行,那麼 Xcode 就會自動調用模擬器來顯示——如果我想看在其他型號的 iPhone 上的預覽,那麼我就需要重新選擇環境,然後再編譯一次,相當的麻煩。

選擇 UI 預覽

選擇 UI 預覽

如上圖顯示,我們點擊工作區左上角的那個方塊,然後在出現的菜單當中選擇最末尾的“Preview”,然後按住 option + shift 按鈕再點擊它。

用鼠標雙擊那個加號

用鼠標雙擊那個加號

在彈出的這個窗口當中,我們用鼠標雙擊那塊青色區域右邊的加號,這時候你就發現 Xcode 中的輔助窗口(默認是隱藏的)從代碼變成了預覽區域,這裡邊默認是 iPhone4s 的大小,你已經能夠看到你的 UI 的預覽了。

隱藏掉其他側欄,讓可視空間更大一點

隱藏掉其他側欄,讓可視空間更大一點

怎麼樣,這樣的預覽,可是即時的哦~再也不用來回編譯代碼啦!

要添加其他尺寸的屏幕預覽,只需要點擊預覽窗口左下角的“+”號即可!

屏幕快照 2015-05-21 下午5.47.43

本文由 落格博客 原創撰寫:落格博客 » 在 Xcode 中直接預覽應用 UI

轉載請保留出處和原文鏈接:https://www.logcg.com/archives/1007.html

關於作者

R0uter

如非聲明,本人所著文章均為原創手打,轉載請註明本頁面鏈接和我的名字。

發表評論

您的電子郵件地址不會被公開. 必填字段標 *