iOS表格的实现思路

需求 表格展现看房记录，X轴为星期，Y轴为时间

需求.png

首先第一个想到的是用UICollectionView,这样虽然可以画出表格，但是赋值没办法精确，最后用TableView的方式实现

设置数据源

_times = @[@"18：00-21：00",@"14：00-17：59",@"11：00-13：59",@"9：00-10：59",@"6：00-8：59"];

_weeks = @[@"星期一",@"星期二",@"星期三",@"星期四",@"星期五",@"星期六",@"星期日"];


- (void)setupFormData {
    
    for (NSInteger i = 0; i < self.weeks.count; i++) {
        
        [self.timeDatas removeAllObjects];
        NSArray *times = [NSArray array];
        for (NSInteger j = 0; j < self.times.count; j++) {
            HCFormItem *item = [[HCFormItem alloc] init];
            item.num = 0;
            
            if (i == 0 && j == 0) {
                item.num = 1;
                item.color = @"#00B0FF";
            }
            if (i == 1 && j == 0) {
                item.num = 1;
                item.color = @"#00B0FF";
            }
            if (i == 2 && j == 1) {
                item.num = 4;
                item.color = @"#00E5FF";
            }
            if (i == 3 && j == 1) {
                item.num = 3;
                item.color = @"#00E5FF";
            }
            if (i == 4 && j == 1) {
                item.num = 4;
                item.color = @"#00E5FF";
            }
            if (i == 5 && j == 4) {
                item.num = 10;
                item.color = @"#FF3D00";
            }
            if (i == 6 && j == 3) {
                item.num = 8;
                item.color = @"#FFBC00";
            }
            [self.timeDatas addObject:item];
        }
        times = self.timeDatas.copy;
        [self.weekDatas addObject:times];
    }
}

用UITableView画出表格，线的颜色为背景色，用间隔充当线条

背景色

self.view.backgroundColor = [UIColor whiteColor];
UIView *formBGView = [[UIView alloc] init];
formBGView.backgroundColor = [UIColor colorWithHexString:kGray_Light_HC];
[self.bgView addSubview:formBGView];
formBGView.frame = CGRectMake(78, self.priceChart.bottom, 260, 120);

画表格

for (NSInteger i = 0; i < self.weekDatas.count; i++) {
        
        UITableView *tableView = [[UITableView alloc] init];
        tableView.tag = 101 + i;
        tableView.dataSource = self;
        tableView.delegate = self;
        tableView.scrollEnabled = NO;
        tableView.tableFooterView = [self setupFooterView:i];
        tableView.showsVerticalScrollIndicator = NO;
        [self.bgView addSubview:tableView];
        CGFloat tableViewX = 36 * i + 1 * (i + 1) + 78;
        CGFloat tableViewY = formBGView.top + 1;
        CGFloat tableViewW = 36;
        CGFloat tableViewH = 24 * (self.timeDatas.count + 1);
        tableView.frame = CGRectMake(tableViewX, tableViewY, tableViewW, tableViewH);
    }

下面实现DataSource和Delegate

#pragma mark - —————————————————————UITableView DataSource&Delegate—————————————————————
#pragma mark - UITableView DataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    
    return self.timeDatas.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // 200 为Y轴的数据源
    if (tableView.tag == 200) {
         UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        
        UILabel *timeLabel = [[UILabel alloc] init];
        [cell.contentView addSubview:timeLabel];
        timeLabel.textColor = [UIColor colorWithHexString:KTextGray];
        timeLabel.font = [UIFont systemFontOfSize:8];
        timeLabel.text = self.times[indexPath.row];
        timeLabel.textAlignment = NSTextAlignmentCenter;
        timeLabel.frame = CGRectMake(0, 4, 78, 20 );
        return cell;
    }
    HCFormCell *cell = [[HCFormCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"HCFormCell"];
    NSInteger index = tableView.tag - 101;
    NSArray *times = self.weekDatas[index];
    HCFormItem *item = times[indexPath.row];
    cell.formItem = item;
    [tableView setSeparatorColor:[UIColor colorWithHexString:kGray_Light_HC]];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}

#pragma mark - UITableView Delegate
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 24;
}

#pragma mark - cell分割线填满
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
        [cell setSeparatorInset:UIEdgeInsetsZero];
    }
    
    if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
        [cell setLayoutMargins:UIEdgeInsetsZero];
    }
    
}

XY轴

X轴由于是在UITableView的底布，所有采用FooterView，而Y轴则是单独在左侧再写一个TableView

X轴

- (UIView *)setupFooterView:(NSInteger)index {
    UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 36, 24)];
    footerView.backgroundColor = [UIColor colorWithHexString:kGray_Light_HC];
    
    UILabel *weekLabel = [[UILabel alloc] init];
    weekLabel.font = [UIFont systemFontOfSize:8];
    weekLabel.backgroundColor = [UIColor whiteColor];
    weekLabel.textColor = [UIColor colorWithHexString:KTextGray];
    weekLabel.textAlignment = NSTextAlignmentCenter;
    weekLabel.text = self.weeks[index];
    [footerView addSubview:weekLabel];
    weekLabel.frame = CGRectMake(0, 1, footerView.width, footerView.height - 1);
    return footerView;
}

Y轴

UITableView *formY = [[UITableView alloc] init];
formY.tag = 200;
formY.dataSource = self;
formY.delegate = self;
formY.scrollEnabled = NO;
formY.tableFooterView = [UIView new];
formY.showsVerticalScrollIndicator = NO;
formY.separatorStyle = UITableViewCellSeparatorStyleNone;

[self.bgView addSubview:formY];
CGFloat formYX = 0;
CGFloat formYY = formBGView.top + 1;
CGFloat formYW = 78;
CGFloat formYH = 24 * self.timeDatas.count;
formY.frame = CGRectMake(formYX, formYY, formYW, formYH);

运行效果

效果.png