Wie lege ich zwei Ansichten an der gleichen Position mit "Auto Layout Visual Format"?

Question

Ich möchte zwei Ansichten an der gleichen Position mit "Auto Layout Visual Format" in Swift, wie mache ich das auf elegante Weise?

Ich war erfolgreich mit NSLayoutConstraint, aber ich hoffe, ich kann immer noch eine elegante Art und Weise mit visuellen Format finden.

Mein Code NSLayoutConstraint mit:

NSLayoutConstraint(item: greenView, attribute: .Left, relatedBy: .Equal, toItem: redView, attribute: .Left, multiplier: 1.0, constant: 0).active = true 
     NSLayoutConstraint(item: greenView, attribute: .Top, relatedBy: .Equal, toItem: redView, attribute: .Top, multiplier: 1.0, constant: 0).active = true 
     NSLayoutConstraint(item: greenView, attribute: .Right, relatedBy: .Equal, toItem: redView, attribute: .Right, multiplier: 1.0, constant: 0).active = true 
     NSLayoutConstraint(item: greenView, attribute: .Bottom, relatedBy: .Equal, toItem: redView, attribute: .Bottom, multiplier: 1.0, constant: 0).active = true 

Answer 1

Die Visuelle Format Sprache können nicht für jeden möglichen Fall verwendet werden. Ich glaube, dass die Aneinanderreihung der beiden Ansichten ein solcher Fall ist.

Ich würde Sie Anker verwenden Layout vorschlagen stattdessen wie folgt aus:

override func viewDidLoad() { 
    super.viewDidLoad() 

    let redView = UIView() 
    redView.backgroundColor = .redColor() 
    redView.translatesAutoresizingMaskIntoConstraints = false 

    view.addSubview(redView) 

    let greenView = UIView() 
    greenView.backgroundColor = .greenColor() 
    greenView.translatesAutoresizingMaskIntoConstraints = false 

    view.addSubview(greenView) 

    let redHoriz = NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[redView]-20-|", options: [], metrics: nil, views: ["redView": redView]) 
    NSLayoutConstraint.activateConstraints(redHoriz) 

    let redVert = NSLayoutConstraint.constraintsWithVisualFormat("V:|-50-[redView]-50-|", options: [], metrics: nil, views: ["redView": redView]) 
    NSLayoutConstraint.activateConstraints(redVert) 

    // Set greenView to occupy same space as the redView 
    greenView.leftAnchor.constraintEqualToAnchor(redView.leftAnchor).active = true 
    greenView.rightAnchor.constraintEqualToAnchor(redView.rightAnchor).active = true 
    greenView.topAnchor.constraintEqualToAnchor(redView.topAnchor).active = true 
    greenView.bottomAnchor.constraintEqualToAnchor(redView.bottomAnchor).active = true 
} 

---

Die Visuelle Format Sprache können Sie Teile der Ansichten auszurichten. Zum Beispiel können Sie die Oberseiten der Unterseiten von zwei Ansichten ausrichten, indem Sie [.AlignAllTop, .AlignAllBottom] als das options Argument von constraintsWithFormat übergeben. Sie können jedoch nur Werte ausrichten, die senkrecht zur Richtung des visuellen Formats sind. Wenn Sie also ein horizontales Layout angeben, können Sie die Oberseiten und Unterseiten der Ansichten ausrichten. Wenn Sie ein vertikales Layout angeben, können Sie die linken und Rechte ausrichten.

Sie können zwei Ansichten ausrichten, indem Sie zwei zusätzliche Ansichten einfügen. In dem Beispiel unten, nimmt die blaue Ansicht, um die oben und untere Ausrichtung der roten Ansicht, und die gelbe Ansicht nimmt die und rechts Ausrichtung der roten Ansicht von links. Dann wird die grüne Ansicht ausgerichtet auf die oben und Boden der blauen Ansicht und die links und rechts der gelben Ansicht, so dass es auf die rote Ansicht ausgerichtet ist.

Schließlich, das Verstecken der blauen und gelben Ansichten lässt Sie mit dem Setup, das Sie wünschen.

let redView = UIView() 
    redView.backgroundColor = .redColor() 
    redView.translatesAutoresizingMaskIntoConstraints = false 

    view.addSubview(redView) 

    let greenView = UIView() 
    greenView.backgroundColor = .greenColor() 
    greenView.translatesAutoresizingMaskIntoConstraints = false 

    view.addSubview(greenView) 

    let blueView = UIView() 
    blueView.translatesAutoresizingMaskIntoConstraints = false 
    blueView.backgroundColor = .blueColor() 
    blueView.hidden = true 

    view.addSubview(blueView) 

    let yellowView = UIView() 
    yellowView.translatesAutoresizingMaskIntoConstraints = false 
    yellowView.backgroundColor = .yellowColor() 
    yellowView.hidden = true 

    view.addSubview(yellowView) 

    let redHoriz = NSLayoutConstraint.constraintsWithVisualFormat("H:|-80-[redView]-80-|", options: [], metrics: nil, views: ["redView": redView]) 
    NSLayoutConstraint.activateConstraints(redHoriz) 

    let redVert = NSLayoutConstraint.constraintsWithVisualFormat("V:|-80-[redView]-80-|", options: [], metrics: nil, views: ["redView": redView]) 
    NSLayoutConstraint.activateConstraints(redVert) 

    let blueHorizVert = NSLayoutConstraint.constraintsWithVisualFormat("H:[redView][blueView]|", options: [.AlignAllTop, .AlignAllBottom], metrics: nil, views: ["redView": redView, "blueView": blueView]) 
    NSLayoutConstraint.activateConstraints(blueHorizVert) 

    let yellowHorizVert = NSLayoutConstraint.constraintsWithVisualFormat("V:[redView][yellowView]|", options: [.AlignAllLeft, .AlignAllRight], metrics: nil, views: ["redView": redView, "yellowView": yellowView]) 
    NSLayoutConstraint.activateConstraints(yellowHorizVert) 

    let greenTopBottom = NSLayoutConstraint.constraintsWithVisualFormat("H:[greenView][blueView]|", options: [.AlignAllTop, .AlignAllBottom], metrics: nil, views: ["greenView": greenView, "blueView": blueView]) 
    NSLayoutConstraint.activateConstraints(greenTopBottom) 

    let greenLeftRight = NSLayoutConstraint.constraintsWithVisualFormat("V:[greenView][yellowView]|", options: [.AlignAllLeft, .AlignAllRight], metrics: nil, views: ["greenView": greenView, "yellowView": yellowView]) 
    NSLayoutConstraint.activateConstraints(greenLeftRight) 

So Sie können tun es mit VFL, aber es ist nicht elegant. Ich würde vorschlagen, dass Sie bei der Verwendung von Ankern bleiben.

Answer 2

Ich würde Echo what vacawama said in his excellent answer über die Verwendung von Layout-Anker. Es ist wahrscheinlich so klar und elegant wie die native API, aber bitte beachten Sie, dass es iOS 9 und höher erfordert.

Zum Zwecke der Code Organisation, würde Ich mag statt vorzuschlagen für knappere Code suchen, organisieren Sie den Code in Methoden und/oder Erweiterungen, zum Beispiel:

extension UIView { 

    func constraintsAligningAllEdges(toView view2: UIView) -> [NSLayoutConstraint] { 

     return [ topAnchor.constraintEqualToAnchor(view2.topAnchor), 
       bottomAnchor.constraintEqualToAnchor(view2.bottomAnchor), 
       leadingAnchor.constraintEqualToAnchor(view2.leadingAnchor), 
       trailingAnchor.constraintEqualToAnchor(view2.trailingAnchor) ] 
    } 
} 

es verwenden würde wie folgt aussehen :

NSLayoutConstraint.activateConstraints(greenView.constraintsAligningAllEdges(toView: redView)) 

... oder vielleicht eine Klassenfunktionserweiterung für NSLayoutConstraint machen.

Zum Thema Visual Format Language, vacawama brachte auch eine sehr interessante Verwendung der Layout-Optionen. Hier ist eine andere Art und Weise, um das gleiche Ziel zu erreichen:

let views = ["greenView" : greenView, "redView" : redView] 

NSLayoutConstraint.activateConstraints(
    NSLayoutConstraint.constraintsWithVisualFormat("H:[greenView]-(0@1)-[redView]", options: [.AlignAllTop, .AlignAllBottom], metrics: nil, views: views) + 
    NSLayoutConstraint.constraintsWithVisualFormat("V:[greenView]-(0@1)-[redView]", options: [.AlignAllLeading, .AlignAllTrailing], metrics: nil, views: views) 
) 

Was ich hier getan ist, anstatt zusätzliche Ansichten der Einführung, ich zwei Fremd Einschränkungen eingeführt haben, eine zwischen grünen Boden & rot oben, ein anderer zwischen grün Trailing & oben führenden. Beide haben jedoch die niedrigste Priorität von 1, so dass normalerweise andere Einschränkungen die Größe/Position beider Ansichten bestimmen. Sie sollten keinen Schaden anrichten.

Ist das etwas eleganter? Ich weiß nicht, aber persönlich denke ich, dass Layout-Anker für mich mehr Sinn machen, und Frameworks von Drittanbietern wie SnapKit sind auch gute Optionen.