UITableView用來以表格的形式顯示數據。關於UITableView,咱們應該注意: 字體
(1)UITableView用來顯示錶格的可見部分,UITableViewCell用來顯示錶格的一行。 ui
(2)UITableView並不負責存儲表格中的數據,而是僅僅存儲足夠的數據使得能夠畫出當前可見部分。 atom
(3)UITableView從UITableViewDelegate協議獲取配置信息,從UITableViewDataSource協議得到數據信息。 code
(4)全部的UITableView實現時實際上只有一列,可是咱們能夠經過向UITableViewCell中添加子視圖,使得它看起來有好幾列。 orm
(5)UITableView有兩種風格: 對象
① Grouped:每一組看起來像是圓矩形;
② Plain:這是默認風格,能夠修改爲Indexed風格。
在下邊的小例子中,咱們將先實現顯示一列數據,而後在每行添加圖像,以後再看看UITableViewCell的四種分別是什麼樣的。最後再進行其餘操做,好比設置縮進、修改字體大小和行高等。 圖片
一、運行Xcode 4.2,新建一個Single View Application,名稱爲Table Sample: 內存
二、單擊ViewController.xib,使用Interface Builder給視圖添加一個UITableView控件,並使其覆蓋整個視圖: 資源
三、選中新添加的UITableView控件,打開Connection Inspector,找到delegate和datasource,從它們右邊的圓圈拉線到File's Owner圖標: it
四、單擊ViewController.h,在其中添加代碼:
#import <UIKit/UIKit.h> @interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource> @property (strong, nonatomic) NSArray *listData; @end
五、單擊ViewController.m,在其中添加代碼:
5.1 在@implementation後面添加代碼:
@synthesize listData;
5.2 在viewDidLoad方法中添加代碼:
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. NSArray *array = [[NSArray alloc] initWithObjects:@"Tree", @"Flower", @"Grass", @"Fence", @"House", @"Table", @"Chair", @"Book", @"Swing" , nil]; self.listData = array; }
5.3 在viewDidUnload方法中添加代碼:
- (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; self.listData = nil; }
5.4 在@end以前添加代碼:
#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 = @"TableSampleIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: TableSampleIdentifier]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:TableSampleIdentifier]; } NSUInteger row = [indexPath row]; cell.textLabel.text = [listData objectAtIndex:row]; return cell; }
上面的第二個方法中,
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: TableSampleIdentifier];
這個語句根據標識符TableSampleIdentifier尋找當前能夠重用的UITableViewCell。當某行滑出當前可見區域後,咱們重用它所對應的UITableViewCell對象,那麼就能夠節省內存和時間。
若是執行詞語後,cell爲nil,那咱們再建立一個,並設置去標識符爲TableSampleIdentifier:
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:TableSampleIdentifier];
這裏UITableViewCellStyleDefault是表示UITableViewCell風格的常數,除此以外,還有其餘風格,後面將會用到。
注意參數(NSIndexPath *)indexPath,它將行號row和部分號section合併了,經過[indexPath row];獲取行號。以後給cell設置其文本:
cell.textLabel.text = [listData objectAtIndex: row];
六、運行一下:
七、給每一行添加圖片:
7.1 將圖片資源添加到工程:拖到工程中,前面的文章有提到。
7.2 在cellForRowAtIndexPath方法的return語句以前添加代碼:
UIImage *image = [UIImage imageNamed:@"blue.png"]; cell.imageView.image = image; UIImage *highLighedImage = [UIImage imageNamed:@"yellow.png"]; cell.imageView.highlighedImage = highLighedImage;
7.3 運行,效果以下:
能夠看到,每行左邊都出現一張圖片。當選中某行,其圖片改變。
八、設置行的風格:
表示UITableViewCell風格的常量有:
UITableViewCellStyleDefault UITableViewCellStyleSubtitle UITableViewCellStyleValue1 UITableViewCellStyleValue2
這幾種風格的區別主要體如今Image、Text Label以及Detail Text Label。
爲了體現風格,在cellForRowAtIndexPath方法的return語句以前添加代碼:
cell.detailTextLabel.text = @"Detail Text";
而後將
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:TableSampleIdentifier];
中的UITableViewCellStyleDefault依次換成上面提到的四個風格常量,並運行,效果分別以下:
UITableViewCellStyleDefault UITableViewCellStyleSubtitle
UITableViewCellStyleValue1 UITableViewCellStyleValue2
九、設置縮進:
將全部行的風格改回UITableViewCellStyleDefault,而後在@end以前添加代碼以下:
#pragma mark Table Delegate Methods - (NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row = [indexPath row]; return row; }
這裏將第row行縮進row,以下圖所示:
十、操縱行選擇:
在@end以前添加代碼:
- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row = [indexPath row]; if (row%2 == 0) { return nil; } return indexPath; }
上面的方法在選擇某行以前執行,咱們能夠在這個方法中添加咱們想要的操做。這裏,咱們實現的是,若是選擇的行號(從0開始計)是偶數,則取消選擇。
在@end以前添加代碼:
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row = [indexPath row]; NSString *rowValue = [listData objectAtIndex:row]; NSString *message = [[NSString alloc] initWithFormat: @"You selected %@", rowValue]; UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Row Selected!" message:message delegate:nil cancelButtonTitle:@"Yes I Did" otherButtonTitles:nil]; [alert show]; [tableView deselectRowAtIndexPath:indexPath animated:YES]; }
當選擇某行以後,就彈出一個Alert,用來顯示咱們所作的選擇。
運行一下,你會發現第0、2等行沒法選擇。選擇奇數行時會彈出提示:
並且關閉提示框後,選擇的那行也被取消了選擇,用的語句
[tableView deselectRowAtIndexPath:indexPath animated:YES];
十一、設置字體大小和表格行高:
11.1 在cellForRowAtIndexPath方法中的return以前添加代碼,用於設置字體和大小:
cell.textLabel.font = [UIFont boldSystemFontOfSize:50];
11.2 在@end以前添加代碼,用於設置行高:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 70; }
運行,看看效果: