Как использовать Visual Format Language для установки ограничений в Swift?

Question

У меня есть View Controller с панелью навигации, я пытаюсь реализовать панель меню прямо под панелью навигации, для которой у меня есть отдельный файл класса (UIView). После добавления строки меню я хочу добавить UIImageView точно в вертикальном центре представления строки меню, а не в виде Super View, и иметь высоту, равную высоте представления панели меню. Я использую Visual Format Language. Я не совсем уверен, как упомянуть имя вида и как ограничить высоту изображения и поместить его в центр именованного вида. Кто-нибудь может мне помочь?

Ниже приведены фрагменты кода ...

// MenuBar.swift

class MenuBar: UIView {


override init(frame: CGRect) {

    super.init(frame: frame)
    print("created") 

    let imageLogo = UIImage(named: "Logo")
    let imageView = UIImageView(image: imageLogo)
    self.addSubview(imageView)
    self.addConstraintWithFormat("H:|[v0]|", views: imageView)
    self.addConstraintWithFormat("V:|[v0(100)]|", views: imageView)
    backgroundColor = UIColor.red
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

// Расширение UIView для функции addConstraintWithFormat(- format:, views:)

extension UIView{
func addConstraintWithFormat(_ format : String, views : UIView...) {

    var viewsDictionary = [String : UIView]()

    for(index, view) in views.enumerated(){
        let key = "v\(index)"
        view.translatesAutoresizingMaskIntoConstraints = false
        viewsDictionary[key] = view
    }
    addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: viewsDictionary))

}

Answer 1

Visual Format Language позволяет применять программные ограничения с использованием визуальных синтаксических строк. Согласно документации Apple идея заключается в том, что текст визуально соответствует макету.

Давайте разберем синтаксическую часть для лучшего понимания:

H: (Horizontal) //horizontal direction
V: (Vertical) //vertical direction
| (pipe) //superview
- (dash) //standard spacing (generally 8 points)
[] (brackets) //name of the object (uilabel, unbutton, uiview, etc.)
() (parentheses) //size of the object
== equal widths //can be omitted
-16- non standard spacing (16 points)
<= less than or equal to
>= greater than or equal to
@250 priority of the constraint //can have any value between 0 and 1000

Теперь, чтобы применить ограничение к представлению с использованием языка визуальных форматов, нам нужно сделать translatesAutoresizingMaskIntoConstraints false для представления, к которому мы собираемся применить ограничения:

imageView.translatesAutoresizingMaskIntoConstraints = false

тогда нам нужно подготовить словарь для всех представлений, которые будут использоваться в VFL, например:

let viewDictionary = NSDictionaryOfVariableBindings(imageView)

затем создайте горизонтальные и вертикальные ограничения с использованием строки визуального формата в соответствии с правилами, описанными выше:

let horizontalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "H:|-[imageView]-|", options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: viewsDictionary)
let verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "V:|-[imageView(100)]-|", options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: viewsDictionary)

Теперь добавьте эти константы к своему суперпредставлению как:

view.addConstraints(horizontalConstraints)
view.addConstarints(verticalConstraints)

PS: Если вы хотите сделать динамическую ширину / высоту представления, вам нужно создать словарь матриц, передать его в metrics: вместо установки nil и затем использовать соответствующее имя ключа для значения. Например:

let metricDict = ["viewHeight":300]
let verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat: "V:|-[imageView(viewHeight)]-|", options: NSLayoutConstraint.FormatOptions(), metrics: metricDict, views: viewsDictionary)