在 UITableView 中自定义标题

Question

我正在尝试自定义 UITableView 部分中的标题。我在故事板中找不到这样做，所以我开始添加 UIView 和 UILabel。

这是我的代码：

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView(frame: CGRectMake(0,0, tableView.frame.size.width, 60))
    headerView.backgroundColor = UIColor.cyanColor()
    headerView.layer.borderColor = UIColor.whiteColor().CGColor
    headerView.layer.borderWidth = 1.0;

    let headerLabel = UILabel(frame: CGRectMake(5,2, tableView.frame.size.width - 5, 30))
    headerLabel.text = sectionTitle  (this is a variable)
    headerLabel.textAlignment = NSTextAlignment.Center
    headerLabel.font = UIFont(name: "AvenirNext", size: 18)
    headerLabel.textAlignment = NSTextAlignment.Center;
    headerView.addSubview(headerLabel)

    return headerView
    }

func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 60
    }

它使视图如下所示：

我正在寻找一种方法来垂直和水平定位视图中心的 UILabel。我该怎么做？每当我更改字体和大小时，它总是会改变吗？

另外，无论如何我可以在情节提要中做到这一点吗？以编程方式制作标题真的很难。

Answer 1

您可以在情节提要中的 UITableView 上拖动 UIView。该视图将自动添加为您的 UITableView 标题。请参阅下图中的视图层次结构。

接下来在标题视图中创建一个 UILabel 并设置自动布局约束：

• 在超级视图中垂直居中
• 在超级视图中水平居中

你会得到这样的结果：

编辑：

编辑我的答案以回复您的评论。 如果您想为每个部分拥有一个自定义标题视图，您可以像您已经在做的那样覆盖func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?。

然后创建一个@IBOutlet UIView *headerView;，您将在上面提到的委托方法中返回它。 转到您的故事板并将 UIView 从对象调色板拖动到您的UIViewController/UITableViewController 的顶部栏（请参见附图）。

接下来将您的插座连接到创建的UIView。之后您可以在故事板中设计您的视图，并为您的UILabel 添加一个IBOutlet，以便为您创建的每个节标题视图更新其文本内容。

Answer 2

只需创建一个自定义视图并以您喜欢的方式提供布局约束。

例如：

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
    {
        UIView *container = [UIView new];
        UILabel *label = [UILabel new];
        label.translatesAutoresizingMaskIntoConstraints = NO;
        [container addSubview:label];
        [container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(20)-[label]-(10)-|" options:0 metrics:nil  views:@{@"label" : label }]];
        [container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(15)-[label]-(3)-|" options:0 metrics:nil   views:@{@"label" : label}]];

        label.text = [NSString stringWithFormat:@"Section %ld", section];
        return container;   
    }

此外，您可以将此代码放在单独的类中，并且可以在 XIB 中布局视图。

斯威夫特：

let xConstraint = NSLayoutConstraint(item: label, attribute: .CenterX, 
                                   relatedBy: .Equal,
                                      toItem: container, attribute: .CenterX, 
                                  multiplier: 1.0, constant: 0.0);
container.addConstraint(xConstraint);

let yConstraint = NSLayoutConstraint(item: label, attribute: .CenterY, 
                                   relatedBy: .Equal, 
                                   toItem: container, attribute: .CenterY, 
                                  multiplier: 1.0, constant: 0.0);
container.addConstraint(yConstraint);

let hConstraint = NSLayoutConstraint(item: label, attribute: .Height, 
                                   relatedBy: .Equal,
                                      toItem: container,attribute: .Height, 
                                  multiplier: 1.0, constant: 0.0);
container.addConstraint(hConstraint);

let wConstraint = NSLayoutConstraint(item: label, attribute: .Width, 
                                   relatedBy: .Equal,
                                      toItem: container, attribute: .Width, 
                                  multiplier: 1.0, constant: 0.0);
container.addConstraint(wConstraint);

Answer 3

情节提要中不能使用表头，但是如果需要自定义，则需要创建自定义类及其对应的 xib 文件