IOS學習筆記(十二)之IOS開發之表視圖(UITableView)的講解與使用(二)(博客地址:http://blog.csdn.net/developer_jiangqq)轉載請注明地址.

Author:hmjiangqq

Email:[email protected]

上一篇初步學習了一下表視圖(UITableView)的基本概念內容(點擊進入)，今天就表視圖的其他知識進行學習，並且實現表視圖。

(一)UITableView的相關類解析:

首先我們來看張類的結構圖:

1:表視圖(UITableView)是繼承自UIScrollView,這樣就可以使得我們的表視圖可以實現上下的滾動。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+CiAgIDI6zazKsbHtytPNvChVSVRhYmxlVmlldymjrLu509DBvbj2zq/N0KLZOlVJVGFibGVWaWV3RGVsZWdhdGXOr83Q0K3S6aOs0ruw487Sw8fTw8C0tKbA7bHtytPNvLXEu/mxvtH5yr2jqMD9yOc6taXUqiYjMjY2ODQ7tcS437bItcijqbu509DIpbK2173RodbQtaXUqiYjMjY2ODQ7tcTKwrz+oaOi2jpVSVRhYmxlVmlld0RhdGFTb3VyY2XOr83Q0K3S6aOssdjSqtKqyKXKtc/WuMPQrdLptcTK/b7d1LS3vbeoo6zAtM3qs8mx7crTzby1xMr9vt3F5NbDoaM8L3A+CjxwPgogICAzOlVJVGFibGVWaWV3Q29udHJvbGxlcqO6ysex7crTzbwoVUlUYWJsZVZpZXcptcS/2NbGxvfA4KGjPC9wPgo8cD4KICAgNDpVSXRhYmxlVmlld0NlbGw6yse1pdSqJiMyNjY4NDvA4C48L3A+CjxwPgo8YnI+CjwvcD4KPGgxPgootv4pOsr9vt3UtNCt0um6zc6vzdDUtNCt0um96cnco7o8L2gxPgo8cD4KICAgICAxOlVJVGFibGVWaWV3RGF0YVNvdXJjZdCt0umjus7Sw8fIpcq1z9bG5NbQtcS3vbeoo6zAtM3qs8nO0sPHtcSx7crTzby1xMr9vt3F5NbDo6y007b4wLTP1Mq+se3K0828oaPG5NbQztLDx7HY0OvSqsilyrXP1rXEwb249re9t6jI58/COjwvcD4KPHA+CjwvcD4KPHByZSBjbGFzcz0="brush:java;">//進行返回每個section(節)中單元格的數量 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section; // Row display. Implementers should *always* try to reuse cells by setting each cell's reuseIdentifier and querying for available reusable cells with dequeueReusableCellWithIdentifier: // Cell gets various attributes set automatically based on table (separators) and data source (accessory views, editing controls) // 為表視圖中的單元格創建數據 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath; 除了以上的兩個必須實現的方法，還有一些以下的可選實現方法：

// 返回section(節)的個數
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;              // Default is 1 if not implemented
//返回section(節)頭的標題
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;    // fixed font style. use custom view (UILabel) if you want something different
// 返回section(節)尾的標題
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section;
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath;
- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath;
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView;                                                    // return list of section titles to display in section index view (e.g. "ABCD...Z#")
- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index;  
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath;
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath;

2:UITableViewDelegate：協議可以用來設定表視圖中的節頭與節尾 同時還可以去響應一些點擊事件，主要的一些方法如下:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;   // custom view for header. will be adjusted to default or specified header height
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section;   // custom view for footer. will be adjusted to default or specified footer height
- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath;
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

更多方法可以去官網UITableView進行查詢。

(三) 表視圖(UITableView)的一些常用方法和屬性：

1:常用屬性：

①:@property(nonatomic) UITableViewCellSeparatorStyle separatorStyle; 默認為UITableViewCellSeparatorStyleSingleLine

②:@property(nonatomic,retain) UIColor *separatorColor; 默認為:the standard separator gray

③:@property(nonatomic,retain) UIView *tableHeaderView; 頭部視圖

④:@property(nonatomic,retain) UIView *tableFooterView; 尾部視圖

⑤:@property(nonatomic) CGFloat rowHeight; // 單元格高度

⑥:@property(nonatomic) CGFloat sectionHeaderHeight; // 頭部行高

⑦:@property(nonatomic) CGFloat sectionFooterHeight; //尾部行高

⑧:@property(nonatomic,readwrite,retain) UIView *backgroundViewNS_AVAILABLE_IOS(3_2);

⑨:@property(nonatomic,readonly) UITableViewStyle style;

2:常用方法:

①：- (void)reloadData; // reloads everything from scratch. redisplays visible rows. because we only keep info about visible rows, this is cheap. will adjust offset if table shrinks 刷新單元格的數據

②:- (void)reloadSectionIndexTitlesNS_AVAILABLE_IOS(3_0); // reloads the index bar.

③:- (NSInteger)numberOfSections; //返回節的數量

④:- (NSInteger)numberOfRowsInSection:(NSInteger)section;//返回每個節的單元格的數量

⑤:- (CGRect)rectForSection:(NSInteger)section; // includes header, footer and all rows

⑥:- (CGRect)rectForHeaderInSection:(NSInteger)section;

⑦:- (CGRect)rectForFooterInSection:(NSInteger)section;

⑧:- (CGRect)rectForRowAtIndexPath:(NSIndexPath *)indexPath;

⑨:- (NSIndexPath *)indexPathForRowAtPoint:(CGPoint)point; // returns nil if point is outside table

⑩:- (NSIndexPath *)indexPathForCell:(UITableViewCell *)cell; //返回指定單元格的NSIndexPath實例

十一:- (NSArray *)indexPathsForRowsInRect:(CGRect)rect; //返回指定范圍的NSIndexPath實例數組

十二:- (UITableViewCell *)cellForRowAtIndexPath:(NSIndexPath *)indexPath; // returns nil if cell is not visible or index path is out of range //返回指定NSIndexPath實例的單元格實例

十三:- (NSArray *)visibleCells; //返回可見的單元格的數組

十四- (NSArray *)indexPathsForVisibleRows; //返回可見單元格的NSIndexPath實例數組

十五:- (UITableViewHeaderFooterView *)headerViewForSection:(NSInteger)sectionNS_AVAILABLE_IOS(6_0);

十六:- (UITableViewHeaderFooterView *)footerViewForSection:(NSInteger)sectionNS_AVAILABLE_IOS(6_0);

十七:- (void)scrollToRowAtIndexPath:(NSIndexPath *)indexPath atScrollPosition:(UITableViewScrollPosition)scrollPosition animated:(BOOL)animated; //滑動到指定的位置，並且可以加上動畫效果

十八:- (void)scrollToNearestSelectedRowAtScrollPosition:(UITableViewScrollPosition)scrollPosition animated:(BOOL)animated;

(四)例子實現表格布局

簡單的來說：是以下幾個步驟:1.配置數據源，2.實現數據源方法，3.設置代理方法。下面來看實例

//
//  ZTTRootViewController.m
//  UITableViewDemo1
//
//  Created by 江清清 on 14-3-19.
//  Copyright (c) 2014年 江清清. All rights reserved.
//

#import "ZTTRootViewController.h"
#import "ZTTDetailsViewController.h"
#define  kDeviceHeight   [UIScreen mainScreen].bounds.size.height

@interface ZTTRootViewController ()

@end

@implementation ZTTRootViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        self.title=@"UITableView Style";
    }
    return self;
}
-(void)loadView{
    UIView *view=[[UIView alloc]initWithFrame:[UIScreen mainScreen].applicationFrame];
    //[view setBackgroundColor:[UIColor redColor]];
    self.view=view;
    [view release];
    
    //開始進行配置數據源
    self.listArray=@[@"UITableViewStylePlain",@"UITableViewStyleGrouped"];
    _tableView=[[UITableView alloc]initWithFrame:CGRectMake(0, 0, 320,kDeviceHeight-20-44) style:UITableViewStylePlain];
    //實現數據源方法
    [_tableView setDataSource:self];
    //設置點擊事件 代理方法
    [_tableView setDelegate:self];
    [self.view addSubview:_tableView];
    
}
- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
#pragma mark- tableview date source
/*
 * 一個selection中又多少個單元格
 */
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return  [_listArray count];
}

// indexPath
//創建單元格
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellInditifier=nil;
    // 創建單元格對象
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:cellInditifier];
    if(cell ==nil){
        cell=[[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellInditifier]autorelease];
    }
    NSString *text=[self.listArray objectAtIndex:indexPath.row];
    cell.textLabel.text=text;
    return  cell;
}



// 表視圖中有幾個selection
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return  1;
}


// 選中單元格的方法
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"didSelect");
    //進行跳轉到相應的頁面
    ZTTDetailsViewController *detailsVC=[[ZTTDetailsViewController alloc]init];
    detailsVC.isPlain=indexPath.row==0?YES:NO;
    [self.navigationController pushViewController:detailsVC animated:YES];
    [detailsVC release];
}
-(void)dealloc{
    [_tableView release];
    _tableView=nil;
    [super dealloc];
}
@end

運行截圖如下:

3：上面的代碼例子是一般的表格，如果我們要表格中加入表頭(header)和表尾(footer)話，我們需要實現以下兩個數據源方法：

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;    // fixed font style. use custom view (UILabel) if you want something different
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section;

運行截圖如下: