天天看點

ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習

StoryBoard的初步學習

最近看了一些用storyboard做的小demo覺得,storyboard有種很清晰的感覺,頁面之間的切換很有層次感,直接在一個檔案中顯示所有視圖的聯系。較之以前的xib或者手寫代碼看起來輕松了很多,隻需要進行一些連線就能實作原來需要一大段的代碼才能實作的東西。

好了,下面開始我們的正題。建立一個singleview application。打開appdelegate.h檔案,如下

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@end           

有沒有發現,window的輸出口不見了,沒了原來的IBOutlet了。

同樣,代開.m檔案,你會更加訝異application:didFinishLaunchingWithOptions: 方法, 也隻不過簡單的傳回了一個YES。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    return YES;
}           

那麼它是如何實作初始時的加載呢?

答案就在.plist檔案中

ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習
ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習

在以前用xib建立的工程中,此處是NSMainNibFile,它會告訴UIApplication去加載mainwindow.xib。而現在會直接加載MainStoryBoard.storyboard,進而執行個體化出第一個視圖控制其對象,然後将所有視圖加載帶UIWindow上。

接下來我們來小小實踐一下,打開storryboard檔案,你會看到

ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習
ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習

左邊的箭頭代表初始的視圖控制器,也就是以前的rootviewcontroller,在這裡,我們将這個視圖控制器删掉,添加一個TabbarController,然後将箭頭移至這個視圖上。然後依次添加TableviewController。最後結果是這樣的

ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習
ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習

再添加一個tableviewcontroller時,最好用NavigationController來控制,操作方法是選中某個tableviewcontroller,然後選擇菜單欄editor-》e'mbed-》NavgationController

ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習
ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習

某兩個視圖要建立起聯系的時候,可以在某個視圖上按住control然後拖到另外一個視圖選擇相應選項。

在視圖都建立完成之後,就為每個視圖添加相應的類,當然tabbarController以及表視圖的導航器可以不用添加。最關鍵的一步,如下圖所示

ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習
ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習

一定要為相應的視圖改為某個類的執行個體。

下面講講TableViewCell,這個可能和以前xib時,大不相同。

ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習

,這裡假設某個cell的style為SubTitle。

ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習

在相應的資料源的

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath           

方法中你隻需做如下操作

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView 
dequeueReusableCellWithIdentifier:@"PlayerCell"];
Player *player = ...
cell.textLabel.text = ...
cell.detailTextLabel.text = ...
return cell;
}           

Identifier保持與上面截圖一緻即可。

如果目前沒有可以重複使用的單元格, 這裡将會自動建立一個新的原型單元格,并且傳回給你。 你要做的僅僅是提供一下你在Storyboard編輯器中為這個原型單元格指定的重用辨別(Reuse Ifentifier), 在我們這個項目中就是 “PlayerCell”。 一定不要忘記設定這個辨別,否則這個就不能正常工作了。

和xib一樣,你也可以建立一個繼承Cell的類,和上面一樣

ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習

為相應的cell改成某個類的執行個體。

ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習

繼續,來認識下Segue.(讀作seg-way)

Segue簡單來說是視圖間的聯系,也就是圖上的箭頭連線。當你想要将某個視圖跳轉時将本身的資料傳遞給目的視圖控制器的時候,可以調用這個方法

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender           

最好為每個Segue都添加一個identifier,類似于tag一樣的東西。選中某個segue,然後修改即可。如:

ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習
ios7學習系列之StoryBoard的初步學習StoryBoard的初步學習

這裡是在兩個 scene(即視圖控制器) 之間建立連接配接的步驟(一般采用代理模式)。

  1. 在源 scene 中的按鈕或其他控件上建立 segue 到目标 scene。(如果你想用模态的方式展現新界面, 那麼一般目标應該是 Navigation Controller)
  2. 為 segue 設定一個唯一辨別。(它僅僅需要在源 scene 中唯一, 不同的 scene 可以用同樣的辨別名),即上面截圖所示。
  3. 為目标 scene 建立代理協定。
  4. 讓源 Scene 實作代理協定。 它應該在某個按鈕按下的時候關閉目标控制器。
  5. 在源 Scene 中實作 prepareForSegue 方法, 在這裡設定 destination.delegate = self; 。

值得注意的是:

Segue 隻能是單向的, 他們隻能用于打開一個新界面。 如果要傳回或者關閉界面(或者從導航控件的棧中彈出),通常都是用代理來做的。 Segue 僅僅聽從于源控制器, 而目标控制器甚至都不知道自己是被 Segue 打開的。

嗯,所有的工作到此結束,相信對storyboard有一定的了解了,那麼趕緊動起來,實踐吧!

環境:Xcode5,MAC Os X 10.8.4

demo位址:demo

參考資料:Ray Wenderlich

尊重他人勞動成果,轉載請注明出處。謝謝!