自定义UITableView中的标头 [英] Customize header in UITableView

问题描述

我正在尝试自定义UITableView中的标题.我无法在情节提要中做到这一点，所以我开始添加UIView和UILabel.

I'm trying to customize header in section in UITableView. I couldn't find to do it in storyboard so I started adding UIView and 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的方法.我该怎么做?每当我更改字体和大小时，它是否总是会更改?

I am looking for a way to locate UILabel vertically and horizontally center of the view. How would I do that? Would it always change whenever I change the font and size?

此外，无论如何，我可以在情节提要中做到这一点吗?以编程方式制作标头真的很困难.

Also, would there by anyway I can do this in storyboard? It is really hard to make header programmatically.

推荐答案

您可以在故事板上的UITableView上拖动UIView.该视图将自动添加为UITableView Header.请参见下图中的视图层次结构.

You can drag a UIView on your UITableView in your storyboard. The view will be added as your UITableView Header automatically. See the view hierarchy in the picture below.

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

Next create a UILabel in your header view and set the auto layout constraints:

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

您最终会得到这样的东西:

You will end up with something like this:

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

Editing my answer in order to reply to your comment. If you want to have a custom header view for every section you can override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? like you are already doing.

然后创建一个 @IBOutlet UIView * headerView; ，您将在上述的委托方法中返回该代码.转到情节提要，然后将UIView从对象选项板拖到 UIViewController/UITableViewController 的顶部栏中(请参见所附图像).

Then create a @IBOutlet UIView *headerView; which you will return in the delegate method mentioned above. Go to your storyboard and drag a UIView from the object palette to the top bar of your UIViewController/UITableViewController (see the attached image).

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

Next connect your outlet to the created UIView. You can design your view in storyboard afterwards and add an IBOutlet for your UILabel in order to update its text content for every section header view you create.

这篇关于自定义UITableView中的标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！