en

hi, it seems you are using microsoft internet explorer. it doesn't match web standard and causes problems browsing this site. please please please use mozilla firefox or google chrome instead. thank you!

zh

哦哦!您正在使用Internet Explorer 瀏覽器,它與我們的網頁標準並不相容,可能會導致畫面顯示不正常。
請改用 Mozilla Firefox 或者 Google Chrome 才能正常瀏覽本網站,謝謝!

1.09.2012

從 Empty Application 到 Single View Application

這篇主要是示範如使用完全空白的 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 的方法與排版問題ㄧ文,解決排版與工作區域的問題。






沒有留言:

張貼留言