以編程方式向UIImage添加約束的問題 迅速

Question

如何為圖像設置約束，使其位於titleLabel以下tableview擴展的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值，直到滿意為止。