Create multi-column table using TableViews in iOS

Question

I create multi-column table using multiple TableViews in iOS. It is shown in the attached picture, that is TableViews are located side by side. Since TableView has all functions such as TapGesture for each cell, Scrolling, etc., I like the way I implement.

The only problem is scrolling. Since each TableView has it own scrolling, I have problem to synchronize scrolling among each other. If not, all data in each row at different columns will not match.

How can I synchronize scrolling among TableViews, i.e.if I scroll one TableView, all TableViews should scroll together.

Thanks.

Answer 1

Divide your UITableView into the number of columns you want to show as i did in samplecode then add custom labels and provide them tag

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *ci=@"cell";
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:ci];


    if(cell==nil)
    {
        cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ci];
    }


    if (tableView == your tablename)
    {

    CGFloat widthLabelHeader = CGRectGetWidth(tablename.frame)/7; // 7 is the number of columns in table view

serialnmbrlbl = (UILabel*)[cell.contentView viewWithTag:401];

    if(!serialnmbrlbl)

    {

        serialnmbrlbl = [[UILabel alloc]init];
        serialnmbrlbl.frame = CGRectMake(0, 0, widthLabelHeader, 50);
        serialnmbrlbl.layer.borderWidth = 0.5;
        serialnmbrlbl.tag = 401;
        serialnmbrlbl.font = [UIFont fontWithName:@"ArialHebrew-Light" size:14];
        [cell.contentView addSubview:serialnmbrlbl];
    }
    serialnmbrlbl.textAlignment = NSTextAlignmentCenter;


    diagnosisnamelbl = (UILabel*)[cell.contentView viewWithTag:402];

    if(!diagnosisnamelbl)

    {

        diagnosisnamelbl = [[UILabel alloc]init];
        diagnosisnamelbl.frame = CGRectMake(0, 0, widthLabelHeader, 50);
        diagnosisnamelbl.layer.borderWidth = 0.5;
        diagnosisnamelbl.tag = 402;
        diagnosisnamelbl.font = [UIFont fontWithName:@"ArialHebrew-Light" size:14];
        [cell.contentView addSubview:diagnosisnamelbl];
    }
    diagnosisnamelbl.textAlignment = NSTextAlignmentCenter;


    dischargeamtlbl = (UILabel*)[cell.contentView viewWithTag:403];

    if(!dischargeamtlbl)

    {

        dischargeamtlbl = [[UILabel alloc]init];
        dischargeamtlbl.frame = CGRectMake(0, 0, widthLabelHeader, 50);
        dischargeamtlbl.layer.borderWidth = 0.5;
        dischargeamtlbl.tag = 403;
        dischargeamtlbl.font = [UIFont fontWithName:@"ArialHebrew-Light" size:14];
        [cell.contentView addSubview:dischargeamtlbl];
    }
    dischargeamtlbl.textAlignment = NSTextAlignmentCenter;

then apply second delegate method

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

{
    if(tableView == hospitaltable)
    {
        UIView *sectionHeaderView = [[UIView alloc] initWithFrame:
                                     CGRectMake(0, 0, hospitaltable.frame.size.width, 45.0)];
        sectionHeaderView.backgroundColor = [UIColor colorWithRed:(83/255.f) green:(200/255.f) blue:(36/255.f) alpha:1];

        CGFloat widthLabelHeader = CGRectGetWidth(hospitaltable.frame)/7;


        UILabel *namelabel1 = (UILabel*)[sectionHeaderView viewWithTag:201];
        if(!namelabel1)
        {

            namelabel1 = [[UILabel alloc]init];
            namelabel1.frame = CGRectMake(0, 0, widthLabelHeader, 45);
            namelabel1.layer.borderWidth = 0.5;
            namelabel1.font = [UIFont fontWithName:@"ArialHebrew-Light" size:14];
            [sectionHeaderView addSubview:namelabel1];
        }
        namelabel1.text = @"Sr. NO.";
        namelabel1.textAlignment = NSTextAlignmentCenter;
        namelabel1.lineBreakMode = NSLineBreakByTruncatingMiddle;
        namelabel1.numberOfLines = 2;

        namelabel1.backgroundColor = [UIColor colorWithRed:(83/255.f) green:(200/255.f) blue:(36/255.f) alpha:1];


        UILabel *orderdateLbl = (UILabel*)[sectionHeaderView viewWithTag:202];
        if (!orderdateLbl) {
            orderdateLbl = [[UILabel alloc]init];
            orderdateLbl.frame = CGRectMake(CGRectGetMaxX(namelabel1.frame), 0, widthLabelHeader, 45);
            orderdateLbl.layer.borderWidth = 0.5;
            orderdateLbl.font = [UIFont fontWithName:@"ArialHebrew-Light" size:14];
            [sectionHeaderView addSubview:orderdateLbl];
        }
        orderdateLbl.text = @"DIAGNOSIS NAME";
        orderdateLbl.textAlignment = NSTextAlignmentCenter;
        orderdateLbl.lineBreakMode = NSLineBreakByTruncatingMiddle;
        orderdateLbl.numberOfLines = 2;

        orderdateLbl.backgroundColor = [UIColor colorWithRed:(83/255.f) green:(200/255.f) blue:(36/255.f) alpha:1];

apply this delegate method too..

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{

        return 45;
}

and lastly

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{
  return 45;
}

Take the help of this code you will get the required tableView

Answer 2

There are some ways to get it to work. But it will be buggy and in my opinion, the incorrect approach to the problem. For this problem, I would use a UICollectionView. That way, you have a single dataSource and much more flexibility than UITableView. You also don't need to be using any hacks to get scrolling synchronised.