這篇主要是示範如使用完全空白的 Empty Application 的樣板,添加一個 storyboard,並設定對應的 UIViewController,製作出如同 Single View Application 樣板的效果。
建立 Empty Application
在開啓專案時選擇由空白樣板 Empty Application 開始,在 Device Family 項目中,這邊所要設定的是此專案是針對哪一個產品所開發,目前的現況來說,可以分成 iPhone 或是 iPad 兩種,在此範例中我們選擇通用 Universal(此設定也可以從專案設定畫面中做更改)。
使用 Empty Application 來開始新專案 |
在建立完成後,就會得到一個非常乾淨的空白專案,若是直接用模擬器執行,則會出現白色畫面,等等!不是說是空專案嗎?畫面應該是什麼都沒有的黑色才對,察看僅有的 class 檔 AppDelegate.m,你會發現原來在 application:didFinishLaunchingWithOptions: 這個啓動應用程式時會觸發的方法函式裡,已經自動幫你建立好了一個新的 UIWindow,並且將它的大小設定成與 UIScreen 相同,背景顏色為白色,現在我們將其註解掉,重新執行模擬器,果不其然得到的是一個黑色的空畫面。
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
//self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
return YES;
}
建立一個新的 Storyboard
在空專案裡必須要加入 Storyboard 才能進行使用者介面 UI 的設計,對專案新增檔案,在User Interface 分類中可以找到 Storyboard,由於 Storyboard 並不能選擇 Universal 通用,所以我們暫時在此選擇 iPhone。
替專案新增一個 Storyboard |
在建立好 Storyboard 之後,回到專案設定畫面(左邊的導覽列中點選整個專案),在 TARGETS 處的 Summary 中可以找到 iPhone / iPod Deployment Info 項目,在此項目裡的的 Main Storyboard 選擇剛剛建立的 Storyboard 檔案,這樣就完成專案與 Storyboard 的連結,如果你是使用 iPhone / iPod 這類的裝置來執行此專案,它就會使用這邊設定的 Storyboard 來製作 UI,同樣地,iPad Deployment Info 項目下的 Main Storyboard,就是專門針對使用 iPad 來執行此專案時所要使用的 Storyboard。
替專案與 Storyboard 做連結 |
建立對應的 UIViewController
有了 Storyboard 還不夠,我們還必須建立 UIViewController 才能對畫面上的元件進行控制,首先替專案新增一個 UIViewController subclass,你可以在新增檔案的 Cocoa Touch 分類中找到它,在此我們維持最基本的設定(不勾選任何 Check Box)。
替專案新增一個 UIViewController |
接著來到 Storyboard 裡,從它的元件庫中同樣拉出一個 View Controller 物件到畫面上,你會發現畫面上的 UIViewController 左邊會多一個箭頭,這表示他是這個 Storyboard 中主要的 UIViewController,也就是使用者會看到的第一個畫面(你可以多拉幾個 UIViewController 出來試試看,你同一個時間只能設定一個主要的 UIViewController)。
從元件庫中拉出一個 View Controller 物件 |
接著我們要將 View Controller 與 UIViewController subclass 做連結,點選畫面上的 View Controller,並在 Identity 屬性視窗中找到 Custom Class,將這裡設定成剛剛我們建立的 UIViewController subclass。現在,你可以在畫面上隨便拉幾個元件出來,並用模擬器執行試試看,恭喜你已經完成 Single View 的製作了。
設定 View Controller 與 UIViewController subclass 的連結 |
關於 Universal 的設定
雖然說在專案下不同解析度的裝置可以選用不同的 Storyboard 來進行設計,但是你也可以使用單一的 Storyboard 通吃到底,以上述範例來說,在 TARGETS 處選擇 Universal 通用,遇到使用 iPad 模擬器執行時的情況,畫面會自動放大符合 iPad 模擬器的大小,若是在 TARGETS 處選擇 iPhone,而非通用,那麼在用 iPad 模擬器執行時,畫面並不會出現放大的效果。
如果,你決定兩種不同解析度的裝置要共用同一個 Storyboard,你可以參考不同解析度的裝置共用同一個 Storyboard 的方法與排版問題ㄧ文,解決排版與工作區域的問題。
沒有留言:
張貼留言