UITableView高级用法

一、UITableView概述

　　UITableView继承自UIScrollView，可以表现为Plain和Grouped两种风格，分别如下图所示：

其中左边的是Plain风格的，右边的是Grouped风格，这个区别还是很明显的。

　　查看UITableView的帮助文档我们会注意到UITableView有两个Delegate分别为：dataSource和delegate。

　　dataSource是UITableViewDataSource类型，主要为UITableView提供显示用的数据(UITableViewCell)，指定UITableViewCell支持的编辑操作类型(insert，delete和reordering)，并根据用户的操作进行相应的数据更新操作，如果数据没有更具操作进行正确的更新，可能会导致显示异常，甚至crush。

　　delegate是UITableViewDelegate类型，主要提供一些可选的方法，用来控制tableView的选择、指定section的头和尾的显示以及协助完成cell的删除和排序等功能。

　　提到UITableView，就必须的说一说NSIndexPath。UITableView声明了一个NSIndexPath的类别，主要用来标识当前cell的在tableView中的位置，该类别有section和row两个属性，前者标识当前cell处于第几个section中，后者代表在该section中的第几行。

　　UITableView只能有一列数据(cell)，且只支持纵向滑动，当创建好的tablView第一次显示的时候，我们需要调用其reloadData方法，强制刷新一次，从而使tableView的数据更新到最新状态。

二、UITableView使用demo

接下来介绍大家使用UITableView写出如下界面：

首先是布局

布局中的TableView关联到.h中的UITableView:

 IBOutlet UITableView *categoryTable;

其次是 .m文件中的颜色数据，默认勾选数据，这个循环有待优化，欢迎交流：

- (void) viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    [colorArray addObject:[@{@"name":@"红色", @"color":@"ff0000", @"checked":@"0"} mutableCopy]];
    [colorArray addObject:[@{@"name":@"橙色", @"color":@"#FF6600	", @"checked":@"0"} mutableCopy]];
    [colorArray addObject:[@{@"name":@"黄色", @"color":@"#FFFF00", @"checked":@"0"} mutableCopy]];
    [colorArray addObject:[@{@"name":@"绿色", @"color":@"00ff00", @"checked":@"0"} mutableCopy]];
    [colorArray addObject:[@{@"name":@"蓝色", @"color":@"0000ff", @"checked":@"0"} mutableCopy]];
    [colorArray addObject:[@{@"name":@"紫色", @"color":@"#9900CC", @"checked":@"0"} mutableCopy]];
    [colorArray addObject:[@{@"name":@"褐色", @"color":@"#663300", @"checked":@"0"} mutableCopy]];
    if(AddTag){
        [[colorArray objectAtIndex:0] setValue:@"1" forKey:@"checked"];
    }else{
        NSString *oldColor = [self.category valueForKey:@"color"];
        for( int i =0;i<[colorArray count];i++){
            NSMutableArray *colorInfo = [colorArray objectAtIndex:i];
            NSString *newColor = [colorInfo valueForKey:@"color"];
            if(![oldColor isEqualToString:newColor]){
                //没找到当前颜色，则将颜色默认选择第一个
                 [[colorArray objectAtIndex:0] setValue:@"1" forKey:@"checked"];
                continue;
            }else{
                //找到相同的颜色，将第一个颜色恢复未选，将和分类相同的颜色设为勾选项
                 [[colorArray objectAtIndex:0] setValue:@"0" forKey:@"checked"];
                [[colorArray objectAtIndex:i]setValue:@"1" forKey:@"checked"];
                 self.selectedIndexPath = [NSIndexPath indexPathForRow:i inSection:1];
                break;
            }
        }
    }
}

接下来就是实现UITableView的关键代码了：

设置tableview中各section的header的高度，这里将第一个section的header的高度设为32.f

- (CGFloat) tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    if (section == 0) {
        return 32.f;
    }
    return 0.f;
}

然后我们这里只设置第一个section的headerView：

- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    if (section == 0) {
        UIView *sectionView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 32)];
        [sectionView setBackgroundColor:[UIColor clearColor]];
        
        UILabel *sec = [[UILabel alloc] initWithFrame:CGRectMake(20, 10, 64, 22)];
        [sec setFont:[UIFont systemFontOfSize:14.f]];
        [sec setBackgroundColor:[UIColor clearColor]];
        [sec setText:@"分类名称"];
        [sec setTextColor:[UIColor lightGrayColor]];
        [sectionView addSubview:sec];
        return sectionView;
    }
    return nil;
}

接下来设置当前UITableView的style为Grouped的section个数：

本例中因为布局重用，使用了一个BOOL型的tag，用于显示是否有删除按钮。

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    if(AddTag){
        return 2;
    }else{
        return 3;
    }
}

接下来设置每个section中数据的行数：

- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    if(section == 1){
        return [colorArray count];
    }else{
        return 1;
    }
}

设置每行的高度：

- (float) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 44.f;
}

最关键的当然是设置UITableViewCell，这个有点像android中listView的baseAdatpter中的getView;

第一个section是个输入框，这个输入框设置了他的header，输入框的cell布局

 InputCell.m：

#import "ZYTInputCell.h"

@implementation ZYTInputCell
@synthesize inputValue;

- (void)awakeFromNib {
    // Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

+ (id) cell{
    return [[[NSBundle mainBundle] loadNibNamed:@"ZYTInputCell" owner:self options:nil] objectAtIndex:0];
}

- (BOOL) textFieldShouldReturn:(UITextField *)textField{
    [textField resignFirstResponder];
    return YES;
}
@end

 (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    NSDictionary *dic = [colorArray objectAtIndex:indexPath.row];
    if (indexPath.section == 0) {
        static NSString *cellIdentitier1 = @"InputId";
        ZYTInputCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentitier1];
        if (cell == nil) {
            cell = [ZYTInputCell cell];
        }
        [cell.inputValue setDelegate:self];
        [cell.inputValue setPlaceholder:@"请输入分类名称"];
        if(AddTag){
            cell.inputValue.text = @"";
        }else{
            cell.inputValue.text = [self.category valueForKey:@"name"];
        }
        [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
        return cell;
    }else if(indexPath.section == 1){
        static NSString *cellIdentitier = @"category_cell";
        ZYTSelectScheduleCategoryCell * cell = [tableView dequeueReusableCellWithIdentifier:cellIdentitier];
        if (cell == nil) {
            cell = [ZYTSelectScheduleCategoryCell cell];
        }
        
        [cell.categoryName setText:[dic valueForKey:@"name"]];
        [cell.color setBackgroundColor:[UIColor hexStringToColor:[dic valueForKey:@"color"]]];
       
        [cell.checked setHidden:NO];
        if ([[dic valueForKey:@"checked"] integerValue] == 1) {
                [cell.checked setHidden:NO];
        }else{
            [cell.checked setHidden:YES];
        }
        [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
        return cell;
    }else{
        static NSString *cellIdentitier = @"del_category_cell";
        ZYTButtonCell * cell = [tableView dequeueReusableCellWithIdentifier:cellIdentitier];
        if (cell == nil) {
            cell = [ZYTButtonCell cell];
        }
        [cell.addCategoryBtn setTitle:@"删除分类" forState:UIControlStateNormal];
        [cell.addCategoryBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
        [cell.addCategoryBtn addTarget:self action:@selector(delCategory:) forControlEvents:UIControlEventTouchUpInside];
            [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
        return cell;
    }
}

然后是每个row被选中的处理代码:

- (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    if (self.selectedIndexPath) {
        if (self.selectedIndexPath.row != indexPath.row) { //如果当前所选和上次不一样
            NSLog(@"当前所选和上次不一样");
            //将上次的恢复为未选
            [[colorArray objectAtIndex:self.selectedIndexPath.row] setValue:@"0" forKey:@"checked"];
            [tableView reloadRowsAtIndexPaths:@[self.selectedIndexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
            //勾选这次选的
            [[colorArray objectAtIndex:indexPath.row] setValue:@"1" forKey:@"checked"];
            [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
            self.selectedIndexPath = indexPath;
        }
    }
}