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

运行效果

表格
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,019评论 3 119
  • 一、简介 <<UITableView(或简单地说,表视图)的一个实例是用于显示和编辑分层列出的信息的一种手段 <<...
    无邪8阅读 10,706评论 3 3
  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,649评论 8 265
  • 人生不过二十载,大喜大悲还未曾经历,小痛小伤倒是不少。不敢说领悟人生,毕竟也才二十来岁。不过对于社会生活进...
    该账号乃无名氏阅读 234评论 0 0
  • 管理者必读的10个精华故事 2014-09-22 顶级企业家交流群 一、用人之道 去过庙的人都知道,一进庙门,首先...
    Destiny1213阅读 321评论 0 0