iOS => UIScrollView

Erstellen Sie eine UIScrollView

Erstellen Sie eine Instanz von UIScrollView mit einem CGRect als Frame.

Schnell

let scrollview = UIScrollView.init(frame: CGRect(x: 0, y: 0, width: 320, height: 400))

Ziel c

UIScrollView *scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 400)];

Blättern Sie in die Inhaltsgröße

Die contentSize Eigenschaft muss auf die Größe des scrollbaren Inhalts festgelegt werden. Dies gibt die Größe des scrollbaren Bereichs an. Bildlauf ist sichtbar, wenn der bildlauffähige Bereich, dh contentSize größer ist als die UIScrollView .

Mit Autolayout:

Wenn der Inhalt der Bildlaufansicht mit Autolayout eingerichtet wird, muss er explizit sowohl vertikal als auch horizontal dimensioniert sein und alle 4 Kanten müssen an die Bildlaufansicht angeheftet sein. Auf diese Weise wird contentSize automatisch basierend auf dem Inhalt der contentSize berechnet und auch aktualisiert, wenn das Layout des Inhalts geändert wird.

Manuell:

Schnell

scrollview.contentSize = CGSize(width: 640, height: 800)

Ziel c

scrollview.contentSize = CGSizeMake(640, 800);

ScrollView mit AutoLayout

Einfache Schritte zur Verwendung von ScrollView mit Autolayout.

Erstellen Sie ein neues Projekt mit Einzelansicht
Wählen Sie den Standard-Viewcontroller aus, und ändern Sie seine Bildschirmgröße vom Attribute-Inspector in iPhone-4inch.
Fügen Sie der Ansicht Ihres Viewcontrollers wie folgt eine Bildlaufansicht hinzu und setzen Sie die Hintergrundfarbe auf Blau

Fügen Sie Einschränkungen hinzu, wie im Bild unten gezeigt

Dazu müssen Sie einfach jede Kante des Bildlaufs in die Ansicht des Viewcontrollers stecken

Szenario 1:

Nun sagen wir, unser Inhalt ist riesig und wir möchten, dass er sowohl horizontal als auch vertikal scrollt.

Dafür,

Fügen Sie der Bildlaufansicht des Rahmens (0,0700,700) eine UIView hinzu. Erlaubt es orange Hintergrundfarbe, um ihn anders zu identifizieren.

Als nächstes kommt der wichtige Teil, wir müssen ihn horizontal und vertikal scrollen.

Wählen Sie die orange Ansicht aus und fügen Sie die folgenden Einschränkungen hinzu

Lassen Sie mich erklären, was wir oben gemacht haben.

Wir haben die Höhe und Breite auf 700 festgelegt.
Der nachstehende Speicherplatz wird auf scrollview = 0 gesetzt, wodurch dem ScrollView mitgeteilt wird, dass der Inhalt horizontal scrollbar ist.
Der untere Bereich wird auf scrollview = 0 gesetzt, wodurch dem ScrollView mitgeteilt wird, dass der Inhalt vertikal scrollbar ist.

Führen Sie nun das Projekt aus und überprüfen Sie es.

Szenario 2: Betrachten wir ein Szenario, in dem wir wissen, dass die Breite des Inhalts der Bildlaufbreite entspricht, aber die Höhe größer ist als die Bildlaufansicht.

Folgen Sie den Schritten, um den Inhalt vertikal zu scrollen.

Löschen Sie die Breitenbeschränkung im obigen Fall.
Ändern Sie die Breite der orangefarbenen Ansicht, um sie an die Breite der Bildlaufansicht anzupassen.
Ziehen Sie bei gedrückter Strg-Taste aus der orangefarbenen Ansicht, um eine Bildlaufansicht zu erstellen und die Einschränkung für die gleiche Breite hinzuzufügen.

Und fertig!!! Führen Sie einfach aus und prüfen Sie, ob es vertikal scrollt

Szenario 3:

Jetzt wollen wir nur horizontal und nicht vertikal scrollen.

Folgen Sie den Schritten, um den Inhalt horizontal zu scrollen.

Machen Sie alle Änderungen rückgängig, um die folgenden Einschränkungen zu erreichen (dh stellen Sie die ursprünglichen Einschränkungen wieder her, die einen vertikalen und horizontalen Bildlauf ergeben ).

Überprüfen Sie den orangefarbenen Sichtrahmen, der (0,0,700,700) sein sollte.
Löschen Sie die Höhenbeschränkung der orange Ansicht.
Ändern Sie die Höhe der orangefarbenen Ansicht entsprechend der Höhe der Bildlaufansicht.
Ziehen Sie bei gedrückter Strg-Taste aus der orangefarbenen Ansicht, um die Ansicht zu scrollen und die Beschränkung für gleiche Höhen hinzuzufügen.

Und fertig!!! Führen Sie einfach aus und prüfen Sie, ob es vertikal scrollt

Bildlauf mit aktiviertem automatischen Layout

Dieses Projekt ist ein eigenständiges Beispiel, das vollständig im Interface Builder erstellt wurde. Sie sollten es in 10 Minuten oder weniger durcharbeiten können. Dann können Sie die erlernten Konzepte auf Ihr eigenes Projekt anwenden.

Hier verwende ich nur UIView s, aber sie können jede beliebige Ansicht darstellen (z. B. Schaltfläche, Beschriftung usw.). Ich habe mich auch für das horizontale Scrollen entschieden, da die Storyboard-Screenshots für dieses Format kompakter sind. Die Prinzipien sind jedoch beim vertikalen Scrollen gleich.

Schlüssel Konzepte

Die UIScrollView sollte nur eine Unteransicht verwenden. Dies ist eine UIView, die als Inhaltsansicht für alles dient, was Sie scrollen möchten.
Stellen Sie sicher, dass die Inhaltsansicht und die übergeordnete Ansicht der Bildlaufansicht für den horizontalen Bildlauf gleich hoch sind. (Gleiche Breiten für vertikales Scrollen)
Stellen Sie sicher, dass der gesamte scrollbare Inhalt eine festgelegte Breite hat und an allen Seiten gepinnt ist.

Starten Sie ein neues Projekt

Es kann nur eine einzige Ansichtsanwendung sein.

Storyboard

In diesem Beispiel erstellen wir eine horizontale Bildlaufansicht. Wählen Sie den Ansichts-Controller aus und wählen Sie dann im Größeninspektor die Option Freiform. Machen Sie die Breite 1,000 und die Höhe 300 . Dies gibt uns nur den Raum auf dem Storyboard, um Inhalte hinzuzufügen, die durchlaufen werden.

Fügen Sie eine Bildlaufansicht hinzu

Fügen Sie eine UIScrollView und verbinden Sie alle vier Seiten mit der UIScrollView des View-Controllers.

Fügen Sie eine Inhaltsansicht hinzu

Fügen Sie der UIView eine UIView als Unteransicht hinzu. Das ist der Schlüssel. Versuchen Sie nicht, viele Unteransichten zur Bildlaufansicht hinzuzufügen. UIView einfach eine einzelne UIView . Dies ist Ihre Inhaltsansicht für die anderen Ansichten, die Sie scrollen möchten. Verbinden Sie die Inhaltsansicht auf allen vier Seiten mit der Bildlaufansicht.

Gleiche Höhen

Jetzt in der Dokumentgliederung, klicken Sie auf Befehl sowohl den Inhalt Ansicht und der übergeordneten Ansicht der Ansicht blättern , um sie beide zu wählen. Stellen Sie dann die Höhen auf gleich ein (ziehen Sie <Control </ kbd von der Inhaltsansicht in die Bildlaufansicht>). Dies ist auch der Schlüssel. Da wir horizontal scrollen, weiß die Inhaltsansicht der Bildlaufansicht nicht, wie hoch sie sein soll, wenn wir sie nicht auf diese Weise festlegen.

Hinweis:

Wenn wir den Inhalt vertikal scrollen lassen, würden wir die Breite der Inhaltsansicht so einstellen, dass sie der Breite der übergeordneten Ansicht der Bildlaufansicht entspricht.

Inhalt hinzufügen

Fügen Sie drei UIView und geben Sie ihnen alle Einschränkungen. Ich habe 8 Punkte für alles verwendet.

Einschränkungen:

Grüne Ansicht: Pin oben, links und unten. Machen Sie die Breite 400.
Rote Ansicht: Pin oben, links und unten. Machen Sie die Breite 300.
Lila Ansicht: Alle vier Kanten anheften. Stellen Sie die Breite so ein, wie der verbleibende Platz ist (in diesem Fall 268).

Das Festlegen der Breitenbeschränkungen ist auch wichtig, damit die Bildlaufansicht weiß, wie breit die Inhaltsansicht ist.

Fertig

Das ist alles. Sie können Ihr Projekt jetzt ausführen. Es sollte sich wie das Bildlaufbild oben in dieser Antwort verhalten.

Weitere Studie

Bildlauf aktivieren / deaktivieren

Die Eigenschaft scrollEnabled speichert einen Boolean Wert, der bestimmt, ob der Bildlauf aktiviert ist oder nicht.
Wenn der Wert dieser Eigenschaft true / YES ist, ist der Bildlauf aktiviert, andernfalls nicht. Der Standardwert ist true

Schnell

scrollview.isScrollEnabled = true

Ziel c

scrollview.scrollEnabled = YES;

Vergrößern / Verkleinern von UIImageView

Erstellen Sie eine UIScrollView-Instanz

let scrollview = UIScrollView.init(frame: self.view.bounds)

Und dann diese Eigenschaften einstellen:

scrollView.minimumZoomScale = 0.1
scrollView.maximumZoomScale = 4.0
scrollView.zoomScale = 1.0
scrollview.delegate = self as? UIScrollViewDelegate

Um das Bild zu vergrößern oder zu verkleinern, müssen Sie den Betrag angeben, um den der Benutzer zoomen kann. minimumZoomScale maximumZoomScale wir Werte für die Eigenschaften minimumZoomScale und maximumZoomScale der minimumZoomScale maximumZoomScale . Beide sind standardmäßig auf 1,0 eingestellt.

Und zoomScale auf 1,0, die den Zoomfaktor für den minimalen und maximalen Zoom angeben.

Um das Zoomen zu unterstützen, müssen wir einen Delegaten für Ihre Bildlaufansicht festlegen. Das Delegate-Objekt muss dem UIScrollViewDelegate Protokoll entsprechen. Diese viewForZoomingInScrollView() muss die viewForZoomingInScrollView() Methode implementieren und die Ansicht zum Zoomen zurückgeben.

Ändern Sie Ihren ViewController wie gezeigt

class ViewController: UIViewController, UIScrollViewDelegate

Fügen Sie dann der Klasse die folgende Delegatfunktion hinzu.

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
    return imageView
}

Erstellen Sie nun die UIImageView-Instanz

Machen Sie diese Variable als Klassenvariable

var imageView:UIImageView = UIImageView.init(image: UIImage.init(named: "someImage.jpg"))

Und fügen Sie es dann zum Bildlauf hinzu

scrollView?.addSubview(imageView)

Referenz

Ermitteln, wann der Bildlauf von UIScrollView mit Delegat-Methoden abgeschlossen ist

scrollViewDidEndDecelerating: Dies teilt dem Delegierten mit, dass die Bildlaufansicht beendet ist und die Bildlaufbewegung verlangsamt hat.

Ziel c:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [self stoppedScrolling];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (!decelerate) {
        [self stoppedScrolling];
    }
}

- (void)stoppedScrolling {
    // done, do whatever
}

Schnell:

func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    if !decelerate {
        stoppedScrolling()
    }
}

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    stoppedScrolling()
}

func stoppedScrolling() {
    // done, do whatever
}

Bildlaufrichtung einschränken

Sie können die Richtungen einschränken, zu denen der Benutzer scrollen kann, indem Sie folgenden Code verwenden:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView.contentOffset.x != 0 {
        scrollView.contentOffset.x = 0
    }
}

Bei jedem Bildlauf des Benutzers auf der x-Achse wird der Inhaltsversatz der scrollView auf 0 zurückgesetzt.
Sie können natürlich die Änderung x s y s und die Richtung dafür sperren Horizontal nur zu sein.

Sie müssen auch sicherstellen, dass Sie diesen Code in die Delegat-Methode scrollViewDidScroll(_ scrollView: UIScrollView) . Andernfalls wird es nicht funktionieren.

UIScrollViewDelegate Sie außerdem sicher, dass Sie UIScrollViewDelegate wie UIScrollViewDelegate in Ihre Klassendeklaration importiert haben:

class ViewController: UIViewController, UIScrollViewDelegate

... und setzen Sie den Delegaten der scrollView in einer Methode wie viewDidLoad(_:)

scrollView.delegate = self

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

iOS
UIScrollView

Suche…

Erstellen Sie eine UIScrollView

Blättern Sie in die Inhaltsgröße

ScrollView mit AutoLayout

Bildlauf mit aktiviertem automatischen Layout

Schlüssel Konzepte

Starten Sie ein neues Projekt

Storyboard

Fertig

Weitere Studie

Bildlauf aktivieren / deaktivieren

Vergrößern / Verkleinern von UIImageView

Erstellen Sie nun die UIImageView-Instanz

Ermitteln, wann der Bildlauf von UIScrollView mit Delegat-Methoden abgeschlossen ist

Ziel c:

Schnell:

Bildlaufrichtung einschränken