ios開(kāi)發(fā)入門(mén)- tableview 簡(jiǎn)單使用(一)

本章目標(biāo)：  了解ios tableView （tableView 和android 中的 listView是一個(gè)性質(zhì)的 ） 的結(jié)構(gòu)，樣式，和簡(jiǎn)單使用

在手機(jī)應(yīng)用程序中我們常?？吹?集合列表內(nèi)容， 它們是怎么實(shí)現(xiàn)的呢，這一章我們 來(lái)分解分解。

在iphone 中， tableView 主要分為兩個(gè)樣式 ，如下

•  Plain：這是普通的列表風(fēng)格
•  Grouped ：這是分塊風(fēng)格。

兩種樣式 如圖 ：

 這一章我們先做一個(gè)簡(jiǎn)單列表

下面我們開(kāi)始 做一個(gè)基本的列表風(fēng)格 demo

1： 創(chuàng)建一個(gè) Single View Application 模板的ios 應(yīng)用程序 項(xiàng)目信息部分如下圖：

點(diǎn)擊 next 選擇保存位置，創(chuàng)建好后

如果你的命名和上圖中的命名是一致的話。application會(huì)包含一個(gè) TableViewVieiwController.xib 文件， 打開(kāi)此 xib 文件。  為我們的視圖文件添加一個(gè)UiTableView組件。 如下圖

添加UitableView 我們還需要給 Uitableview添加委托喝數(shù)據(jù)源呢， 按住Ctrl鍵 點(diǎn)擊 上圖中的 Objects-》View -》TableView 會(huì)彈出一個(gè)小框框，我們需要把 TableView組件下面的Outlets 下的 dataSource（數(shù)據(jù)源）和 delegate（委托） 于我們的控制器建立連接 ， 按住ctrl 把dataSource（數(shù)據(jù)源）和 delegate（委托） 后面的 小圓圈，拖到File‘s  Owner 上面去 ，建立完成后 如下圖

 接下來(lái) 我們來(lái)編寫(xiě)我們的 控制器

打開(kāi) TableViewViewController.h  為我們的UiTableView組件添加協(xié)議，表示這表視圖的委托喝數(shù)據(jù)源 。和一個(gè)NsArray數(shù)據(jù)集合用于存放表視圖要顯示的數(shù)據(jù)。

代碼如下 ：

#import <UIKit/UIKit.h>

@interface TableViewViewController : UIViewController<UITabBarDelegate,UITableViewDataSource>

@property(nonatomic,retain) NSArray *listData;
@end

其中藍(lán)色部分是我們添加的代碼。

保存文件，把代碼切換到TableViewViewController.m 類(lèi)中。

1： 在開(kāi)頭部分的@implementation TableViewViewController 下面添加

@synthesize listData;    此方法會(huì)為我們自動(dòng)生成 get set 方法 。

2： 在 - (void)viewDidLoad 方法中，初始化listData集合，代碼如下：

- (void)viewDidUnload
{
    [super viewDidUnload];
    NSArray *array=[[NSArray alloc]initWithObjects:@"廣州",@"深圳",@"梅州",@"東莞",@"潮汕",@"肇慶",@"四會(huì)",@"佛山",@"湛江",@"江門(mén)",@"陽(yáng)江",@"珠海", nil];
    self.listData=array;
    [array release];
}

上面代碼中 我們需要自己銷(xiāo)毀 array 因?yàn)槲覀儧](méi)有使用 自動(dòng)內(nèi)存管理計(jì)數(shù)器。

3：因?yàn)槲覀儧](méi)有使用自動(dòng)內(nèi)存管理計(jì)數(shù)器，所以我們還需要 銷(xiāo)毀 listData 集合。所以還需要 下面代碼

- (void)dealloc
{
    self.listData=nil;
    [super dealloc];
}
- (void)viewDidLoad
{
    [self.listData release];
    [super viewDidLoad];
 
}

其中 dealloc  方法 需要我們自己寫(xiě)出來(lái)，xcode 并沒(méi)有為我們生成出來(lái)。

4： 視圖控制器最核心的方法 ，就是這里面， 就是為表視圖實(shí)現(xiàn)委托和數(shù)據(jù)源了。 先看代碼 。

#pragma mark-
#pragma mark Table View Data Source Methods
//返回總行數(shù)
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    NSLog(@"count is %d",[self.listData count]);
    return [self.listData count];
}

//為每一行賦值
static NSString *SimpleTableIdentifier=@"SimpleTableIdentifier";
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
    if(cell==nil){//如果行元素為空的話 則新建一行
        cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SimpleTableIdentifier];
    }
    //取得當(dāng)前行
    NSUInteger row=[indexPath row];
    cell.textLabel.text=[listData objectAtIndex:row]; //設(shè)置每一行要顯示的值
    return cell;
}

上面代碼中我們定義了一個(gè)靜態(tài)的字符串常量，用此字符串來(lái)表示表單元的鍵，把上面的代碼添加到TableViewViewController.m 文件的 尾部 ，是 @end 上面喔 。

至此 我們完成了一個(gè)簡(jiǎn)單的視圖列表 ，趕快保存，運(yùn)行 看看效果吧。

效果圖：

我們?cè)賮?lái) 給 表視圖 添加點(diǎn)元素，讓視圖更多元話，首先先給 表視圖添加一個(gè) 圖片。 在ios下面 給 表視圖的行左側(cè) 添加一個(gè)圖片非常簡(jiǎn)單，因?yàn)閕os 已經(jīng)為我們想好了 ?？创a (藍(lán)色部分)：

//為每一行賦值
static NSString *SimpleTableIdentifier=@"SimpleTableIdentifier";
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
    if(cell==nil){//如果行元素為空的話 則新建一行
        cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SimpleTableIdentifier];
    }
    //取得當(dāng)前行
    NSUInteger row=[indexPath row];
    cell.p_w_picpathView.p_w_picpath=[UIImage p_w_picpathNamed:@"city.png"];
    cell.textLabel.text=[listData objectAtIndex:row]; //設(shè)置每一行要顯示的值
    return cell;
}

 一行代碼 就搞定了。方便吧， 在ios的 表視圖 中 ，每個(gè)單元都有一個(gè)ImageView 屬性,每個(gè)p_w_picpathView又包含了Image屬性和一個(gè)HighlightedImage屬性， HighlightedImage的屬性是 選中時(shí)候 顯示的p_w_picpath 感興趣的同學(xué)趕快去試試吧。

UiImage使用的是文件名的緩存機(jī)制，所以它不會(huì)每次調(diào)用都重新加載，而是使用已經(jīng)加載的版本。

這一章 先到這里了，下一章我們來(lái)看看 表格視圖的單元樣式。  歡迎大家拍磚

本章代碼下載地址 ：

https://blog.51cto.com/ext/down_att.php?aid=36008&code=4727