轉(zhuǎn)自：https://www.iteye.com/blog/iaiai-1493956?（這真是我見(jiàn)過(guò)最詳細(xì)的博客了，感覺(jué)內(nèi)容量相當(dāng)于書(shū)中一章的量，做好準(zhǔn)備接受知識(shí)的洗禮吧）

（Storyboard）是一個(gè)能夠節(jié)省你很多設(shè)計(jì)手機(jī)App界面時(shí)間的新特性，下面，為了簡(jiǎn)明的說(shuō)明Storyboard的效果，我貼上本教程所完成的Storyboard的截圖：?
?
現(xiàn)在，你就可以清楚的看到這個(gè)應(yīng)用究竟是干些什么的，也可以清楚的看到其中的各種關(guān)系，這就是Storyboard的強(qiáng)大之處了。如果你要制作一個(gè)頁(yè)面很多很復(fù)雜的App，Storyboard可以幫助你解決寫(xiě)很多重復(fù)的跳轉(zhuǎn)方法的麻煩，節(jié)省很多時(shí)間，以便你能夠完全的專注于核心功能的實(shí)現(xiàn)上。?
?

目錄

開(kāi)始

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

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

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

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

---

開(kāi)始

首先啟動(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)目沒(méi)有xib文件，讓我們首先看看Storyboard是什么樣的，雙擊Storyboard打開(kāi)他：?
?
Storyboard的樣子和工作方式都和Interface Builder（以下簡(jiǎn)稱為IB）像極了，你可以從左下方的控件庫(kù)中拖動(dòng)控件到你的View之中并且組織他們的排放順序，唯一不同的地方就是，Storyboard不止是包含一個(gè)視圖控件，而是所有的視圖控件以及他們之間的關(guān)系。?


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

通過(guò)嘗試添加一些控件，你可以感受一下Storyboard的工作方式。?
?
這個(gè)是數(shù)據(jù)顯示器，顯示所有場(chǎng)景及其控件的結(jié)構(gòu)。?
?
在IB中，這個(gè)位置顯示的是你的NIB文件中的文件，而在Storyboard中這里顯示的是ViewController，目前這里只有一個(gè)ViewController，我們接下來(lái)可能會(huì)增加一些。?

這是一個(gè)文檔管理器的縮小版，叫做dock。?
?
Dock展示場(chǎng)景中第一級(jí)的控件，每個(gè)場(chǎng)景至少有一個(gè)ViewController和一個(gè)FirstReponder，但是也可以有其他的控件，Dock還用來(lái)簡(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ì)的界面一樣。?
?
如果你以前制作過(guò)NIB型的應(yīng)用的話，你也許回去尋找MainWindow.xib ，這個(gè)文件包括所有的ViewController，Appdelegate等等，但是在Storyboard中這個(gè)特性已經(jīng)被廢止了。?
?
那么，沒(méi)有這個(gè)文件，應(yīng)用從那里起始呢？?

讓我們打開(kāi)AppDelegate文件，看看那上面是怎么說(shuō)的：?

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

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

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

秘密就在info.plist文件中， 打開(kāi)Ratings-Info.plist (在 Supporting Files group里) 你就會(huì)看到這些：?
?
在NIB為UI的應(yīng)用里，info.plist文件中有一個(gè)鍵兼做NSMainNibFile，或者叫做Main nib file base name，他用來(lái)指示UIApplication載入MainWindow.xib，并且將他與應(yīng)用鏈接起來(lái)，而現(xiàn)在這個(gè)鍵值消失了。?

而Storyboard應(yīng)用則利用 UIMainStoryboardFile，或者 “Main storyboard file base name” 鍵值來(lái)表示當(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)性的小程序，我們打開(kāi)main.m，加入?

#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不再?gòu)膎ib文件中，而侍從Storyboard中加載了，我們必須告訴 UIApplicationMain 我們的app delegate類的名字是什么，否則他將無(wú)法找到。?

?

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

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

回到MainStoryboard.storyboard中，直接從左邊的Library拖進(jìn)來(lái)一個(gè)TabViewController就可以了。?
?
新的Tab Bar Controller附帶了兩個(gè)View controller，分別作為Tab的視圖使用，UITabBarController被稱為包含視圖，因?yàn)樗@其他一些View，其他常見(jiàn)的包含視圖還有那vi嘎提鷗鳥(niǎo) Controller和SplitView Controller。?

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

包含關(guān)系在Storyboard中用一下這種箭頭表示。?
?
拉一個(gè)Label控件到第一個(gè)子試圖中，命名為“First Tab”，再在第二個(gè)子視圖中添加一個(gè)Label，命名為“Second Tab”。?

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

選中Tab Bar Controller，進(jìn)入屬性檢查器，選中“作為起始場(chǎng)景”，如下圖：?
?
現(xiàn)在那個(gè)沒(méi)有頭的虛虛的小箭頭指向了Tab Bar Controller，說(shuō)明他是起始場(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來(lái)代替其中的一個(gè)ViewController。?

單擊第一個(gè)視圖并刪除，從Library中拖出一個(gè)TableViewController。?
?
在選中這個(gè)TableViewController的前提下，從Library中拖出一個(gè)NavController，將會(huì)直接附著在上面。?
?
當(dāng)然也可以調(diào)換順序，我完全沒(méi)意見(jiàn)。?

由于NavController和TabBarController一樣也是一個(gè)包含控制器視圖，所以他也必須包含另一個(gè)視圖，你可以看到同樣的箭頭連接者這兩個(gè)View。?
?
請(qǐng)注意所有嵌套在NavController下的View都會(huì)有一個(gè)Navigation Bar，你無(wú)法移除它，因?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ì)帶來(lái)不可遇見(jiàn)的后果，施主自重。?

現(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ì)性的功能之前，我們先來(lái)清理一下Storyboard，你不需要改變TabBarController中的任何內(nèi)容而只需要改變他的子視圖就可以了。?

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

在NavController中選中Tab Item并且在屬性編輯其中將其修改為Player。?
?
將第二個(gè)Tab Item命名為“Gesture”?

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

接下來(lái)，將NavController的title改為Player，也可以使用代碼··?
?
運(yùn)行看一看，難以置信吧，你到現(xiàn)在也沒(méi)寫(xiě)一條代碼。?
?

原型表格單元?

你也許已經(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，那么你就不得不用代碼來(lái)實(shí)現(xiàn)，要么就要單獨(dú)創(chuàng)建一個(gè)Nib文件來(lái)表示單元格內(nèi)容，現(xiàn)在你也可以這樣做，不過(guò)原型單元格可以幫你把這一過(guò)程大大的簡(jiǎn)化，你現(xiàn)在可以直接在Storyboard設(shè)計(jì)器中完成這一過(guò)程。?

Table View現(xiàn)在默認(rèn)的會(huì)帶有一個(gè)空白的原型單元格，選中他，在屬性控制器中將他的Style改為subtitle，這樣的話，每一格就會(huì)有兩行字。?
?
?
將附件設(shè)置為Disclosure Indicator并且將這個(gè)原型單元格的Reuse Identifier 設(shè)置喂“PlayerCell”，這將會(huì)解決Xcode所警告的問(wèn)題。?

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

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

回到Storyboard編輯器，選擇Table View Controller，在身份控制器中，把他的類設(shè)置為PlayerViewController，這對(duì)于把Storyboard中的場(chǎng)景和你自定義的子類掛鉤是十分重要的。要是不這么做，你的子類根本沒(méi)用。?
?
現(xiàn)在起，當(dāng)你運(yùn)行這個(gè)應(yīng)用時(shí)，table view controller其實(shí)是PlayersViewContoller的一個(gè)實(shí)例。?

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

? #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ù)容器。?

編寫(xiě)Player.h如下：?

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

編寫(xiě)Player.m如下：?

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

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

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

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

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

修改didFinishLaunchingWithOptions方法如下：?

-?(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ù)組中去。之后在加入：?

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ù)來(lái)源。但是app delegate根本不了解PlayerViewController究竟是什么，他將需要在storyboard中尋找它。?

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

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

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

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

UINavigationController?*navigationController?=?[[tabBarController??viewControllers]?objectAtIndex:0];??

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

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

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

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

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

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

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

-?(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;?? }??

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

-?(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;?? }??

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

UITableViewCell?*cell?=?[tableView??dequeueReusableCellWithIdentifier:@"PlayerCell"];??

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

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

#import?"Player.h"??

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

@synthesize?players;??

現(xiàn)在運(yùn)行應(yīng)用，會(huì)看到Table里有著players容器。?
?
請(qǐng)注意：我們這里只使用一種單元格原型，如果你需要使用不同類型的單元格的話，只需要在storyboard中另外加入一個(gè)單元格原型就可以了，不過(guò)不要忘記給他們指派不同的身份證。?

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

對(duì)于很多應(yīng)用來(lái)說(shuō)，使用默認(rèn)的單元格風(fēng)格就OK了，但是我偏偏要在每一個(gè)單元格的右邊加上一個(gè)一個(gè)圖片來(lái)表示選手的評(píng)級(jí)，但是添加圖片對(duì)于默認(rèn)類型的單元格來(lái)說(shuō)并不支持，我們需要自定義一個(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ì)看起來(lái)更好看一些。?

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

我把標(biāo)簽設(shè)置為210點(diǎn)長(zhǎng)以確保他不會(huì)和ImageView重合，最后整體的設(shè)計(jì)會(huì)看起來(lái)象下面這樣：?
?
由于這是一個(gè)自定義的單元格，所以我們不能夠使用UITableView默認(rèn)的textLabel和detailLabel來(lái)設(shè)置數(shù)據(jù)，這些屬性也不再指向我們的單元格了，我們使用標(biāo)簽（tags）來(lái)指定標(biāo)簽。?

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

之后打開(kāi) PlayersViewController.m ，在PlayersViewcontroller中將cellForRowatIndexPath修改為：?

-?(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;?? }??

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

-?(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卻沒(méi)有考慮進(jìn)去，有兩種方法可以修復(fù)它，我們可以改變table view的行高或者加入 heightForRowAtIndexPath 方法來(lái)修改，地一種方法更簡(jiǎn)單，我們就用他。?

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

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

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

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

?

?

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

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

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

修改PlayerCell.h?

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

修改PlayerCell.m?

#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í)沒(méi)啥關(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ù)源的代碼就可以了。?

-?(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;?? }??

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

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

#import?"PlayerCell.h"??

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

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

這里還有一些設(shè)計(jì)小竅門：第一點(diǎn)：一定要設(shè)置標(biāo)簽被選中時(shí)的顏色。?
?
第二點(diǎn)，確保你加入單元格的字符大小是可以變化的，這樣，當(dāng)單元格大小變化時(shí)，他的內(nèi)容的大小也會(huì)跟著變化，比如說(shuō)：?

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

?-?(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í)圖片，怎么解決呢？?

打開(kāi)MainStoryBoard.storyboard，選中table view cell中的image view，在大小檢查器中修改Autosizing屬性，是它能夠跟隨上級(jí)view的邊緣。?
?
為labels設(shè)置同樣的屬性。?
?
加入了這些變動(dòng)之后，刪除按鈕如我們意料的出現(xiàn)了：?
?
其實(shí)，最好的做法是讓這些星星在出現(xiàn)delete按鈕的時(shí)候消失，不過(guò)這只是一個(gè)練習(xí)，不要太較真哦親

?

?

總結(jié)

以上是生活随笔為你收集整理的超详细的Storyboard的解析——Objective-C(IOS)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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