如何在UICollectionView 的header 部分动态添加标签和按钮?
How to dynamically add labels and buttons in section header of UICollectionView?
请帮助我如何水平添加标签和类似地水平添加按钮,但每个按钮应该像另一个部分一样在每个标签的下方对齐。
这应该在 UICollectionView 的 header 中动态发生,因为标签和按钮的数量是根据我的数据。
我想做一个 excel 的布局,在 header 我想显示上面的控件。
提前致谢!
我做到了-
- (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 是我的数组,其中包含我想在每个标签中显示的索引值列表。
UICollectionView
提供回调-
每当它要显示一个supplementaryView
- (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollectionReusableView *)view forElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath
每当 supplementaryView
滚出屏幕时-
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(UICollectionReusableView *)view forElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath
您需要注意此处的 elementKind
参数。它有两个值 UICollectionElementKindSectionHeader
& UICollectionElementKindSectionFooter
.
我认为您需要使用 UICollectionElementKindSectionHeader
进行自定义。
希望对您有所帮助。
更新:
如果 UICollectionView
没有提供如上所述的即时自定义方法,推荐的方法是在故事板本身中设计 UICollectionElementKindSectionHeader
。
您需要做的就是将 UICollectionReusableView
拖到视图层次结构中的 collectionView
中。您可能还需要考虑为此设置一个自定义子类,并将 IBOutlet
连接添加到不同的 UI 组件。
试试这个代码。
更新: 尝试以编程方式为 uilabel 设置约束。
- (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;
}
我建议您在故事板中创建一个 uiview,并在每次测量显示它必须膨胀时膨胀它。
这工作得很好:-
- (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 的 header 中动态发生,因为标签和按钮的数量是根据我的数据。
我想做一个 excel 的布局,在 header 我想显示上面的控件。
提前致谢!
我做到了-
- (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 是我的数组,其中包含我想在每个标签中显示的索引值列表。
UICollectionView
提供回调-
每当它要显示一个
supplementaryView
- (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollectionReusableView *)view forElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath
每当
supplementaryView
滚出屏幕时-- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(UICollectionReusableView *)view forElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath
您需要注意此处的 elementKind
参数。它有两个值 UICollectionElementKindSectionHeader
& UICollectionElementKindSectionFooter
.
我认为您需要使用 UICollectionElementKindSectionHeader
进行自定义。
希望对您有所帮助。
更新:
如果 UICollectionView
没有提供如上所述的即时自定义方法,推荐的方法是在故事板本身中设计 UICollectionElementKindSectionHeader
。
您需要做的就是将 UICollectionReusableView
拖到视图层次结构中的 collectionView
中。您可能还需要考虑为此设置一个自定义子类,并将 IBOutlet
连接添加到不同的 UI 组件。
试试这个代码。
更新: 尝试以编程方式为 uilabel 设置约束。
- (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;
}
我建议您在故事板中创建一个 uiview,并在每次测量显示它必须膨胀时膨胀它。
这工作得很好:-
- (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;
}