（Storyboard）是一個(gè)能夠節(jié)省你很多設(shè)計(jì)手機(jī)App界面時(shí)間的新特性，下面，為了簡(jiǎn)明的說明Storyboard的效果，我貼上本教程所完成的Storyboard的截圖：

現(xiàn)在，你就可以清楚的看到這個(gè)應(yīng)用究竟是干些什么的，也可以清楚的看到其中的各種關(guān)系，這就是Storyboard的強(qiáng)大之處了。如果你要制作一個(gè)頁面很多很復(fù)雜的App，Storyboard可以幫助你解決寫很多重復(fù)的跳轉(zhuǎn)方法的麻煩，節(jié)省很多時(shí)間，以便你能夠完全的專注于核心功能的實(shí)現(xiàn)上。



開始



首先啟動(dòng)Xcode，新建一個(gè)工程，我們?cè)谶@里使用Single View App Template，這個(gè)模板會(huì)提供一個(gè)類和一個(gè)Storyboard，免去我們自己創(chuàng)建的麻煩。

創(chuàng)建完成之后，Xcode的界面大概是這樣的：

這個(gè)新的工程由兩個(gè)類：AppDelegate和ViewController以及一個(gè)Storyboard組成（如果你選擇了兩個(gè)設(shè)備會(huì)有兩個(gè)Storyboard），注意這個(gè)項(xiàng)目沒有xib文件，讓我們首先看看Storyboard是什么樣的，雙擊Storyboard打開他：

Storyboard的樣子和工作方式都和Interface Builder（以下簡(jiǎn)稱為IB）像極了，你可以從左下方的控件庫中拖動(dòng)控件到你的View之中并且組織他們的排放順序，唯一不同的地方就是，Storyboard不止是包含一個(gè)視圖控件，而是所有的視圖控件以及他們之間的關(guān)系。


Storyboard對(duì)一個(gè)視圖的官方術(shù)語是一個(gè)場(chǎng)景，但是一個(gè)場(chǎng)景其實(shí)就是一個(gè)ViewController，在iPhone中一次只能夠展示一個(gè)場(chǎng)景，而在iPad中一次可以展示多個(gè)場(chǎng)景，比如Mail應(yīng)用程序。

通過嘗試添加一些控件，你可以感受一下Storyboard的工作方式。

這個(gè)是數(shù)據(jù)顯示器，顯示所有場(chǎng)景及其控件的結(jié)構(gòu)。

在IB中，這個(gè)位置顯示的是你的NIB文件中的文件，而在Storyboard中這里顯示的是ViewController，目前這里只有一個(gè)ViewController，我們接下來可能會(huì)增加一些。

這是一個(gè)文檔管理器的縮小版，叫做dock。

Dock展示場(chǎng)景中第一級(jí)的控件，每個(gè)場(chǎng)景至少有一個(gè)ViewController和一個(gè)FirstReponder，但是也可以有其他的控件，Dock還用來簡(jiǎn)單的連接控件，如果你需要向ViewController傳遞一個(gè)關(guān)系時(shí)，只需要將其按住Ctrl鍵拖到ViewController上就可以了。

Note:你大概不會(huì)太長(zhǎng)使用FirstResponder，因?yàn)樗皇且粋€(gè)代理控件，代表著當(dāng)前你所使用的控件。

現(xiàn)在運(yùn)行這個(gè)應(yīng)用，他會(huì)向我們?cè)O(shè)計(jì)的界面一樣。

如果你以前制作過NIB型的應(yīng)用的話，你也許回去尋找MainWindow.xib ，這個(gè)文件包括所有的ViewController，Appdelegate等等，但是在Storyboard中這個(gè)特性已經(jīng)被廢止了。

那么，沒有這個(gè)文件，應(yīng)用從那里起始呢？

讓我們打開AppDelegate文件，看看那上面是怎么說的：

Java代碼 ?

#import?<UIKit/UIKit.h> ??

??

@interface?AppDelegate?:?UIResponder?<UIApplicationDelegate> ??

??

@property?(strong,?nonatomic)?UIWindow?*window; ??

??

@end??

#import <UIKit/UIKit.h>@interface AppDelegate : UIResponder <UIApplicationDelegate>@property (strong, nonatomic) UIWindow *window;@end

如果要使用Storyboard特性，那么AppDelegate必須繼承自UIResponder類， 之前則是繼承自NSObject類的，而且必須有一個(gè)不是UIOutlet類的Window屬性聲明才可以。

如果你再去看AppDelegate的執(zhí)行文件，里面大概什么都沒有，甚至連 application:didFinishLaunchingWithOptions: 也只是返回了一個(gè) YES，而之前，這里則需聲明一個(gè)ViewController并且將他設(shè)置成起始頁面，但是現(xiàn)在這些都沒有了。

秘密就在info.plist文件中， 打開Ratings-Info.plist (在 Supporting Files group里) 你就會(huì)看到這些：

在NIB為UI的應(yīng)用里，info.plist文件中有一個(gè)鍵兼做NSMainNibFile，或者叫做Main nib file base name，他用來指示UIApplication載入MainWindow.xib，并且將他與應(yīng)用鏈接起來，而現(xiàn)在這個(gè)鍵值消失了。

而Storyboard應(yīng)用則利用 UIMainStoryboardFile，或者 “Main storyboard file base name” 鍵值來表示當(dāng)App初始化時(shí)的Storyboard名稱，當(dāng)程序運(yùn)行時(shí)，UIApplication會(huì)使用MainStoryboard.sotryboard作為第一加載項(xiàng)，并且將他的UIWindow展示在屏幕上，不需要任何編程工作。

在項(xiàng)目總結(jié)面板上，你也可以看到并且編輯這些信息：

如果你還想設(shè)置nib文件的話，另外有地方去設(shè)置的。

為了完成這個(gè)實(shí)驗(yàn)性的小程序，我們打開main.m，加入

Java代碼 ?

#import?<UIKit/UIKit.h> ??

??

#import?"AppDelegate.h"??

??

int?main(int?argc,?char?*argv[]) ??

{ ??

????@autoreleasepool?{ ??

????????return?UIApplicationMain(argc,?argv,?nil, ??

????????????NSStringFromClass([AppDelegate?class])); ??

????} ??

}??

#import <UIKit/UIKit.h>#import "AppDelegate.h"int main(int argc, char *argv[]) {@autoreleasepool {return UIApplicationMain(argc, argv, nil,NSStringFromClass([AppDelegate class]));} }

之前是UIApplicationMain()的函數(shù)現(xiàn)在是空的， 變成了 NSStringFromClass([AppDelegate class]).

與之前使用MainWindow.xib的一個(gè)最大的不同是：現(xiàn)在app delegate已經(jīng)不是Storyboard的一部分了，這是因?yàn)閍pp delegate不再從nib文件中，而侍從Storyboard中加載了，我們必須告訴 UIApplicationMain 我們的app delegate類的名字是什么，否則他將無法找到。





制作一個(gè)Tab類型的應(yīng)用

本教程中的Rating App擁有兩個(gè)Tab，在Storyboard中，很輕松就能夠做出一個(gè)Tab視圖。

回到MainStoryboard.storyboard中，直接從左邊的Library拖進(jìn)來一個(gè)TabViewController就可以了。

新的Tab Bar Controller附帶了兩個(gè)View controller，分別作為Tab的視圖使用，UITabBarController被稱為包含視圖，因?yàn)樗@其他一些View，其他常見的包含視圖還有那vi嘎提鷗鳥 Controller和SplitView Controller。

在iOS 5中，你還可以自己寫一個(gè)自定義的Controller，這在以前是做不到的。

包含關(guān)系在Storyboard中用一下這種箭頭表示。

拉一個(gè)Label控件到第一個(gè)子試圖中，命名為“First Tab”，再在第二個(gè)子視圖中添加一個(gè)Label，命名為“Second Tab”。

注意：當(dāng)屏幕的縮放大于100%時(shí)，你無法在單個(gè)場(chǎng)景中添加控件。

選中Tab Bar Controller，進(jìn)入屬性檢查器，選中“作為起始場(chǎng)景”，如下圖：

現(xiàn)在那個(gè)沒有頭的虛虛的小箭頭指向了Tab Bar Controller，說明他是起始場(chǎng)景。

這意味著，當(dāng)你啟動(dòng)這個(gè)應(yīng)用的時(shí)候，UIApplication將會(huì)將這個(gè)場(chǎng)景作為應(yīng)用的主屏幕。

Storyboard一定要有一個(gè)場(chǎng)景是起始場(chǎng)景才行。

現(xiàn)在運(yùn)行試試吧

code專門為創(chuàng)造這種Tab Bar的應(yīng)用準(zhǔn)備了一個(gè)模板，我們也可以使用他，但是自己有能力不用模板自己做一個(gè)Tab Bar也是不錯(cuò)的事。

如果你添加了多于五個(gè)子視圖到一個(gè)TabBarcontroller的話，并不會(huì)創(chuàng)造五個(gè)Tab，第四個(gè)tab會(huì)自動(dòng)變成More標(biāo)簽，不錯(cuò)吧




制作一個(gè)表格視圖

目前連接到Tab bar Controller的視圖都是普通的View Controller，現(xiàn)在，我要用一個(gè)TableViewController來代替其中的一個(gè)ViewController。

單擊第一個(gè)視圖并刪除，從Library中拖出一個(gè)TableViewController。

在選中這個(gè)TableViewController的前提下，從Library中拖出一個(gè)NavController，將會(huì)直接附著在上面。

當(dāng)然也可以調(diào)換順序，我完全沒意見。

由于NavController和TabBarController一樣也是一個(gè)包含控制器視圖，所以他也必須包含另一個(gè)視圖，你可以看到同樣的箭頭連接者這兩個(gè)View。

請(qǐng)注意所有嵌套在NavController下的View都會(huì)有一個(gè)Navigation Bar，你無法移除它，因?yàn)樗且粋€(gè)虛擬的Bar。

如果你檢視屬性檢測(cè)器，你就會(huì)發(fā)現(xiàn)所有bar的屬性都在一起：

“Inferred”是Storyboard中的默認(rèn)設(shè)置，他意味著繼承的關(guān)系，但是你也可以改變他。但是請(qǐng)注意這些設(shè)置都是為了讓你更好的進(jìn)行設(shè)計(jì)和這樣設(shè)置的，隨意修改默認(rèn)設(shè)置會(huì)帶來不可遇見的后果，施主自重。

現(xiàn)在讓我們把這個(gè)新的場(chǎng)景連接到Tab Bar Controller中，按住Ctrl拖動(dòng)，或者右鍵。

當(dāng)你放手的時(shí)候，一個(gè)提示框會(huì)出現(xiàn)。

當(dāng)然是選第一個(gè)了，Relationship – viewControllers ，這將自動(dòng)創(chuàng)建兩個(gè)場(chǎng)景之間的關(guān)系。


直接拖動(dòng)就可以改變Tab Item的順序，同時(shí)也會(huì)改變顯示Tab的順序，放在最左邊的Tab會(huì)第一個(gè)顯示。

現(xiàn)在運(yùn)行試試看吧

在我們?cè)谶@個(gè)應(yīng)用中加入任何實(shí)質(zhì)性的功能之前，我們先來清理一下Storyboard，你不需要改變TabBarController中的任何內(nèi)容而只需要改變他的子視圖就可以了。

每當(dāng)你連接一個(gè)新的視圖到TabBarController中的時(shí)候，他就會(huì)自動(dòng)增加一個(gè)Tab Item，你可以使用他的子視圖來修改該Item的圖片和名稱。

在NavController中選中Tab Item并且在屬性編輯其中將其修改為Player。

將第二個(gè)Tab Item命名為“Gesture”

我們接下來把自定義的圖片加入到這些item中， 源碼 中包含一個(gè)名為“Image”的文件夾，在那里你可以找到我們用到的資源。

接下來，將NavController的title改為Player，也可以使用代碼··

運(yùn)行看一看，難以置信吧，你到現(xiàn)在也沒寫一條代碼。






原型表格單元

你也許已經(jīng)注意到了，自從我們加入了Table View Controller之后，Xcode便會(huì)現(xiàn)實(shí)下面這樣一條警告。

這條警告是：“Unsupported Configuration: Prototype table cells must have reuse identifiers”意思是，原型表格單元必須有一個(gè)身份證（意譯啦）

原型單元格是另一個(gè)Storyboard的好特性之一。在之前，如果你想要自定義一個(gè)Table Cell，那么你就不得不用代碼來實(shí)現(xiàn)，要么就要單獨(dú)創(chuàng)建一個(gè)Nib文件來表示單元格內(nèi)容，現(xiàn)在你也可以這樣做，不過原型單元格可以幫你把這一過程大大的簡(jiǎn)化，你現(xiàn)在可以直接在Storyboard設(shè)計(jì)器中完成這一過程。

Table View現(xiàn)在默認(rèn)的會(huì)帶有一個(gè)空白的原型單元格，選中他，在屬性控制器中將他的Style改為subtitle，這樣的話，每一格就會(huì)有兩行字。


將附件設(shè)置為Disclosure Indicator并且將這個(gè)原型單元格的Reuse Identifier 設(shè)置喂“PlayerCell”，這將會(huì)解決Xcode所警告的問題。

試著運(yùn)行一個(gè)，發(fā)現(xiàn)什么都沒變，這并不奇怪，因?yàn)槲覀冞€沒有給這個(gè)表格設(shè)置一個(gè)數(shù)據(jù)來源（DataSource），用以顯示。

新建一個(gè)文件，使用UIViewContoller模板，命名為 PlayersViewController ，設(shè)置喂UITableViewController的子類，不要勾選建立XIB文件。

回到Storyboard編輯器，選擇Table View Controller，在身份控制器中，把他的類設(shè)置為PlayerViewController，這對(duì)于把Storyboard中的場(chǎng)景和你自定義的子類掛鉤是十分重要的。要是不這么做，你的子類根本沒用。

現(xiàn)在起，當(dāng)你運(yùn)行這個(gè)應(yīng)用時(shí)，table view controller其實(shí)是PlayersViewContoller的一個(gè)實(shí)例。

在 PlayersViewController.h 中聲明一個(gè)MutableArray（可變數(shù)組）

Java代碼 ?

#import?<UIKit/UIKit.h> ??

??

@interface?PlayersViewController?:?UITableViewController ??

??

@property?(nonatomic,?strong)?NSMutableArray?*players; ??

??

@end??

#import <UIKit/UIKit.h>@interface PlayersViewController : UITableViewController@property (nonatomic, strong) NSMutableArray *players;@end

這個(gè)數(shù)組將會(huì)包含我們的應(yīng)用的主要數(shù)據(jù)模型。我們現(xiàn)在加一些東西到這個(gè)數(shù)組之中，新建一個(gè)使用Obj-c模板的文件，命名為player，設(shè)置喂NSObject的子類，這將會(huì)作為數(shù)組的數(shù)據(jù)容器。

編寫Player.h如下：

Java代碼 ?

@interface?Player?:?NSObject ??

??

@property?(nonatomic,?copy)?NSString?*name; ??

@property?(nonatomic,?copy)?NSString?*game; ??

@property?(nonatomic,?assign)?int?rating; ??

??

@end??

@interface Player : NSObject@property (nonatomic, copy) NSString *name; @property (nonatomic, copy) NSString *game; @property (nonatomic, assign) int rating;@end

編寫Player.m如下：

Java代碼 ?

#import?"Player.h"??

??

@implementation?Player ??

??

@synthesize?name; ??

@synthesize?game; ??

@synthesize?rating; ??

??

@end??

#import "Player.h"@implementation Player@synthesize name; @synthesize game; @synthesize rating;@end

這里沒有什么復(fù)雜的，Player類只是一個(gè)容器罷了，包含三個(gè)內(nèi)容：選手的名字、項(xiàng)目和他的評(píng)級(jí)。

接下來我們?cè)贏pp Delegate中聲明數(shù)組和一些Player對(duì)象，并把他們分配給PlayerViewController的players屬性。

在AppDelegate.m中，分別引入（import）Player和PlayerViewController這兩個(gè)類，之后新增一個(gè)名叫players的可變數(shù)組。

Java代碼 ?

#import?"AppDelegate.h"??

#import?"Player.h"??

#import?"PlayersViewController.h"??

??

@implementation?AppDelegate?{ ??

????NSMutableArray?*players; ??

} ??

??

//?Rest?of?file...??

#import "AppDelegate.h" #import "Player.h" #import "PlayersViewController.h"@implementation AppDelegate {NSMutableArray *players; }// Rest of file...

修改didFinishLaunchingWithOptions方法如下：

Java代碼 ?

-?(BOOL)application:(UIApplication?*)application?didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions ??

{ ??

????players?=?[NSMutableArray?arrayWithCapacity:20]; ??

????Player?*player?=?[[Player?alloc]?init]; ??

????player.name?=?@"Bill?Evans"; ??

????player.game?=?@"Tic-Tac-Toe"; ??

????player.rating?=?4; ??

????[players?addObject:player]; ??

????player?=?[[Player?alloc]?init]; ??

????player.name?=?@"Oscar?Peterson"; ??

????player.game?=?@"Spin?the?Bottle"; ??

????player.rating?=?5; ??

????[players?addObject:player]; ??

????player?=?[[Player?alloc]?init]; ??

????player.name?=?@"Dave?Brubeck"; ??

????player.game?=?@"Texas?Hold’em?Poker"; ??

????player.rating?=?2; ??

????[players?addObject:player]; ??

????UITabBarController?*tabBarController?= ??

?????(UITabBarController?*)self.window.rootViewController; ??

????UINavigationController?*navigationController?= ??

?????[[tabBarController?viewControllers]?objectAtIndex:0]; ??

????PlayersViewController?*playersViewController?= ??

?????[[navigationController?viewControllers]?objectAtIndex:0]; ??

????playersViewController.players?=?players; ??

????return?YES; ??

}??

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {players = [NSMutableArray arrayWithCapacity:20];Player *player = [[Player alloc] init];player.name = @"Bill Evans";player.game = @"Tic-Tac-Toe";player.rating = 4;[players addObject:player];player = [[Player alloc] init];player.name = @"Oscar Peterson";player.game = @"Spin the Bottle";player.rating = 5;[players addObject:player];player = [[Player alloc] init];player.name = @"Dave Brubeck";player.game = @"Texas Hold’em Poker";player.rating = 2;[players addObject:player];UITabBarController *tabBarController =(UITabBarController *)self.window.rootViewController;UINavigationController *navigationController =[[tabBarController viewControllers] objectAtIndex:0];PlayersViewController *playersViewController =[[navigationController viewControllers] objectAtIndex:0];playersViewController.players = players;return YES; }

這將會(huì)創(chuàng)造一些Player對(duì)象并把他們加到數(shù)組中去。之后在加入：

Java代碼 ?

UITabBarController?*tabBarController?=?(UITabBarController?*) ??

??self.window.rootViewController; ??

UINavigationController?*navigationController?= ??

??[[tabBarController?viewControllers]?objectAtIndex:0]; ??

PlayersViewController?*playersViewController?= ??

??[[navigationController?viewControllers]?objectAtIndex:0]; ??

playersViewController.players?=?players;??

UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController; UINavigationController *navigationController =[[tabBarController viewControllers] objectAtIndex:0]; PlayersViewController *playersViewController =[[navigationController viewControllers] objectAtIndex:0]; playersViewController.players = players;

咦，這是什么？目前的情況是：我們希望能夠?qū)layers數(shù)組連接到PlayersViewController的players屬性之中以便讓這個(gè)VC能夠用做數(shù)據(jù)來源。但是app delegate根本不了解PlayerViewController究竟是什么，他將需要在storyboard中尋找它。

這是一個(gè)我不是很喜歡storyboard特性，在IB中，你在MainWindow.xib中總是會(huì)有一個(gè)指向App delegate的選項(xiàng)，在那里你可以在頂級(jí)的ViewController中向Appdelegate設(shè)置輸出口，但是在Storyboard中目前這還不可能，目前只能通過代碼來做這樣的事情。

Java代碼 ?

UITabBarController?*tabBarController?=?(UITabBarController?*) ??

??self.window.rootViewController;??

UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;

我們知道storyboard的起始場(chǎng)景是Tab Bar Controller，所以我們可以直接到這個(gè)場(chǎng)景的第一個(gè)子場(chǎng)景來設(shè)置數(shù)據(jù)源。

PlayersViewController 在一個(gè)NavController的框架之中，所以我們先看一看UINavigationController類：

Java代碼 ?

UINavigationController?*navigationController?=?[[tabBarController ??

??viewControllers]?objectAtIndex:0];??

UINavigationController *navigationController = [[tabBarControllerviewControllers] objectAtIndex:0];

然后詢問它的根試圖控制器，哪一個(gè)是我們要找的PlayersViewController：

Java代碼 ?

PlayersViewController?*playersViewController?= ??

??[[navigationController?viewControllers]?objectAtIndex:0];??

PlayersViewController *playersViewController =[[navigationController viewControllers] objectAtIndex:0];

但是，UIViewController根本就沒有一個(gè)rootViewController屬性，所以我們不能把數(shù)組加入進(jìn)去，他又一個(gè)topViewController但是指向最上層的視圖，與我們這里的意圖沒有關(guān)系。

現(xiàn)在我們有了一個(gè)裝在了players物體合集的數(shù)組，我們繼續(xù)為PlayersViewController設(shè)置數(shù)據(jù)源。

打開PlayersViewController.m，加入以下數(shù)據(jù)源方法：

Java代碼 ?

-?(NSInteger)numberOfSectionsInTableView:(UITableView?*)tableView ??

{ ??

????return?1; ??

} ??

??

-?(NSInteger)tableView:(UITableView?*)tableView ??

??numberOfRowsInSection:(NSInteger)section ??

{ ??

????return?[self.players?count]; ??

}??

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {return 1; }- (NSInteger)tableView:(UITableView *)tableViewnumberOfRowsInSection:(NSInteger)section {return [self.players count]; }

真正起作用的代碼在cellForRowAtIndexPath方法里，默認(rèn)的模板是如下這樣的：

Java代碼 ?

-?(UITableViewCell?*)tableView:(UITableView?*)tableView ??

??cellForRowAtIndexPath:(NSIndexPath?*)indexPath ??

{ ??

????static?NSString?*CellIdentifier?=?@"Cell"; ??

??

????UITableViewCell?*cell?=?[tableView ??

??????dequeueReusableCellWithIdentifier:CellIdentifier]; ??

????if?(cell?==?nil)?{ ??

????????cell?=?[[UITableViewCell?alloc] ??

??????????initWithStyle:UITableViewCellStyleDefault ??

??????????reuseIdentifier:CellIdentifier]; ??

????} ??

??

????//?Configure?the?cell... ??

????return?cell; ??

}??

- (UITableViewCell *)tableView:(UITableView *)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath {static NSString *CellIdentifier = @"Cell";UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:CellIdentifier];if (cell == nil) {cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:CellIdentifier];}// Configure the cell...return cell; }

無疑這就是以前設(shè)置一個(gè)表格視圖的方法，不過現(xiàn)在已經(jīng)革新了，把這些代碼修改如下：

Java代碼 ?

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

{ ??

????UITableViewCell?*cell?=?[tableView ??

??????dequeueReusableCellWithIdentifier:@"PlayerCell"]; ??

????Player?*player?=?[self.players?objectAtIndex:indexPath.row]; ??

????cell.textLabel.text?=?player.name; ??

????cell.detailTextLabel.text?=?player.game; ??

????return?cell; ??

}??

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:@"PlayerCell"];Player *player = [self.players objectAtIndex:indexPath.row];cell.textLabel.text = player.name;cell.detailTextLabel.text = player.game;return cell; }

這看上去簡(jiǎn)單多了，為了新建單元格，你只需使用如下代碼：

Java代碼 ?

UITableViewCell?*cell?=?[tableView ??

??dequeueReusableCellWithIdentifier:@"PlayerCell"];??

UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:@"PlayerCell"];

如果沒有現(xiàn)存的單元格可以回收，程序會(huì)自動(dòng)創(chuàng)造一個(gè)原型單元格的復(fù)制品之后返回給你，你只需要提供你之前在Storyboard編輯視圖中設(shè)置的身份證就可以的，在這里就是“PlayerCell”，如果不設(shè)置這個(gè)，這個(gè)程序就無法工作。

由于這個(gè)類對(duì)于Player容器目前一無所知，所以我們需要在文件的開頭加入一個(gè)引入來源

Java代碼 ?

#import?"Player.h"??

#import "Player.h"

記得要?jiǎng)?chuàng)建synthesize語句哦親

Java代碼 ?

@synthesize?players;??

@synthesize players;

現(xiàn)在運(yùn)行應(yīng)用，會(huì)看到Table里有著players容器。

請(qǐng)注意：我們這里只使用一種單元格原型，如果你需要使用不同類型的單元格的話，只需要在storyboard中另外加入一個(gè)單元格原型就可以了，不過不要忘記給他們指派不同的身份證。




設(shè)計(jì)自定義的原型單元格

對(duì)于很多應(yīng)用來說，使用默認(rèn)的單元格風(fēng)格就OK了，但是我偏偏要在每一個(gè)單元格的右邊加上一個(gè)一個(gè)圖片來表示選手的評(píng)級(jí)，但是添加圖片對(duì)于默認(rèn)類型的單元格來說并不支持，我們需要自定義一個(gè)設(shè)計(jì)。

讓我們轉(zhuǎn)回MainStoryboard.storyboard，選中table view中的prototype cell，把它的Style attribute改為Custom，所有默認(rèn)的標(biāo)簽都會(huì)消失。

首先把單元格變得更高一些，你可以直接拉它，也可以在大小控制器中修改數(shù)字，我在這里使用55點(diǎn)的高度。

從 Objects Library中拖出兩個(gè)標(biāo)簽物體，按照之前的樣式安插到單元格里，記得設(shè)置label的Highlighted顏色為白色，那樣的話當(dāng)單元格被選中的時(shí)候會(huì)看起來更好看一些。

之后添加一個(gè)Image View對(duì)象，將它放置在單元格的右邊，設(shè)置他的寬度為81點(diǎn)，高度并不重要，在屬性檢查器中設(shè)置模式為置中。

我把標(biāo)簽設(shè)置為210點(diǎn)長(zhǎng)以確保他不會(huì)和ImageView重合，最后整體的設(shè)計(jì)會(huì)看起來象下面這樣：

由于這是一個(gè)自定義的單元格，所以我們不能夠使用UITableView默認(rèn)的textLabel和detailLabel來設(shè)置數(shù)據(jù)，這些屬性也不再指向我們的單元格了，我們使用標(biāo)簽（tags）來指定標(biāo)簽。

將Name標(biāo)簽的tag設(shè)置為100，Game的設(shè)置喂101，image的設(shè)置喂102，在屬性檢查器里設(shè)置哦親。

之后打開 PlayersViewController.m ，在PlayersViewcontroller中將cellForRowatIndexPath修改為：

Java代碼 ?

-?(UITableViewCell?*)tableView:(UITableView?*)tableView ??

??cellForRowAtIndexPath:(NSIndexPath?*)indexPath ??

{ ??

????UITableViewCell?*cell?=?[tableView ??

??????dequeueReusableCellWithIdentifier:@"PlayerCell"]; ??

????Player?*player?=?[self.players?objectAtIndex:indexPath.row]; ??

????UILabel?*nameLabel?=?(UILabel?*)[cell?viewWithTag:100]; ??

????nameLabel.text?=?player.name; ??

????UILabel?*gameLabel?=?(UILabel?*)[cell?viewWithTag:101]; ??

????gameLabel.text?=?player.name; ??

????UIImageView?*?ratingImageView?=?(UIImageView?*) ??

??????[cell?viewWithTag:102]; ??

????ratingImageView.image?=?[self?imageForRating:player.rating]; ??

????return?cell; ??

}??

- (UITableViewCell *)tableView:(UITableView *)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath {UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:@"PlayerCell"];Player *player = [self.players objectAtIndex:indexPath.row];UILabel *nameLabel = (UILabel *)[cell viewWithTag:100];nameLabel.text = player.name;UILabel *gameLabel = (UILabel *)[cell viewWithTag:101];gameLabel.text = player.name;UIImageView * ratingImageView = (UIImageView *)[cell viewWithTag:102];ratingImageView.image = [self imageForRating:player.rating];return cell; }

這里是用了一個(gè)新的方法，叫做ImageRating，在 cellForRowAtIndexPath方法之前加入這個(gè)方法：

Java代碼 ?

-?(UIImage?*)imageForRating:(int)rating ??

{ ??

????switch?(rating) ??

????{ ??

????????case?1:?return?[UIImage?imageNamed:@"1StarSmall.png"]; ??

????????case?2:?return?[UIImage?imageNamed:@"2StarsSmall.png"]; ??

????????case?3:?return?[UIImage?imageNamed:@"3StarsSmall.png"]; ??

????????case?4:?return?[UIImage?imageNamed:@"4StarsSmall.png"]; ??

????????case?5:?return?[UIImage?imageNamed:@"5StarsSmall.png"]; ??

????} ??

????return?nil; ??

}??

- (UIImage *)imageForRating:(int)rating {switch (rating){case 1: return [UIImage imageNamed:@"1StarSmall.png"];case 2: return [UIImage imageNamed:@"2StarsSmall.png"];case 3: return [UIImage imageNamed:@"3StarsSmall.png"];case 4: return [UIImage imageNamed:@"4StarsSmall.png"];case 5: return [UIImage imageNamed:@"5StarsSmall.png"];}return nil; }

這就完成了，運(yùn)行看看：

這和我們想象的結(jié)果并不是很符合，我們修改了原型單元格的屬性和高度，但是table view卻沒有考慮進(jìn)去，有兩種方法可以修復(fù)它，我們可以改變table view的行高或者加入 heightForRowAtIndexPath 方法來修改，地一種方法更簡(jiǎn)單，我們就用他。

注意：在一下兩種情況下，你應(yīng)該使用 heightForRowAtIndexPath 方法：一是，你不能預(yù)先知道你的單元格的高度，二是不同的單元格會(huì)有不同的高度。

回到MainStoryboard.storyboard,在大小檢查器中將高度設(shè)置為55:

通過這種方式的話，如果之前你是使用拖動(dòng)而不是鍵入數(shù)值的方式改變高度的屬性的話，則table view的數(shù)值也會(huì)自動(dòng)改變。

現(xiàn)在運(yùn)行看看，好多了吧





為原型單元格設(shè)置子類

我們的表格視圖已經(jīng)相當(dāng)像模像樣了，但是我并不是很喜歡使用tag來訪問label，要是我們能夠把這些lable連接到輸出口，之后在回應(yīng)屬性中使用他們，該多好，而且不出所料，我們可以這樣做。

使用 Objective-C class模板新建一個(gè)文件，命名為PlayerCell，繼承UITableViewCell。

修改PlayerCell.h

Java代碼 ?

@interface?PlayerCell?:?UITableViewCell ??

??

@property?(nonatomic,?strong)?IBOutlet?UILabel?*nameLabel; ??

@property?(nonatomic,?strong)?IBOutlet?UILabel?*gameLabel; ??

@property?(nonatomic,?strong)?IBOutlet?UIImageView ??

??*ratingImageView; ??

??

@end??

@interface PlayerCell : UITableViewCell@property (nonatomic, strong) IBOutlet UILabel *nameLabel; @property (nonatomic, strong) IBOutlet UILabel *gameLabel; @property (nonatomic, strong) IBOutlet UIImageView*ratingImageView;@end

修改PlayerCell.m

Java代碼 ?

#import?"PlayerCell.h"??

??

@implementation?PlayerCell ??

??

@synthesize?nameLabel; ??

@synthesize?gameLabel; ??

@synthesize?ratingImageView; ??

??

@end??

#import "PlayerCell.h"@implementation PlayerCell@synthesize nameLabel; @synthesize gameLabel; @synthesize ratingImageView;@end

這個(gè)類本身并不其很大的作用，只是為nameLabel、gameLabel和ratingImageView聲明了屬性。

回到MainStoryboard.storyboard選中原型單元格，將他的class屬性修改為“PlayerCell”，現(xiàn)在當(dāng)你向table view請(qǐng)求dequeueReusableCellWithIdentifier，他會(huì)返回一個(gè)PlayerCell實(shí)例而不是一個(gè)普通的UITableViewCell實(shí)例。

請(qǐng)注意我將這個(gè)類和reuse Indetifier的名字命名的一樣，只是營(yíng)衛(wèi)我喜歡這樣哦親，這兩個(gè)之間其實(shí)沒啥關(guān)系。

現(xiàn)在你可以將標(biāo)簽和image view連接到輸出口去了，選中或者將他從鏈接檢查器拖動(dòng)到table view cell。

請(qǐng)注意：要把這個(gè)control連接到table view cell而不是view controller哦親，別選錯(cuò)了。

現(xiàn)在我們把一切都鏈接好了，只需要加入數(shù)據(jù)源的代碼就可以了。

Java代碼 ?

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

{ ??

????PlayerCell?*cell?=?(PlayerCell?*)[tableView ??

?????dequeueReusableCellWithIdentifier:@"PlayerCell"]; ??

????Player?*player?=?[self.players?objectAtIndex:indexPath.row]; ??

????cell.nameLabel.text?=?player.name; ??

????cell.gameLabel.text?=?player.game; ??

????cell.ratingImageView.image?=?[self ??

??????imageForRating:player.rating]; ??

????return?cell; ??

}??

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {PlayerCell *cell = (PlayerCell *)[tableViewdequeueReusableCellWithIdentifier:@"PlayerCell"];Player *player = [self.players objectAtIndex:indexPath.row];cell.nameLabel.text = player.name;cell.gameLabel.text = player.game;cell.ratingImageView.image = [selfimageForRating:player.rating];return cell; }

我們現(xiàn)在將接收到 dequeueReusableCellWithIdentifier 的控件指派到PlayerCell，只需要簡(jiǎn)單的使用已經(jīng)鏈接labels和image view到設(shè)置好的屬性上就可以了，這會(huì)讓這個(gè)設(shè)計(jì)看上去更加好控制，更加簡(jiǎn)明。

當(dāng)然，在PlayerCell前要引入資源：

Java代碼 ?

#import?"PlayerCell.h"??

#import "PlayerCell.h"

試著運(yùn)行，你會(huì)發(fā)現(xiàn)其實(shí)什么都沒有變化，可是我們都知道，內(nèi)部已經(jīng)有了變化。

在這相同的場(chǎng)景下面，我們可是在使用子類呢。

這里還有一些設(shè)計(jì)小竅門：第一點(diǎn)：一定要設(shè)置標(biāo)簽被選中時(shí)的顏色。

第二點(diǎn)，確保你加入單元格的字符大小是可以變化的，這樣，當(dāng)單元格大小變化時(shí)，他的內(nèi)容的大小也會(huì)跟著變化，比如說：

在PlayersViewController.m中加入如下方法：

Java代碼 ?

-?(void)tableView:(UITableView?*)tableView?commitEditingStyle:(UITableViewCellEditingStyle)editingStyle?forRowAtIndexPath:(NSIndexPath?*)indexPath ??

{ ??

????if?(editingStyle?==?UITableViewCellEditingStyleDelete) ??

????{ ??

????????[self.players?removeObjectAtIndex:indexPath.row]; ??

????????[tableView?deleteRowsAtIndexPaths:[NSArray?arrayWithObject:indexPath]?withRowAnimation:UITableViewRowAnimationFade]; ??

????} ??

}??

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {if (editingStyle == UITableViewCellEditingStyleDelete){[self.players removeObjectAtIndex:indexPath.row];[tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];} }

這個(gè)方法加入好了之后，用手指輕掃一行單元格，會(huì)出現(xiàn)一個(gè)刪除鍵，試試看

Delete按鈕出現(xiàn)在右邊，遮住了一部分評(píng)級(jí)圖片，怎么解決呢？

打開MainStoryBoard.storyboard，選中table view cell中的image view，在大小檢查器中修改Autosizing屬性，是它能夠跟隨上級(jí)view的邊緣。

為labels設(shè)置同樣的屬性。

加入了這些變動(dòng)之后，刪除按鈕如我們意料的出現(xiàn)了：

其實(shí)，最好的做法是讓這些星星在出現(xiàn)delete按鈕的時(shí)候消失，不過這只是一個(gè)練習(xí)，不要太較真哦親

文章來源：http://www.iteye.com/topic/1122979

轉(zhuǎn)載于:https://www.cnblogs.com/GeekHacker/archive/2012/07/08/2581808.html

總結(jié)

以上是生活随笔為你收集整理的【ios】Storyboard教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。