web-dev-qa-db-de.com

Verwenden der Bildlaufansicht mit Autolayout Swift

Ich weiß, dass diese Frage oft gestellt wurde, aber dies ist ein Problem, mit dem ich seit langem zu kämpfen habe, und ich bin mir sicher, dass es auch andere gibt, selbst mit den aktuellen Antworten und Tutorials.

Beim Hinzufügen einer Scroll-Ansicht durchlaufe ich die folgenden Schritte:

  1. Fügen Sie eine Bildlaufansicht als Unteransicht der ursprünglichen Ansicht im Ansichts-Controller hinzu. Pin oben, links, rechts und unten. Sicherstellen, dass "Auf Ränder beschränken" nicht markiert ist.

  2. Fügen Sie eine UIView als Unteransicht der Bildlaufansicht hinzu. Pin obere, linke, rechte und untere Randbedingungen. 

  3. Fügen Sie eine Einschränkung für die gleiche Breite zwischen der Inhaltsansicht und der Ansichtssteuerungsansicht hinzu.

An diesem Punkt der App läuft die Inhaltsansicht nicht und die Scrollansicht nimmt den gesamten Bildschirm ein.

  1. Als Nächstes füge ich der Inhaltsansicht Elemente hinzu, die lediglich 4 UIViews enthalten, um alles zu testen. Ich gebe jedem UIView eine Einschränkung von oben, links und rechts. Und der letzte UIView eine untere Einschränkung.

Nicht zu diesem Zeitpunkt, wenn ich die App starte, nehmen die Inhaltsansicht und die Bildlaufansicht jeweils etwa die Hälfte des Bildschirms ein, und ich kann die Inhaltsansicht umblättern. Siehe Foto unten.

Ich habe jedes Tutorial befolgt, das ich finden kann, und habe versucht, alle SO - Antworten zu implementieren, die ich gefunden habe, aber es scheint nicht, dass es funktioniert. Wenn jemand auf dieses Problem gestoßen ist oder eine Lösung kennt, wäre Ihre Hilfe sehr dankbar!

Das Grün ist die Inhaltsansicht und das Blau ist die Bildlaufansicht

 enter image description here

Scroll-View- und Subview-Einschränkungen

 enter image description here

14
m1234

Mit Hilfe der anderen Antworten habe ich das herausgefunden, aber ich musste einige Anpassungen vornehmen, damit es so funktioniert, wie ich es wollte. Hier sind die Schritte, die ich unternommen habe:

  1. Fügen Sie eine Bildlaufansicht als Unteransicht der Hauptansicht hinzu.

  2. Wählen Sie die Bildlaufansicht aus, und deaktivieren Sie die Option "Auf Ränder beschränken", und befestigen Sie die oberen, linken, rechten und unteren Randbedingungen

  3. Fügen Sie eine UIView als Unteransicht der Bildlaufansicht hinzu. Nennen Sie diese Ansicht "Inhaltsansicht".

  4. Wählen Sie die Inhaltsansicht aus und markieren Sie die oberen, linken, rechten und unteren Einschränkungen. Fügen Sie dann eine horizontale Begrenzung für die Mitte hinzu.

  5. Klicken Sie anschließend in der Inhaltsansicht auf Weiter, und fügen Sie die Beschränkungen für die gleiche Breite und Höhe ein.

  6. Fügen Sie die gewünschten Elemente in der Inhaltsansicht hinzu. Abhängigkeiten von oben, links, rechts und der Höhe an die soeben hinzugefügten Elemente werden angehängt.

  7. Am untersten Element in der Inhaltsansicht wird eine untere Einschränkung angezeigt. Wählen Sie diese Einschränkung und ändern Sie in "Größer als oder gleich". Ändern Sie die Konstante in 20.

Die den Elementen in der Inhaltsansicht hinzugefügten Einschränkungen sind sehr wichtig, insbesondere die dem letzten Element hinzugefügte untere Einschränkung. Sie helfen bei der Bestimmung der Inhaltsgröße der Bildlaufansicht. Wenn Sie die untere Einschränkung wie beschrieben hinzufügen, kann die Ansicht einen Bildlauf durchführen, wenn der Inhalt zu groß ist, um in den Bildschirm zu passen, und der Bildlauf wird deaktiviert, wenn der Inhalt in den Bildschirm passt.

50
m1234

Ich habe eine einfache Ansicht im Code erstellt, die selbsterklärend sein sollte und Ihnen helfen könnte. Es beschreibt alle Schritte, die Sie zum Durchführen der Bildlaufansicht ausführen müssen. 

Wenn etwas nicht klar ist, können Sie einen Kommentar hinterlassen.

import UIKit

class TutorialView: UIView {

    lazy var sv: UIScrollView = {
        let object = UIScrollView()

        object.backgroundColor = UIColor.whiteColor()
        object.translatesAutoresizingMaskIntoConstraints = false
        return object
    }()

    lazy var tutorialPageOne: UIView = {
        let object = UIView(frame: UIScreen.mainScreen().bounds)
        object.translatesAutoresizingMaskIntoConstraints = false
        object.backgroundColor = UIColor.cyanColor()

        return object
    }()

    lazy var tutorialPageTwo: UIView = {
        let object = UIView(frame: UIScreen.mainScreen().bounds)
        object.translatesAutoresizingMaskIntoConstraints = false
        object.backgroundColor = UIColor.lightGrayColor()

        return object
    }()

    lazy var tutorialPageThree: UIView = {
        let object = UIView(frame: UIScreen.mainScreen().bounds)
        object.translatesAutoresizingMaskIntoConstraints = false
        object.backgroundColor = UIColor.redColor()

        return object
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.addSubview(self.sv)
        self.sv.addSubview(self.tutorialPageOne)
        self.sv.addSubview(self.tutorialPageTwo)
        self.sv.addSubview(self.tutorialPageThree)
    }

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

    override func layoutSubviews() {
        super.layoutSubviews()

        let vc = nextResponder() as? UIViewController
        let mainSreenWidth = UIScreen.mainScreen().bounds.size.width
        let mainScreenHeight = UIScreen.mainScreen().bounds.size.height

        NSLayoutConstraint.activateConstraints([
            self.sv.topAnchor.constraintEqualToAnchor(vc?.topLayoutGuide.bottomAnchor),
            self.sv.leadingAnchor.constraintEqualToAnchor(self.leadingAnchor),
            self.sv.bottomAnchor.constraintEqualToAnchor(vc?.bottomLayoutGuide.topAnchor),
            self.sv.trailingAnchor.constraintEqualToAnchor(self.trailingAnchor)
        ])

        NSLayoutConstraint.activateConstraints([
            self.tutorialPageOne.widthAnchor.constraintEqualToConstant(mainSreenWidth),
            self.tutorialPageOne.heightAnchor.constraintEqualToConstant(mainScreenHeight),
            self.tutorialPageOne.topAnchor.constraintEqualToAnchor(self.sv.topAnchor),
            self.tutorialPageOne.leadingAnchor.constraintEqualToAnchor(self.sv.leadingAnchor),
            self.tutorialPageOne.bottomAnchor.constraintEqualToAnchor(self.sv.bottomAnchor)
        ])


        NSLayoutConstraint.activateConstraints([
            self.tutorialPageTwo.widthAnchor.constraintEqualToConstant(mainSreenWidth),
            self.tutorialPageTwo.heightAnchor.constraintEqualToConstant(mainScreenHeight),
            self.tutorialPageTwo.topAnchor.constraintEqualToAnchor(self.sv.topAnchor),
            self.tutorialPageTwo.leadingAnchor.constraintEqualToAnchor(self.tutorialPageOne.trailingAnchor),
            self.tutorialPageTwo.bottomAnchor.constraintEqualToAnchor(self.sv.bottomAnchor)
        ])

        NSLayoutConstraint.activateConstraints([
            self.tutorialPageThree.widthAnchor.constraintEqualToConstant(mainSreenWidth),
            self.tutorialPageThree.heightAnchor.constraintEqualToConstant(mainScreenHeight),
            self.tutorialPageThree.topAnchor.constraintEqualToAnchor(self.sv.topAnchor),
            self.tutorialPageThree.leadingAnchor.constraintEqualToAnchor(self.tutorialPageTwo.trailingAnchor),
            self.tutorialPageThree.bottomAnchor.constraintEqualToAnchor(self.sv.bottomAnchor),
            self.tutorialPageThree.trailingAnchor.constraintEqualToAnchor(self.sv.trailingAnchor)
        ])

    }
}
4

An diejenigen, die ein Beispiel für UIScrollView und AutoLayout suchen. Ich verwende SnapKit, es funktioniert für Xcode 9, Swift 3

    let scrollView = UIScrollView()
    view.addSubview(scrollView)
    scrollView.snp.makeConstraints { (make) in
        make.edges.equalTo(view).inset(UIEdgeInsetsMake(0, 0, 0, 0))
        make.top.left.right.equalTo(view)
    }

    let view1 = UIView()
    view1.backgroundColor = UIColor.red
    scrollView.addSubview(view1)
    view1.snp.makeConstraints { (make) in
        make.top.equalTo(scrollView.snp.top).offset(0)
        make.left.equalTo(scrollView.snp.left).offset(0)
        make.width.equalTo(scrollView.snp.width)
        make.height.equalTo(300)
    }

    let view2 = UIView()
    view2.backgroundColor = UIColor.blue
    scrollView.addSubview(view2)
    view2.snp.makeConstraints { (make) in
        make.top.equalTo(view1.snp.bottom)
        make.left.equalTo(scrollView)
        make.width.equalTo(scrollView)
        make.height.equalTo(300)
    }

    let view3 = UIView()
    view3.backgroundColor = UIColor.green
    scrollView.addSubview(view3)
    view3.snp.makeConstraints { (make) in
        make.top.equalTo(view2.snp.bottom)
        make.left.equalTo(scrollView)
        make.width.equalTo(scrollView)
        make.height.equalTo(100)
        make.bottom.equalTo(scrollView.snp.bottom).offset(-20)
    }
2
nmh

Ich habe viel Zeit damit verbracht, dies herauszufinden und es ist ziemlich einfach. Hier ist die Lösung. Folge diesen Schritten

  • Fügen Sie ScrollView als Unteransicht der Hauptansicht hinzu
  • Pin oben, links, rechts, unten, horizontal im Container, vertikal im Container.
  • Fügen Sie die Containeransicht als Unteransicht der Bildlaufansicht hinzu
  • Pin oben, links, rechts, unten, horizontal im Container, vertikal im Container.
  • Fügen Sie Ihre Unteransichten in der Containeransicht mit den gewünschten Einschränkungen hinzu.
  • Stellen Sie die Inhaltsgröße der Bildlaufansicht entsprechend ein.

Scroll weiter :) 

2
Fahad Azeem

Folge diesen Schritten:

  1. Fügen Sie eine Bildlaufansicht als Unteransicht der Hauptansicht hinzu.
  2. Wählen Sie die Bildlaufansicht aus und deaktivieren Sie "An Ränder beschränken" und binden Sie die oberen, linken, rechten und unteren Randbedingungen ein
  3. Fügen Sie eine UIView als Unteransicht der Bildlaufansicht hinzu. Nennen Sie diese Ansicht "Inhaltsansicht".
  4. Legen Sie die Einschränkung für die Inhaltsansicht (oben, unten, nach vorne und nach hinten) auf (0,0,0,0) fest.
  5. Jetzt können Sie eine Hierarchie wie diese Ansicht sehen -> Bildlaufansicht -> Ansicht (Inhaltsansicht)
  6. Unsere "Inhaltsansicht" muss gleiche Breite und gleiche Höhe mit der übergeordneten Ansicht haben.
  7. Wählen Sie Höhenbeschränkung der Inhaltsansicht und setzen Sie Priorität mit niedrig (250) .
  8. Jetzt können Sie Ihre Ansicht in beliebiger Höhe gestalten.
  9. Fügen Sie alle Elemente hinzu, die Sie in der Inhaltsansicht benötigen. Verbinde die oberen, linken, rechten und höheNebenbedingungen mit den Elementen, die gerade hinzugefügt wurden.
  10. Herzlichen Glückwunsch, Sie sind mit der Bildlaufansicht mit Autolayout fertig.
2

Sie möchten nur visuell anzeigen. Wenn Sie eine Ansicht erstellen möchten, die größer als ViewController ist, können Sie die Höhe des ViewController-Formularinspektors vergrößern. Wählen Sie Simulated Size to Freeform und geben Sie die gewünschte Höhe wie in der Abbildung ein. Jetzt hat Ihr viewController die angegebene Höhe.

 enter image description here

  1. Ziehen Sie Scrollview in Ihren ViewController und wenden Sie vier Einschränkungen an (Leading, Trailing, Top und Bottom)  enter image description here

  2. Ziehen Sie nun eine Ansicht mit derselben Breite und Höhe wie ScrollView in ScrollView und legen Sie 6 Einschränkungen fest (Leading, Trailing, Top, Bottom, FixHeight, WidthToScrollView). In meinem Fall habe ich 15 L und T Abstand und andere Margen entsprechend. Ihre Ansicht hat möglicherweise einen anderen Rand, aber die Einschränkungen sollten gleich sein.

 enter image description here .  enter image description here

  1. Jetzt können Sie Ihre Ansichten entsprechend ziehen und Einschränkungen festlegen. Ich habe zwei Ansichten in die Ansicht.

 enter image description here

  1. Für die 1. Ansicht setze ich Leading, Top, Trailing und möchte eine feste Höhe haben. Für 2. setze ich Leading, Bottom, Trailing und möchte feste Höhe haben.

 enter image description here .  enter image description here

  1. Glückwunsch !. Sie haben jetzt alle Ihre App ausgeführt.

 enter image description here  enter image description here

1
GSK

Ich weiß am besten, wie ich eine Benutzeroberfläche in einer ScrollView ohne Code erstellen kann: 

  1. Fügen Sie Ihrem uiviewcontroller Ihr scrollView mit den richtigen Einschränkungen zwischen ihm und seiner übergeordneten Ansicht hinzu.
  2. Fügen Sie der Bildlaufansicht eine Klammeransicht hinzu.
  3. "Brace-Ansicht" sollte ausgeblendet sein, da sie nicht von Ihrer endgültigen Benutzeroberfläche getrennt ist.
  4. Make left, top, right enthält zwischen "Klammeransicht" und der UIScrollView. Machen Sie eine Höhenbeschränkung. (Höhenbeschränkung kann eine beliebige Zahl sein). Richten Sie das Zentrum x an den UIScrollView-Einschränkungen aus.

  5. Fügen Sie Ihre endgültige Benutzeroberfläche unter der "Klammeransicht" hinzu.

  6. Fügen Sie eine obere Einschränkung zwischen der ersten endgültigen Benutzeroberflächenansicht und der "geschweiften Ansicht" hinzu.
  7. Verknüpfen Sie alle Ihre letzten UIs zusammen mit den oberen oder unteren Einschränkungen.
  8. Fügen Sie die endgültigen UI-Einschränkungen hinzu.
  9. Fügen Sie die unteren Randbedingungen zwischen der letzten letzten UI-Ansicht und der Bildlaufansicht hinzu. (Diese constraint.constant ist wichtig, da sie von Ihrer endgültigen Benutzeroberfläche getrennt ist.).

Hier ist ein schnelles github Projekt Beispiel. 

 enter image description here  enter image description here

0
Randel G. Smith

Die UIScrollView-Klasse führt einen Bildlauf durch, indem der Ursprung der Grenzen geändert wird. Damit dies mit dem automatischen Layout funktioniert, bedeuten die oberen, linken, unteren und rechten Kanten einer Bildlaufansicht jetzt die Kanten der Inhaltsansicht.

Die Einschränkungen für die Unteransichten der Bildlaufansicht müssen eine zu füllende Größe ergeben, die dann als Inhaltsgröße der Bildlaufansicht interpretiert wird. (Dies sollte nicht mit der für Auto Layout verwendeten Methode intrinsicContentSize verwechselt werden.) Um die Größe des Bildlaufs der Ansicht mit Auto Layout zu ändern, müssen Einschränkungen entweder die Breite und Höhe der Bildlaufansicht oder die Kanten der Bildlaufansicht explizit sein gebunden an Ansichten außerhalb seines Teilbaums.

Siehe auch ein Technote von Apple zu diesem Problem: https://developer.Apple.com/library/ios/technotes/tn2154/_index.html

0
Joride

Wie bei @ m1234 müssen Sie jedoch die gleichen Höhen freigeben, ansonsten funktioniert das Scrollen nicht - meine Methode wäre wie folgt:

  1. Fügen Sie eine Bildlaufansicht als Unteransicht der Hauptansicht hinzu.

  2. Wählen Sie die Bildlaufansicht aus, und deaktivieren Sie die Option "Auf Ränder beschränken", und befestigen Sie die oberen, linken, rechten und unteren Randbedingungen

  3. Fügen Sie eine UIView als Unteransicht der Bildlaufansicht hinzu. Nennen Sie diese Ansicht "Inhaltsansicht".

  4. Wählen Sie die Inhaltsansicht aus und markieren Sie die oberen, linken, rechten und unteren Einschränkungen. Fügen Sie dann eine horizontale Begrenzung für die Mitte hinzu.

  5. Klicken Sie als nächstes von der Inhaltsansicht zur Hauptansicht eine Einschränkung für die gleiche Breite.

  6. Fügen Sie die gewünschten Elemente in der Inhaltsansicht hinzu. Abhängigkeiten von oben, links, rechts und der Höhe an die soeben hinzugefügten Elemente werden angehängt.

  7. Am untersten Element in der Inhaltsansicht wird eine untere Einschränkung angezeigt. Wählen Sie diese Einschränkung und ändern Sie in "Größer als oder gleich". Ändern Sie die Konstante in 20.

0
Bowcaps