日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利

【一步一步學(xué)IOS5 】 創(chuàng)建一個(gè)簡(jiǎn)單的表視圖(Tab

系統(tǒng) 2895 0

首先,在iPhone App中的表視圖是什么?

?

表視圖(Table View) 是IOS Apps 中一個(gè)通用的UI元素。很多應(yīng)用程序在一定程度上,都有使用表視圖來(lái)顯示數(shù)據(jù)列表。最好的例子是內(nèi)置的iPhone應(yīng)用程序。你的聯(lián)系人顯示在表視圖中。另外一個(gè)例子是Mail應(yīng)用程序,它使用表視圖顯示你的郵箱和郵件。不僅可以用來(lái)顯示文本數(shù)據(jù),表視圖也可以呈現(xiàn)圖像數(shù)據(jù)。內(nèi)置的Video和YouT ube應(yīng)用程序是這一用法的例子

?

1.創(chuàng)建simpleTable 項(xiàng)目

?

啟動(dòng)Xcode, 創(chuàng)建一個(gè)Single View application 的新項(xiàng)目

?

輸入Xcode項(xiàng)目所有必須的選項(xiàng):

Product Name: SimpleTable

?

Company Identifier: com.appcode

?

Class Prefix: SimpleTable

?

Device Family: iPhone

?

Use Storyboards:[不選擇]

?

Use Automatic Reference Counting:[選擇]

?

Include Unit Test:[不選擇]

?

?

2.設(shè)計(jì)視圖

?

首先,我們將創(chuàng)建用戶界面,并添加表視圖。選擇SimpleTableViewController.xib文件,切換到Interface Builder界面。

?

在對(duì)象庫(kù)(Object Library)中,選擇Table View對(duì)象,并拖拽到視圖中。

?

?

3.第一次運(yùn)行你的應(yīng)用程序

在繼續(xù)之前,嘗試使用模擬器運(yùn)行你的應(yīng)用程序。點(diǎn)擊Run按鍵構(gòu)建你的App并進(jìn)行測(cè)試。

?

模擬器屏幕如下圖所示:


【一步一步學(xué)IOS5 】 創(chuàng)建一個(gè)簡(jiǎn)單的表視圖(Table View)應(yīng)用程序

?

?

我們已經(jīng)設(shè)計(jì)好了表視圖,但是,現(xiàn)在它沒(méi)有包含任何數(shù)據(jù)。接著,我們將編寫(xiě)代碼,添加表數(shù)據(jù)。

?

4.添加表數(shù)據(jù)

?

返回項(xiàng)目導(dǎo)航欄,選擇SimpleTableViewController.h 文件。 在UIViewController 之后,添加<UITableViewDelegate,UITableViewDataSource>。完成后代碼如下所示:

?

?

#import <UIKit/UIKit.h>

?

@interface SimpleTableViewController : UIViewController < UITableViewDelegate , UITableViewDataSource >

?

@end

?

?

在Object-C中,UITableViewDelegate和UITableViewDataSource稱為協(xié)議。基本上,為了在表視圖中顯示數(shù)據(jù),我們必須遵守定義在協(xié)議中的要求,并實(shí)現(xiàn)所有要求的方法。

?

UITableViewDelegate 和 UITableViewDataSource

?

UITableView 是表視圖幕后的實(shí)際類,用來(lái)靈活處理不同的數(shù)據(jù)類型。你可以顯示國(guó)家列表或者聯(lián)系人姓名。或者像本示例一樣,我們將使用表視圖程序菜譜列表。因此,你可以告訴UITableView需求顯示的數(shù)據(jù)列表呢?

?

UITableViewDataSource 是答案,它用來(lái)連接你的數(shù)據(jù)和表視圖。

?

UITableViewDataSource 協(xié)議定義了2個(gè)要求實(shí)現(xiàn)的的方法

?

(tableView:cellForRowAtIndexPath 和 tableView:numberOfRowsInSection)。通過(guò)實(shí)現(xiàn)這些方法,你告訴表視圖顯示多少行數(shù)據(jù)和每一行數(shù)據(jù)。

?

UITableViewDelegate 負(fù)責(zé)處理UITableView的表現(xiàn)。協(xié)議中可選方法讓你管理表行的高度,配置節(jié)點(diǎn)頭部和底部,對(duì)表單元重新排序等等。

?

接著,選擇SimpleTableViewController.m 文件,定義一個(gè)實(shí)例變量,存放數(shù)據(jù)。

?

@implementation SimpleTableViewController

{

NSArray * tableData;

}

?

在viewDidLoad方法中(Called after the controller's view is loaded into memory - 在控制器的視圖裝載到內(nèi)存中完成之后,調(diào)用該方法),添加如下代碼實(shí)例化 tableData 數(shù)組。我們初始化數(shù)組位菜譜離列表:

?

- ( void )viewDidLoad

{

? ? [ super viewDidLoad ];

? ? //Initialize table data

? ? tableData = [ NSArray arrayWithObjects : @"Egg Benedict" , @"Mushroom Risotto" , @"Full Breakfast" , @"Hamburger" , @"Ham and Egg sandwith" , @"Creme Brelee" , @"White Chcolate Dount" , @"Starbucks Coffee" , @"Vegetable Curry" , @"Instant Noodle with Egg" , @"Noodle with BBQ Pork" , @"Japanese Noodle with Pork" , @"Green Tea" , @"Thai Shrimp Cake" , @"Angry Birds Cake" , @"Ham and Cheese Panini" , nil ];

}

?

在Object-C中,NSArray 是創(chuàng)建和管理數(shù)組的類,你可以使用NSArray創(chuàng)建靜態(tài)數(shù)組,其容量是固定的。如果你需要?jiǎng)?chuàng)建動(dòng)態(tài)數(shù)組,則使用NSMutableArray代替。

?

NSArray提供了一組工廠方式來(lái)創(chuàng)建數(shù)組對(duì)象。在我們的代碼中,我們使用arrayWithObjects來(lái)實(shí)例化一個(gè)NSArray對(duì)象,并預(yù)先填充特定的元素(如Hamburger)。

?

最后,我們需要添加2個(gè)數(shù)據(jù)源方法:tableView:numberOfRowInSection 和 tableView:cellForRowAtIndexPath。這兩個(gè)方法是UITableViewDataSource協(xié)議的一部分。在配置UITableView時(shí),需要強(qiáng)制實(shí)現(xiàn)這兩個(gè)方法。

?

第一個(gè)方法用來(lái)通知表視圖選擇了多少條數(shù)據(jù)行,因此添加如下代碼。count方法簡(jiǎn)單返回tableData數(shù)組中元素個(gè)數(shù)。

?

- ( NSInteger )tableView:( UITableView *)tableView numberOfRowsInSection:( NSInteger )section

{

? ? return [ tableData count ];

}

?

接著,我們實(shí)現(xiàn)另外一個(gè)需要實(shí)現(xiàn)的方法:

?

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

{

? ? static NSString *simpleTableIdentifier = @"simpleTableItem" ;

? ? UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier :simpleTableIdentifier];

?

? ? if (cell == nil ) {

? ? ? ? cell = [[ UITableViewCell alloc ] initWithStyle : UITableViewCellStyleDefault reuseIdentifier :simpleTableIdentifier];

? ? }

?

cell. textLabel . text = [ tableData objectAtIndex :indexPath. row ];

return cell;

}


每一次數(shù)據(jù)顯示的時(shí)候,都會(huì)調(diào)用cellForeRowAtIndexPath方法。下圖讓你更好的理解UITableview和UITableDataSource是如何工作的。


【一步一步學(xué)IOS5 】 創(chuàng)建一個(gè)簡(jiǎn)單的表視圖(Table View)應(yīng)用程序
?

請(qǐng)求數(shù)據(jù)源,在表視圖的特定位置插入一個(gè)單元格。表視圖中可見(jiàn)的每一行都會(huì)觸發(fā)該事件。事件包含的參數(shù)之一是NSIndexPath類型。NSIndexPath類表示數(shù)組集合中的某個(gè)特定項(xiàng)的路徑。要知道當(dāng)前填充的是哪一行,只需要調(diào)用NSIndexPath對(duì)象(indexPath)的row屬性,然后使用行號(hào)來(lái)引用tableData數(shù)組中元素即可。得到的值被用來(lái)設(shè)置表視圖中該行的文本值。

需要注意的的是,這里使用UITableView類的dequeueReusableCellWithIdentifer:方法獲取UITableViewCell類的一個(gè)實(shí)例。

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

dequeueReusableCellWithIdentifier:方法返回是一個(gè)可重用的表視圖單元格對(duì)象。因?yàn)槿绻矸浅4螅瑸槊恳恍卸紕?chuàng)建一個(gè)單獨(dú)的UITableViewCell對(duì)象會(huì)產(chǎn)生嚴(yán)重的性能問(wèn)題,并占用大量的內(nèi)存。

此外,由于表視圖在某一時(shí)刻只會(huì)顯示固定數(shù)量的行,因此重用已經(jīng)滾動(dòng)到屏幕外面的那些單元格將非常有意義。這正是dequeueReusableCellWithIdentifier:方法將要完成的事情。比如,如果表視圖顯示了10行,那么只會(huì)創(chuàng)建10個(gè)UITableViewCell對(duì)象 --- 當(dāng)用戶滾動(dòng)表視圖時(shí),總是會(huì)重用這10個(gè)UITableViewCell 對(duì)象。

5.連接數(shù)據(jù)源(DataSource) 和 委托(Delegate)

像第一個(gè)Hello World 應(yīng)用程序一樣,我們需要在表視圖和創(chuàng)建的2個(gè)方法之間建立連接。

返回SimpleTableViewController.xib,點(diǎn)擊并按住Control鍵,選擇表視圖,并拖拉到File's Owner圖上,釋放按鈕,彈出dataSource 和 delegate窗口。選擇dataSource,在表視圖和它的數(shù)據(jù)源之間建立連接。重復(fù)上述操作,在委托(delegate)上也建立連接。

就這些了,為了確保正確建立了連接,你可以再次選擇表視圖。在工具區(qū)域(Utility Area)的上部,點(diǎn)擊Connecion Inspector顯示所有現(xiàn)存的連接。

6.測(cè)試你的應(yīng)用程序

最后,點(diǎn)擊Run按鈕,讓模擬器裝載你的App

7.在表視圖中添加縮略圖

右擊SimpleTable 文件夾,選擇Add Files to SimpleTable...

選擇一個(gè)圖像文件,同時(shí)選中Copy Item to destination group's folder 復(fù)選框。點(diǎn)擊OK按鈕添加該文件。

現(xiàn)在編輯SimpleTableViewController.m 文件,添加如下代碼行到tableView:cellForRowAtIndexPath方法中:

cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];

添加的代碼行裝在圖像文件,并保存在表單元格的圖像區(qū)域。現(xiàn)在,再次點(diǎn)擊Run按鈕,你的應(yīng)用程序應(yīng)該在每一行顯示圖像了:


【一步一步學(xué)IOS5 】 創(chuàng)建一個(gè)簡(jiǎn)單的表視圖(Table View)應(yīng)用程序
?


【一步一步學(xué)IOS5 】 創(chuàng)建一個(gè)簡(jiǎn)單的表視圖(Table View)應(yīng)用程序


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系: 360901061

您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】

您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長(zhǎng)會(huì)非常 感謝您的哦!!!

發(fā)表我的評(píng)論
最新評(píng)論 總共0條評(píng)論
主站蜘蛛池模板: 罗平县| 大丰市| 凤山县| 石门县| 汝城县| 韩城市| 高州市| 丰原市| 苗栗市| 基隆市| 桃源县| 镇康县| 苏尼特右旗| 宿迁市| 浦东新区| 江陵县| 宜城市| 吐鲁番市| 康保县| 察雅县| 无为县| 花莲县| 锦州市| 喜德县| 郁南县| 兴化市| 温州市| 红河县| 普兰县| 永吉县| 金坛市| 额尔古纳市| 巴楚县| 达尔| 宜兰市| 格尔木市| 义乌市| 兴化市| 吉林市| 贵德县| 天水市|