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.
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;
}
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.
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.
