在 Interface Builder 中设计 UITableView 的部分 header

Question

我有一个带有 UITableView 的 xib 文件，我想使用委托方法 tableView:viewForHeaderInSection: 添加自定义部分 header 视图。是否有可能在 Interface Builder 中设计它，然后以编程方式更改它的某些子视图的属性？

我的 UITableView 有更多部分 header，所以在 Interface Builder 中创建一个 UIView 并返回它不起作用，因为我必须复制它，但没有任何好的方法可以做到这一点。存档和取消存档不适用于 UIImages，因此 UIImageViews 将显示为空白。

此外，我不想以编程方式创建它们，因为它们太复杂并且生成的代码将难以阅读和维护。

编辑 1：这是我的 tableView:viewForHeaderInSection: 方法：

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

    if ([tableView.dataSource tableView:tableView numberOfRowsInSection:section] == 0) {
        return nil;
    }

    CGSize headerSize = CGSizeMake(self.view.frame.size.width, 100);

    /* wrapper */

    UIView *wrapperView = [UIView viewWithSize:headerSize];

    wrapperView.backgroundColor = [UIColor colorWithHexString:@"2670ce"];

    /* title */

    CGPoint titleMargin = CGPointMake(15, 8);

    UILabel *titleLabel = [UILabel labelWithText:self.categoriesNames[section] andFrame:CGEasyRectMake(titleMargin, CGSizeMake(headerSize.width - titleMargin.x * 2, 20))];

    titleLabel.textColor = [UIColor whiteColor];
    titleLabel.font = [UIFont fontWithStyle:FontStyleRegular andSize:14];

    [wrapperView addSubview:titleLabel];

    /* body wrapper */

    CGPoint bodyWrapperMargin = CGPointMake(10, 8);

    CGPoint bodyWrapperViewOrigin = CGPointMake(bodyWrapperMargin.x, CGRectGetMaxY(titleLabel.frame) + bodyWrapperMargin.y);
    CGSize bodyWrapperViewSize = CGSizeMake(headerSize.width - bodyWrapperMargin.x * 2, headerSize.height - bodyWrapperViewOrigin.y - bodyWrapperMargin.y);

    UIView *bodyWrapperView = [UIView viewWithFrame:CGEasyRectMake(bodyWrapperViewOrigin, bodyWrapperViewSize)];

    [wrapperView addSubview:bodyWrapperView];

    /* image */

    NSInteger imageSize = 56;
    NSString *imageName = [self getCategoryResourceItem:section + 1][@"image"];

    UIImageView *imageView = [UIImageView imageViewWithImage:[UIImage imageNamed:imageName] andFrame:CGEasyRectMake(CGPointZero, CGEqualSizeMake(imageSize))];

    imageView.layer.masksToBounds = YES;
    imageView.layer.cornerRadius = imageSize / 2;

    [bodyWrapperView addSubview:imageView];

    /* labels */

    NSInteger labelsWidth = 60;

    UILabel *firstLabel = [UILabel labelWithText:@"first" andFrame:CGRectMake(imageSize + bodyWrapperMargin.x, 0, labelsWidth, 16)];

    [bodyWrapperView addSubview:firstLabel];

    UILabel *secondLabel = [UILabel labelWithText:@"second" andFrame:CGRectMake(imageSize + bodyWrapperMargin.x, 20, labelsWidth, 16)];

    [bodyWrapperView addSubview:secondLabel];

    UILabel *thirdLabel = [UILabel labelWithText:@"third" andFrame:CGRectMake(imageSize + bodyWrapperMargin.x, 40, labelsWidth, 16)];

    [bodyWrapperView addSubview:thirdLabel];

    [@[ firstLabel, secondLabel, thirdLabel ] forEachView:^(UIView *view) {
        UILabel *label = (UILabel *)view;

        label.textColor = [UIColor whiteColor];
        label.font = [UIFont fontWithStyle:FontStyleLight andSize:11];
    }];

    /* line */

    UIView *lineView = [UIView viewWithFrame:CGRectMake(imageSize + labelsWidth + bodyWrapperMargin.x * 2, bodyWrapperMargin.y, 1, bodyWrapperView.frame.size.height - bodyWrapperMargin.y * 2)];

    lineView.backgroundColor = [UIColor whiteColorWithAlpha:0.2];

    [bodyWrapperView addSubview:lineView];

    /* progress */

    CGPoint progressSliderOrigin = CGPointMake(imageSize + labelsWidth + bodyWrapperMargin.x * 3 + 1, bodyWrapperView.frame.size.height / 2 - 15);
    CGSize progressSliderSize = CGSizeMake(bodyWrapperViewSize.width - bodyWrapperMargin.x - progressSliderOrigin.x, 30);

    UISlider *progressSlider = [UISlider viewWithFrame:CGEasyRectMake(progressSliderOrigin, progressSliderSize)];

    progressSlider.value = [self getCategoryProgress];

    [bodyWrapperView addSubview:progressSlider];

    return wrapperView;
}

我希望它看起来像这样：

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

    if ([tableView.dataSource tableView:tableView numberOfRowsInSection:section] == 0) {
        return nil;
    }

    SectionView *sectionView = ... // get the view that is already designed in the Interface Builder

    sectionView.headerText = self.categoriesNames[section];
    sectionView.headerImage = [self getCategoryResourceItem:section + 1][@"image"];

    sectionView.firstLabelText = @"first";
    sectionView.secondLabelText = @"second";
    sectionView.thirdLabelText = @"third";

    sectionView.progress = [self getCategoryProgress];

    return wrapperView;
}

编辑 2：我没有使用 Storyboard，只是 .xib 文件。另外，我没有 UITableViewController，只有 UIViewController，我在其中添加了 UITableView.

Answer 1

据我了解您的问题，您希望将相同的 UIView 重复多次以显示您希望能够显示的多个部分 headers。

如果这是我的问题，下面是我的解决方法。

原始解决方案

1)

在拥有 table 视图的 UIViewController 中，我还创建了一个视图，它是 header 的模板。将其分配给 IBOutlet。 这将是您可以通过 Interface Builder 编辑的视图。

2)

在您的 ViewDidLoad 或（可能更好）ViewWillAppear 方法中，您需要制作尽可能多的 header 模板 UIView headers.

部分需要显示

在内存中复制 UIView 并不简单，但也不难。 Here is an answer from a related question 向您展示如何操作。

将副本添加到 NSMutableArray（其中每个 object 的索引将对应于部分...数组索引 0 中的视图将是您 return 对于第 0 节，在第 1 节的数组中查看 1，ec.）。

3)

您将无法将 IBOutlets 用于该部分 header 的元素（因为您的代码仅将插座与 XIB 文件中的一个特定视图相关联） .

因此，为此，您可能希望为 header 视图中的每个 UI 元素使用视图标记属性，您希望为每个 modify/change不同的部分。您可以通过 Interface Builder 设置这些标签，然后在您的代码中以编程方式引用它们。

在您的 viewForHeaderInSection 方法中，您将执行如下操作：

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

    if ([tableView.dataSource tableView:tableView numberOfRowsInSection:section] == 0) {
        return nil;
    }

    SectionView *sectionView = [self.arrayOfDuplicatedHeaderViews objectAtIndex: section];
    // my title view has a tag of 10
    UILabel *titleToModify = [sectionView viewWithTag: 10]; 
    if(titleToModify)
    {
        titleToModify.text = [NSString stringWithFormat:@"section %d", section];
    }

    return sectionView;
}

有道理吗？

不同的解决方案

1)

您仍然需要一组 UIViews（或“Section View”子类 UIViews），但您可以通过连续调用来创建每个视图以加载视图来自它自己的 XIB 文件。

像这样：

@implementation SectionView

+ (SectionView*) getSectionView
{
  NSArray* array = [[NSBundle mainBundle] loadNibNamed:@"SectionView" owner:nil options:nil];
  return [array objectAtIndex:0]; // assume that SectionView is the only object in the xib
}

@end

（找到更多详细信息 in the answer to this related question）

2)

您可能能够在此使用 IBOutlets（但我不是 100% 确定），但标签属性再次可能工作得很好。

Answer 2

#故事板或 XIB。 2020 年更新。

相同Storyboard:

 return tableView.dequeueReusableCell(withIdentifier: "header")

分开XIB（附加步骤：您必须先注册Nib）：

 tableView.register(UINib(nibName: "XIBSectionHeader", bundle:nil),
                    forCellReuseIdentifier: "xibheader")

要从 Storyboard 而不是 XIB 加载，请参阅 this Stack Overflow answer。

#使用UITableViewCell在IB中创建Section Header

利用 header 部分是常规 UIView 并且 UITableViewCell 也是 UIView 这一事实。在 Interface Builder 中，从 Object Library[=] 中拖放 Table View Cell 102=] 到您的 Table 查看原型内容.

(2020) 在现代 Xcode 中，只需增加“动态原型”数量即可放入更多单元格：

向新添加的 Table View Cell 添加 Identifier，并自定义其外观以满足您的需要。对于这个例子，我使用了 header.

使用 dequeueReusableCell:withIdentifier 定位单元格，就像定位任何 table 视图单元格一样。

不要忘记它 只是一个普通单元格：但是您要将它用作 header。

对于 2020 年，只需在 ViewDidLoad 中添加四行代码：

tableView.rowHeight = UITableView.automaticDimension tableView.estimatedRowHeight = 70 // any reasonable value is fine tableView.sectionHeaderHeight = UITableView.automaticDimension tableView.estimatedSectionHeaderHeight = 70 // any reasonable value is fine

{请参阅 this 进行讨论。}

您的 header 单元格高度 现在完全是动态的。在 headers.
中更改文本等的长度是可以的
(提示：纯粹关于情节提要：简单 select...

...在情节提要中，以便情节提要正常工作。这对最终构建绝对没有影响。选择该复选框对最终构建绝对没有任何影响。如果高度是动态的，它的存在纯粹是为了让故事板正常工作。）

在较旧的 Xcode 中，或者，如果出于某种原因您不想使用动态高度：

只需提供 heightForHeaderInSection，在本例中为清楚起见，硬编码为 44：

//MARK: UITableViewDelegate override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { // This is where you would change section header content return tableView.dequeueReusableCell(withIdentifier: "header") } override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { return 44 }

###Swift 2 及更早版本：

return tableView.dequeueReusableCellWithIdentifier("header") as? UIView self.tableView.registerNib(UINib(nibName: "XIBSectionHeader", bundle:nil), forCellReuseIdentifier: "xibheader")

► 在 GitHub and additional details on Swift Recipes 上找到此解决方案。

Answer 3

我最终使用 this tutorial 解决了它，它主要由以下内容组成 （适应我的示例）：

创建 SectionHeaderView class 子 class 是 UIView.
创建 SectionHeaderView.xib 文件并将其 File's Owner 的 CustomClass 设置为 SectionHeaderView class.
在 .m 文件中创建一个 UIView 属性，例如：@property (strong, nonatomic) IBOutlet UIView *viewContent;
将 .xib 的 View 连接到这个 viewContent 插座。

添加如下所示的初始化方法：

+ (instancetype)header {

    SectionHeaderView *sectionHeaderView = [[SectionHeaderView alloc] init];

    if (sectionHeaderView) { // important part
        sectionHeaderView.viewContent = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:sectionHeaderView options:nil] firstObject];

        [sectionHeaderView addSubview:sectionHeaderView.viewContent];

        return sectionHeaderView;
    }

    return nil;
}

然后，我在 .xib 文件中添加了一个 UILabel 并将其连接到 labelCategoryName 插座并在 SectionHeaderView 中实现了 setCategoryName: 方法class 像这样：

- (void)setCategoryName:(NSString *)categoryName {

    self.labelCategoryName.text = categoryName;
}

然后我像这样实现了 tableView:viewForHeaderInSection: 方法：

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

    SectionHeaderView *sectionHeaderView = [SectionHeaderView header];

    [sectionHeaderView setCategoryName:self.categoriesNames[section]];

    return sectionHeaderView;
}

终于成功了。每个部分都有自己的名称，而且 UIImageView 也会正确显示。

希望它能帮助像我一样在网络上一遍又一遍地遇到同样错误解决方案的其他人。

Answer 4

解决方法很简单

创建一个xib，根据你的文档制作UI 然后在 viewForHeaderInSection 中获取 xib

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

        NSArray *nibArray = [[NSBundle mainBundle] loadNibNamed:@"HeaderView" owner:self options:nil];

       HeaderView *headerView = [nibArray objectAtIndex:0];

    return headerView;
}

在 Interface Builder 中设计 UITableView 的部分 header

Design UITableView's section header in Interface Builder

iphone

objective-c

interface-builder

uitableview

ios