Question

如何为图像设置约束，使其位于以下表视图范围的titleLabel的正上方。

下面的代码当前在其下方显示一个titleLabel和一个messageLabel：

extension UITableView {
    func setEmptyView(title: String, message: String) {
        let emptyView = UIView(frame: CGRect(x: self.center.x, y: self.center.y, width: self.bounds.size.width, height: self.bounds.size.height))
        let titleLabel = UILabel()
        let messageLabel = UILabel()
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        messageLabel.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.textColor = UIColor.black
        titleLabel.font = UIFont(name: "HelveticaNeue-Bold", size: 25)
        messageLabel.textColor = UIColor.lightGray
        messageLabel.font = UIFont(name: "HelveticaNeue-Regular", size: 23)
        emptyView.addSubview(titleLabel)
        emptyView.addSubview(messageLabel)
        titleLabel.centerYAnchor.constraint(equalTo: emptyView.centerYAnchor).isActive = true
        titleLabel.centerXAnchor.constraint(equalTo: emptyView.centerXAnchor).isActive = true
        messageLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 20).isActive = true
        messageLabel.leftAnchor.constraint(equalTo: emptyView.leftAnchor, constant: 20).isActive = true
        messageLabel.rightAnchor.constraint(equalTo: emptyView.rightAnchor, constant: -20).isActive = true
        titleLabel.text = title
        messageLabel.text = message
        messageLabel.numberOfLines = 0
        messageLabel.textAlignment = .center
        // The only tricky part is here:
        self.backgroundView = emptyView
        self.separatorStyle = .none
    }
    func restore() {
        self.backgroundView = nil
        self.separatorStyle = .singleLine
    }
}

我尝试在下面添加代码，但并没有使其居中显示在左上方：

let emptyImage = UIImage()
emptyImage = false
emptyView.addSubview(emptyImage)
emptyImage.centerXAnchor.constraint(equalTo: emptyView.centerXAnchor).isActive = true
emptyImage.bottomAnchor(equalTo: titleLabel.topAnchor, constant: 20).isActive = true

图片是一个50x50左右的正方形

Answer 1

您需要添加一个UIImageView作为子视图，然后将其约束到标题标签。

尝试一下-将在标题视图上方居中添加一个图像视图，其宽度为50，高度等于其宽度（因此为50x50）：

extension UITableView {
    func setEmptyView(title: String, message: String) {
        let emptyView = UIView(frame: CGRect(x: self.center.x, y: self.center.y, width: self.bounds.size.width, height: self.bounds.size.height))
        emptyView.backgroundColor = .cyan
        let titleLabel = UILabel()
        let messageLabel = UILabel()
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        messageLabel.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.textColor = UIColor.black
        titleLabel.font = UIFont(name: "HelveticaNeue-Bold", size: 25)
        messageLabel.textColor = UIColor.lightGray
        messageLabel.font = UIFont(name: "HelveticaNeue-Regular", size: 23)
        emptyView.addSubview(titleLabel)
        emptyView.addSubview(messageLabel)
        titleLabel.centerYAnchor.constraint(equalTo: emptyView.centerYAnchor).isActive = true
        titleLabel.centerXAnchor.constraint(equalTo: emptyView.centerXAnchor).isActive = true
        messageLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 20).isActive = true
        messageLabel.leftAnchor.constraint(equalTo: emptyView.leftAnchor, constant: 20).isActive = true
        messageLabel.rightAnchor.constraint(equalTo: emptyView.rightAnchor, constant: -20).isActive = true
        titleLabel.text = title
        messageLabel.text = message
        messageLabel.numberOfLines = 0
        messageLabel.textAlignment = .center

        // start of add image view code
        let imgView = UIImageView()
        imgView.translatesAutoresizingMaskIntoConstraints = false
        if let img = UIImage(named: "s1") {
            imgView.image = img
        }
        emptyView.addSubview(imgView)
        NSLayoutConstraint.activate([
            imgView.bottomAnchor.constraint(equalTo: titleLabel.topAnchor, constant: 0.0),
            imgView.centerXAnchor.constraint(equalTo: titleLabel.centerXAnchor, constant: 0.0),
            imgView.widthAnchor.constraint(equalToConstant: 50.0),
            imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: 1.0),
            ])
        // end of add image view code

        // The only tricky part is here:
        self.backgroundView = emptyView
        self.separatorStyle = .none
    }
    func restore() {
        self.backgroundView = nil
        self.separatorStyle = .singleLine
    }
}

如果您希望图像视图在标题视图上方有一些间距，请在此行上设置常数（为负数）：

// this will add 20-pts vertical spacing between the 
// bottom of the image view and the top of the title label
imgView.bottomAnchor.constraint(equalTo: titleLabel.topAnchor, constant: -20.0),

编辑：如果要调整垂直位置，请更改此行：

titleLabel.centerYAnchor.constraint(equalTo: emptyView.centerYAnchor).isActive = true

对此：

titleLabel.centerYAnchor.constraint(equalTo: emptyView.centerYAnchor, constant: 20).isActive = true

并设置constant值，直到您满意为止。

以编程方式向UIImage添加约束的问题迅速

1 个答案: