UITableView与UITableViewCell

转自&＃xff1a;http://blog.sina.com.cn/s/blog_4cd14afb01014j97.html

UITableView用来以表格的形式显示数据。关于UITableView&＃xff0c;我们应该注意&＃xff1a;

&＃xff08;1&＃xff09;UITableView用来显示表格的可见部分&＃xff0c;UITableViewCell用来显示表格的一行。

&＃xff08;2&＃xff09;UITableView并不负责存储表格中的数据&＃xff0c;而是仅仅存储足够的数据使得可以画出当前可见部分。

&＃xff08;3&＃xff09;UITableView从UITableViewDelegate协议获取配置信息&＃xff0c;从UITableViewDataSource协议获得数据信息。

&＃xff08;4&＃xff09;所有的UITableView实现时实际上只有一列&＃xff0c;但是我们可以通过向UITableViewCell中添加子视图&＃xff0c;使得它看起来有好几列。

&＃xff08;5&＃xff09;UITableView有两种风格&＃xff1a;

    ① Grouped&＃xff1a;每一组看起来像是圆矩形&＃xff1b;
    ② Plain&＃xff1a;这是默认风格&＃xff0c;可以修改成Indexed风格。
在下边的小例子中&＃xff0c;我们将先实现显示一列数据&＃xff0c;然后在每行添加图像&＃xff0c;之后再看看UITableViewCell的四种分别是什么样的。最后再进行其他操作&＃xff0c;比如设置缩进、修改字体大小和行高等。

1、运行Xcode 4.2&＃xff0c;新建一个Single View Application&＃xff0c;名称为Table Sample&＃xff1a;

2、单击ViewController.xib&＃xff0c;使用Interface Builder给视图添加一个UITableView控件&＃xff0c;并使其覆盖整个视图&＃xff1a;

3、选中新添加的UITableView控件&＃xff0c;打开Connection Inspector&＃xff0c;找到delegate和datasource&＃xff0c;从它们右边的圆圈拉线到File&＃39;s Owner图标&＃xff1a;

4、单击ViewController.h&＃xff0c;在其中添加代码&＃xff1a;

#import &＃64;interface ViewController : UIViewController &＃64;property (strong, nonatomic) NSArray *listData; &＃64;end

5、单击ViewController.m&＃xff0c;在其中添加代码&＃xff1a;

5.1 在&＃64;implementation后面添加代码&＃xff1a;

&＃64;synthesize listData;

5.2 在viewDidLoad方法中添加代码&＃xff1a;

- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. NSArray *array &＃61; [[NSArray alloc] initWithObjects:&＃64;"Tree", &＃64;"Flower", &＃64;"Grass", &＃64;"Fence", &＃64;"House", &＃64;"Table", &＃64;"Chair", &＃64;"Book", &＃64;"Swing" , nil]; self.listData &＃61; array; }

5.3 在viewDidUnload方法中添加代码&＃xff1a;

- (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet &＃61; nil; self.listData &＃61; nil; }

5.4 在&＃64;end之前添加代码&＃xff1a;

#pragma mark - #pragma mark Table View Data Source Methods //返回行数 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [self.listData count]; } //新建某一行并返回 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *TableSampleIdentifier &＃61; &＃64;"TableSampleIdentifier"; UITableViewCell *cell &＃61; [tableView dequeueReusableCellWithIdentifier: TableSampleIdentifier]; if (cell &＃61;&＃61; nil) { cell &＃61; [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:TableSampleIdentifier]; } NSUInteger row &＃61; [indexPath row]; cell.textLabel.text &＃61; [listData objectAtIndex:row]; return cell; }

上面的第二个方法中&＃xff0c;

UITableViewCell *cell &＃61; [tableView dequeueReusableCellWithIdentifier: TableSampleIdentifier];

这个语句根据标识符TableSampleIdentifier寻找当前可以重用的UITableViewCell。当某行滑出当前可见区域后&＃xff0c;我们重用它所对应的UITableViewCell对象&＃xff0c;那么就可以节省内存和时间。

如果执行词语后&＃xff0c;cell为nil&＃xff0c;那我们再创建一个&＃xff0c;并设置去标识符为TableSampleIdentifier&＃xff1a;

cell &＃61; [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:TableSampleIdentifier];

这里UITableViewCellStyleDefault是表示UITableViewCell风格的常数&＃xff0c;除此之外&＃xff0c;还有其他风格&＃xff0c;后面将会用到。

注意参数(NSIndexPath *)indexPath&＃xff0c;它将行号row和部分号section合并了&＃xff0c;通过[indexPath row];获取行号。之后给cell设置其文本&＃xff1a;

cell.textLabel.text &＃61; [listData objectAtIndex: row];

6、运行一下&＃xff1a;

7、给每一行添加图片&＃xff1a;

7.1 将图片资源添加到工程&＃xff1a;拖到工程中&＃xff0c;前面的文章有提到。

7.2 在cellForRowAtIndexPath方法的return语句之前添加代码&＃xff1a;

UIImage *image &＃61; [UIImage imageNamed:&＃64;"blue.png"]; cell.imageView.image &＃61; image; UIImage *highLighedImage &＃61; [UIImage imageNamed:&＃64;"yellow.png"]; cell.imageView.highlighedImage &＃61; highLighedImage;

7.3 运行&＃xff0c;效果如下&＃xff1a;

可以看到&＃xff0c;每行左边都出现一张图片。当选中某行&＃xff0c;其图片改变。

8、设置行的风格&＃xff1a;

表示UITableViewCell风格的常量有&＃xff1a;

UITableViewCellStyleDefault UITableViewCellStyleSubtile UITableViewCellStyleValue1 UITableViewCellStyleValue2

这几种风格的区别主要体现在Image、Text Label以及Detail Text Label。

为了体现风格&＃xff0c;在cellForRowAtIndexPath方法的return语句之前添加代码&＃xff1a;

cell.detailTextLabel.text &＃61; &＃64;"Detail Text";

然后将

cell &＃61; [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:TableSampleIdentifier];

中的UITableViewCellStyleDefault依次换成上面提到的四个风格常量&＃xff0c;并运行&＃xff0c;效果分别如下&＃xff1a;

            UITableViewCellStyleDefault                                   UITableViewCellStyleSubtle

             UITableViewCellStyleValue1                                  UITableViewCellStyleValue2

9、设置缩进&＃xff1a;

将所有行的风格改回UITableViewCellStyleDefault&＃xff0c;然后在&＃64;end之前添加代码如下&＃xff1a;

#pragma mark Table Delegate Methods - (NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row &＃61; [indexPath row]; return row; }

这里将第row行缩进row&＃xff0c;如下图所示&＃xff1a;

10、操纵行选择&＃xff1a;

在&＃64;end之前添加代码&＃xff1a;

- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row &＃61; [indexPath row]; if (row%2 &＃61;&＃61; 0) { return nil; } return indexPath; }

上面的方法在选择某行之前执行&＃xff0c;我们可以在这个方法中添加我们想要的操作。这里&＃xff0c;我们实现的是&＃xff0c;如果选择的行号&＃xff08;从0开始计&＃xff09;是偶数&＃xff0c;则取消选择。

在&＃64;end之前添加代码&＃xff1a;

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row &＃61; [indexPath row]; NSString *rowValue &＃61; [listData objectAtIndex:row]; NSString *message &＃61; [[NSString alloc] initWithFormat: &＃64;"You selected %&＃64;", rowValue]; UIAlertView *alert &＃61; [[UIAlertView alloc] initWithTitle:&＃64;"Row Selected!" message:message delegate:nil cancelButtonTitle:&＃64;"Yes I Did" otherButtonTitles:nil]; [alert show]; [tableView deselectRowAtIndexPath:indexPath animated:YES]; }

当选择某行之后&＃xff0c;就弹出一个Alert&＃xff0c;用来显示我们所做的选择。

运行一下&＃xff0c;你会发现第0、2等行无法选择。选择奇数行时会弹出提示&＃xff1a;

而且关闭提示框后&＃xff0c;选择的那行也被取消了选择&＃xff0c;用的语句

[tableView deselectRowAtIndexPath:indexPath animated:YES];

11、设置字体大小和表格行高&＃xff1a;

11.1 在cellForRowAtIndexPath方法中的return之前添加代码&＃xff0c;用于设置字体和大小&＃xff1a;

cell.textLabel.font &＃61; [UIFont boldSystemFontOfSize:50];

11.2 在&＃64;end之前添加代码&＃xff0c;用于设置行高&＃xff1a;

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 70; }

运行&＃xff0c;看看效果&＃xff1a;