iOS開發14:UITableView與UITableViewCell

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

運行,看看效果:

相關文章
相關標籤/搜索