wake-up-neo.com

Deaktivieren Sie den horizontalen Bildlauf in UIScrollView mit automatischem Layout

Ich möchte eine Ansicht nur mit vertikalem Bildlauf erstellen. Wie sich herausgestellt hat, ist es in IOs schwer zu erreichen. Ich habe diese Schritte gemacht:

1) Erstellen Sie UIViewController im Storyboard.

2) Fügen Sie in UIViewController innerhalb von View ScrollView hinzu und fügen Sie auf jeder Seite 0 Einschränkungen hinzu.

3) Hinzufügen von Elementen in der Bildlaufansicht als Ergebnis:  enter image description here

Nach dem Start meiner App funktioniert alles, aber:

1) Wie kann ich den horizontalen Bildlauf deaktivieren? Ich füge rechts nach rechts zu meiner scrollView + 0-Nebenbedingung nach rechts zu meinem uilabel hinzu (wie Sie aus einigen Gründen auf dem Bildschirm sehen, es ist nicht rechtsbündig, es hat eine andere Einschränkung, aber in der Eigenschaft setze ich Zwang = 0) und wie ich dachte, Beschriftungstext soll in meinem Bildschirm liegen, aber wenn ich die App starte, kann ich nach rechts scrollen, dh der öffnende Text wurde nicht umbrochen, und mein Bildlauf wurde nur an den Text angepasst Im Code: scrollView.contentSize = CGSize(UIScreen.mainScreen().bounds.width, height: 800), hat aber nicht geholfen.

2) Wenn ich zu viel scrolle, wird ein Leerzeichen angezeigt und das ist nicht cool. Wie kann ich das beheben?

19
Panich Maxim

1) Der horizontale Bildlauf wird automatisch aktiviert, wenn die Breite des Inhalts in scrollView mehr als die Breite von scrollView beträgt. Um ein horizontales Scrollen zu vermeiden, muss daher die Breite des Inhalts in scrollView kleiner oder gleich der scrollView-Breite sein.

Leading space und trailing space können den Ansichten keine bestimmte Breite zuweisen, sie strecken sie nur. In regulären Ansichten sind sie nicht länger als die Breite der Ansicht, aber ScrollView ist eine spezielle Ansicht mit einer unendlichen Inhaltsbreite. Daher ändern die Einschränkungen von trailing space und leading space in scrollView die Breite der Ansichten auf die maximal möglichen Werte (bei UILabel können Sie die Größe des Texts entsprechend anpassen).

Um horizontalen Bildlauf zu vermeiden, müssen Sie für jede Ansicht eine bestimmte Breite festlegen, die kleiner oder gleich der ScrollView-Breite ist. Die spezifische Breite der Ansichten kann mit width constraints festgelegt werden.

Anstatt jede Ansichtsbreite festzulegen, ist es viel besser, einen Ansichtscontainer hinzuzufügen und die Breite festzulegen, und die Ansichten werden nach Bedarf platziert.

Ansichtenhierarchie:

View
    -> ScrollView
        -> ContainerView
            -> UILabel
            -> UILabel
            -> ... other views that you need

Autolayout-Einschränkungen:

ScrollView
    -> leading space to View : 0
    -> trailing space to View : 0
    -> top space to View : 0
    -> bottom space to View : 0

Container View
    -> leading space to ScrollView : 0
    -> trailing space to ScrollView : 0
    -> top space to ScrollView : 0
    -> bottom space to ScrollView : 0
    -> width equal to ScrollView : 0

Um width equal constraint Strg + einzustellen, ziehen Sie von containerView nach scrollView.

 width equal constraint

2) Die vertikale Bildlauffunktion hängt von der Gesamthöhe des Inhalts ab. Leerzeichen können sein, wenn das letzte Element in containerView einen großen Wert von bottom space to superview hat.

Oder meinst du Bounce-Effekt? Sie können den vertikalen Sprung von scrollView deaktivieren.

58
ifau

Sie können dies auch einfach im Code tun. In meinem Fall habe ich eine UIStackView, die die einzige Unteransicht einer UIScrollView ist.

// Create the stack view
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
// Add things to the stack view....

// Add it as a subview to the scroll view
scrollView.addSubview(stackView)

// Use auto layout to pin the stack view's sides to the scroll view
NSLayoutConstraint.activate([
    stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
    scrollView.trailingAnchor.constraint(equalTo: stackView.trailingAnchor),

    stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
    scrollView.bottomAnchor.constraint(equalTo: stackView.bottomAnchor)
])

// Now make sure the thing doesn't scroll horizontally
let margin: CGFloat = 40

scrollView.contentInset = UIEdgeInsets(top: margin, left: margin, bottom: margin, right: margin)

scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true

let stackViewWidthConstraint = stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
stackViewWidthConstraint.constant = -(margin * 2)
stackViewWidthConstraint.isActive = true

Das NSLayoutConstraint.activate-Bit stammt von Dave DeLongs hervorragender UIView-Erweiterung hier: https://github.com/davedelong/MVCTodo/blob/master/MVCTodo/Extensions/UIView.Swift#L26

0