How to dynamically add labels and buttons in section header of UICollectionView?

Question

Please help me how I can add labels horizontally and similarly buttons horizontally but each button should align at down of each label like a another section. This should happen dynamically in the header of the UICollectionView as the number of labels and buttons is according to my data.

I want to make a excel kind of layout and in header I want to show the above controls.

Thanks in advance!

I have done this-

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *reusableview = nil;

    if (kind == UICollectionElementKindSectionHeader) {

        DepartmentCollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];

        for (int i=0; i<_officelist.count; i++) {

            UILabel *label = [[UILabel alloc] init];
            label.tag = i+1;
            label.text=[NSString stringWithFormat:@"%@",_officelist[i]];
            [self.roadmapCollectionView addSubview:label];
        }

        reusableview = headerView;
    }

    return reusableview;

}

OfficeList is my array containing the list which I want to display in each label at index value.

Can you please provide us the code you have written to get the above effect so we can help you out ? — , Jun 17 '16 at 05:17

score 2 · Accepted Answer · answered Jun 27 '16 at 06:55

This is working perfectly fine :-

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];

    CGFloat x=0,y=0;

    for (int i = 0;i<[_officelist count];i++)
    {
        id val=[officeSize objectAtIndex:i];
        CGFloat val1=[val floatValue];
            UILabel *newLabel = [[UILabel alloc] initWithFrame:CGRectMake(x, 10,val1-1,35)];

            newLabel.text=[NSString stringWithFormat:@"%@",_officelist[i]];

            newLabel.textAlignment = NSTextAlignmentCenter;

            newLabel.backgroundColor = [UIColor greenColor];
            [self.roadmapCollectionView addSubview:newLabel];

        x=x+val1+1;
    }
    for (int i=0; i<_departmentlist.count; i++) {

        dept=[_departmentlist objectAtIndex:i];
        id val=[officeSize objectAtIndex:i];
        CGFloat val1=[val floatValue];

        float val2=val1/[dept count];
            //NSLog(@"DEPT SIZE - %f",val2);

            for (int j = 0; j < [dept count]; j++)
            {
                UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
                button.frame = CGRectMake(y, 50,val2-1, 25);
                [button setBackgroundColor:[UIColor yellowColor]];
                [button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
                [button setTitle:[NSString stringWithFormat:@"%@",dept[j]] forState:UIControlStateNormal];

                [self.roadmapCollectionView addSubview:button];

                [deptSize addObject:[NSNumber numberWithFloat:y]];

                y=y+val2+1;

            }
}

    return reusableView;
}

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

UICollectionView provides callbacks-

Whenever it's going to display a supplementaryView

 - (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollectionReusableView *)view forElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath

Whenever a supplementaryView scrolls out of the screen-

 - (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(UICollectionReusableView *)view forElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath

You need to look out for elementKind parameter here. It has two values UICollectionElementKindSectionHeader & UICollectionElementKindSectionFooter.

I believe you need to do your customisations with UICollectionElementKindSectionHeader.

Hope it helps.

UPDATE:

If UICollectionView doesn't provide a way to customise this on the fly as described above, the recommended approach would be to design the UICollectionElementKindSectionHeader in the storyboard itself.

All you need to do is drag a UICollectionReusableView inside your collectionView in the view hierarchy. You might also need to consider setting a custom subclass for this and add IBOutlet connections to different UI components.

whatever label and button we are trying to display inside this supplementaryView is not displaying — shubham mishra, Jun 20 '16 at 11:47
You need to do it properly via a subclass. See my updated answer. — Tarun Tyagi, Jun 23 '16 at 13:01

score 0 · Answer 3 · edited Jun 21 '16 at 11:43

Try this code.

UPDATE: Try to set constraints for uilabel programmatically.

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{

    UICollectionReusableView *reusableview = nil;

    if (kind == UICollectionElementKindSectionHeader) {

        DepartmentCollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];

        UIFont * customFont = [UIFont fontWithName:ProximaNovaSemibold size:12];
        CGSize labelSize = [text sizeWithFont:customFont constrainedToSize:CGSizeMake(380, 20) lineBreakMode:NSLineBreakByTruncatingTail];

        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(91, 15, labelSize.width, labelSize.height)];
        label.tag = indexPath.row;
        label.text=[NSString stringWithFormat:@"%@",_officelist[indexPath.row]];
        label.font = customFont;
        label.numberOfLines = 1;
        label.baselineAdjustment = UIBaselineAdjustmentAlignBaselines; 
        label.adjustsFontSizeToFitWidth = YES;
        label.adjustsLetterSpacingToFitWidth = YES;
        label.minimumScaleFactor = 10.0f/12.0f;
        fromLabel.clipsToBounds = YES;
        label.backgroundColor = [UIColor clearColor];
        label.textColor = [UIColor blackColor];
        label.textAlignment = NSTextAlignmentLeft;
        [self.roadmapCollectionView addSubview:label];
        reusableview = headerView;
    }
    return reusableview;
}

I would recommend you to create a uiview in storyboard and inflate it everytime when measurements shows that it has to be inflated.

I have set the contraints as well programmatically to each uilabel that might be inflated. Instead of creating it programmatically, I recommend that you have to create a view in storyboard and inflate it everytime — , Jun 17 '16 at 06:45
not working and one more thing what if we have to create it dynamically — shubham mishra, Jun 20 '16 at 11:43
whatever label and button we are trying to display inside this supplementaryView is not displaying — shubham mishra, Jun 20 '16 at 11:48

How to dynamically add labels and buttons in section header of UICollectionView?

3 Answers3

UPDATE:

Linked