UITableView表视图

1. UITableView继承⾃UIScrollView，所以可以滚动

 

2. 表视图的每⼀条数据都是显⽰在UITableViewCell对象中

 

3. 表视图可以分区显⽰数据，每个分区称为⼀个section，每⼀⾏称为 row，编号都是从0开始 

下面开始介绍UIView的常用方法

1. 初始化方法:

UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:(UITableViewStylePlain)];
[self.view addSubview:tableView];
[tableView release];

2.  设置代理, UITableView一共有2个代理,  UITableViewDelegate 主要负责点击事件触发

  UITableViewDataSource 主要负责数据源 ( 如 , 几个分区 , 一共几行 )

tableView.delegate = self;
tableView.dataSource = self;

3. 这重点介绍 UITableViewCell的重用机制.

   我们要明确UITableViewCell如何获取?有两种方式

   1. 创建一个新的UITableViewCell (allac init)

   2. 在UITableViewCell复用集合中寻找

   复用描述

   1. 当第一个Cell完全划出屏幕时, 将这个cell放入复用集合中

   2. 屏幕最下方, 将要进来一个新的cell时, 首先去复用集合中寻找 (相同样式, 相同标识符的cell), 如果找到了,就用集合中的; 未找到就创建一个新的.

   3. 如此循环, 不断的把cell放入集合, 然后再取出来

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // 创建一个标识符, 标识不同的cell
    // static修饰的变量, 存在全局变量区, 只初始化一次, 防止重复创建
    static NSString *identifier = @"MyCell";
   
    // 从复用的集合中, 按标识符取出cell
    UITableViewCell *cell = [tableView dequeueReusableHeaderFooterViewWithIdentifier:identifier];
   
    // 如果从复用的集合中没有找到, 那么就初始化一个新的cell
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:(UITableViewCellStyleSubtitle) reuseIdentifier:identifier] autorelease];
    }
   
    // cell自带的label, 用来显示数据, 这里indexPath.row是从0开始
    cell.textLabel.text = self.dateArray[indexPath.row];
   
    //cell自带的imageView 来显示图片
    cell.imageView.image = [UIImage imageNamed:@"2"];
   
    // cell自带的辅助按钮
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
   
    // 设置每行点击后的背景颜色
    UIView *selectedView = [[UIView alloc] init];
    selectedView.backgroundColor = [UIColor colorWithRed:0.646 green:0.628 blue:0.616 alpha:1.000];
    cell.selectedBackgroundView = selectedView;
   
    // 如果选择UITextViewCellStyleSubTitle样式, 会多一个子标题
    cell.detailTextLabel.text = @"hehe";
   
    [selectedView release];
    return cell;
}

4. 介绍常用的代理方法

// 设置一个分区有多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
     // 利用显示数据的数组, 动态返回行数
    return self.dateArray.count;
}

#pragma mark - 常用的代理方法

// 设置每一行的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 70;
}

// indexPath.row返回当前点击的那行 即选中触发的方法
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
   
    SecondViewController *secondVC = [[SecondViewController alloc] init];
    [self.navigationController pushViewController:secondVC animated:YES];
    secondVC.str = self.dateArray[indexPath.row];
   
   
    //NSLog(@"你点第%ld行", indexPath.row);
    NSLog(@"你点击了第%ld分区, 第%ld行", indexPath.section, indexPath.row);
}

// 取消点击触发的方法, indexPath.row 返回的是你之前点击的那一行
- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"你取消点击%ld行", indexPath.row);
}

// 设置分区数量
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 3;
}

// 设置右边点击按钮的标题
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {
    return @[@"l", @"t", @"k"];
}

7. 自定义表头和表尾
#pragma mark - 自定义表头
//设置表头的高度
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForHeaderInSection:(NSInteger)section {
    return 50;
}

// 这里要求返回一个UIView作为表头, 默认的高度比较细
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    UIView *headerView = [[UIView alloc] init];
    headerView.backgroundColor = [UIColor colorWithRed:0.706 green:0.969 blue:0.320 alpha:1.000];
   
    UILabel *label = [[UILabel alloc] initWithFrame:(CGRectMake(0, 0, 100, 50))];
    label.backgroundColor = [UIColor colorWithRed:0.635 green:0.839 blue:0.954 alpha:1.000];
    label.text = [NSString stringWithFormat:@"第%ld分区表头", section];
    [headerView addSubview:label];
    [label release];
    return [headerView autorelease];
}

#pragma mark - 自定义表尾
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForFooterInSection:(NSInteger)section {
    return 50;
}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
    UIView *footerView = [[UIView alloc] init];
    footerView.backgroundColor = [UIColor colorWithRed:0.700 green:0.242 blue:0.392 alpha:1.000];
    UILabel *label = [[UILabel alloc] initWithFrame:(CGRectMake(0, 0, 100, 50))];
    label.backgroundColor = [UIColor colorWithRed:1.000 green:0.852 blue:0.220 alpha:1.000];
    label.text = [NSString stringWithFormat:@"第%ld分区表尾", section];
    [footerView addSubview:label];
    [label release];
    return [footerView autorelease];
}

最后, 模仿支付宝界面做一个简单的小练习. 实现的效果如图:

代码如下:

根视图控制器下: 我把实现封装到两个方法里.

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self creatView];
    [self setUpDate];
}

#pragma mark - 解析数据
- (void)setUpDate {
    // 获取文件路径
    NSString *path = [[NSBundle mainBundle] pathForResource:@"TableViewPlist" ofType:@"plist"];
    
    // 从该路径的文字初始化字典
    NSDictionary *dic = [NSDictionary dictionaryWithContentsOfFile:path];
    NSArray *keys = [dic allKeys];
    
    // 初始化最终的字典
    self.dataDic = [NSMutableDictionary dictionary];
    
    // 遍历字典, 通过key取出对应的内容
    for (int i = 0 ; i < keys.count; i++) {
        // 把key对应的数组取出来
        NSArray *array = dic[keys[i]];
        
        // 首先新建一个数组 用来保存赋值完成的model
        NSMutableArray *tempArr = [NSMutableArray array];
        
        // 再一次遍历 把数组中的字典变成model
        for (NSDictionary *dictionary in array) {
            // 初始化model
            CellModel *model = [[CellModel alloc] init];
            
            // 利用KVC给model赋值
            [model setValuesForKeysWithDictionary:dictionary];
            
            // 把字典转换成Model, 还需构建一个字典
            // 格式与原来的字典格式一样, 一个key对应一个数组 数组里存的是model
            
            // 把赋值好的model加进数组
            [tempArr addObject:model];
        }
        // 把三个小数组加进字典中(用原来的key)
        [self.dataDic setObject:tempArr forKey:keys[i]];
    }
    NSLog(@"%@", self.dataDic);
}

#pragma mark - 创建tableView
- (void)creatView {
    // 初始化一个tableView
    UITableView *tableView = [[UITableView alloc] initWithFrame:(CGRectMake(0, 0, kScreenWidth, kScreenHeight)) style:(UITableViewStyleGrouped)];
    
    tableView.backgroundColor = [UIColor whiteColor];
    // 设置代理
    tableView.delegate = self;
    tableView.dataSource = self;
    
    [self.view addSubview:tableView];
    [tableView release];
}

// 返回行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    
    NSArray *keys = [self.dataDic allKeys];
    
    // 取出对应分区的key
    NSString *key = keys[section];
    // 利用分区对应的key取出对应的数组
    NSArray *array = self.dataDic[key];
    
    return array.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    static NSString *identifier = @"myCell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:(UITableViewCellStyleDefault) reuseIdentifier:identifier] autorelease];
    }
    
    // 显示数据
    // 找出分区对应的数组
    NSArray *keys = [self.dataDic allKeys];
    
    // 取出对应分区的key
    NSString *key = keys[indexPath.section];
    
    // 利用分区对应的key取出对应的数组
    NSArray *array = self.dataDic[key];
    
    // 把model取出来 用来显示数据
    CellModel *model = array[indexPath.row];
    
    
    cell.textLabel.text = model.title;
    cell.imageView.image = [UIImage imageNamed:model.imageName];
    
    UIView *selectedView = [[UIView alloc] init];
    selectedView.backgroundColor = [UIColor colorWithWhite:0.781 alpha:1.000];
    cell.selectedBackgroundView = selectedView;
    [selectedView release];
    
    return cell;
}

// 返回分区数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return self.dataDic.count;
}

model部分:

@implementation CellModel
- (void)dealloc {
    [_imageName release];
    [_title release];
    [super dealloc];
}

// KVC赋值保护
- (void)setValue:(id)value forUndefinedKey:(NSString *)key {
    NSLog(@"%@", key);
}
@end