Just a Computer Graphics Studio & My Life

[Xcode] 各尺寸畫面即時預覽

Apple今年推出的iPhone 6iPhone 6+螢幕大小為4.7吋5.5吋,這對開發者來說無疑是個新的考驗,因為先前我們只要在3.5吋和4吋做設計,如今一次多了兩款大小!以為一個專案要同時為四種大小做設計,事實上也是如此⋯⋯不過呢~Xcode也隨著iPhone進化,我們只要透過新的功能特性,即可簡化設計不同螢幕大小的程序!

寫程式同時也在設計(所以才叫做程式設計師),界面最好能夠直接在電腦螢幕上預覽,比起一維的程式碼,二維的畫面更加直覺!在新的專案中,我開始使用「自動佈局(Auto Layout)」技術,設定好後在四種螢幕大小顯示效果相當好,Xcode的各尺寸畫面即時預覽做得相當棒,且看一下我的一個畫面吧!

Xcode 3.5%22 Xcode 4%22 Xcode 4.7%22 Xcode 5.5%22

看得出來由上而下,分別是3.5吋、4吋、4.7吋、5.5吋嗎?我只是做切換預覽的動作,元件就依照我所設定來「自動佈局」!不太需要跑各種螢幕大小的實機模擬器囉~當然如果是用code寫自動佈局,還是要編譯執行跑結果啦:P~

參考:iPhone 4/5/6 手指觸及範圍[寫真] iPhone 5C[寫真] iPhone 6 與 iPhone 6+

Advertisements

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: