Verwendung von UIScrollView in Storyboard

Ich habe eine Bildlaufansicht mit einem Inhalt von 1000 Pixel und möchte sie für ein einfaches Design auf dem Storyboard auslegen können.
Ich weiß, dass es programmgesteuert gemacht werden kann, aber ich möchte es wirklich visuell sehen können. Jedes Mal, wenn ich eine Bildlaufansicht auf einen Ansichtscontroller lege, wird kein Bildlauf durchgeführt. Ist es möglich, dass es so funktioniert, wie ich es möchte, oder muss ich es im Code tun?

Ich beantworte meine eigene Frage, weil ich gerade 2 Stunden damit verbracht habe, die Lösung zu finden, und StackOverflow diesen QS-Stil zulässt.

Hier erfahren Sie, wie Sie es im Storyboard zum Laufen bringen.

1: Gehen Sie zu Ihrem View Controller und klicken Sie auf Attribute Inspector.

2: Ändern Sie die Größe in Freeformanstelle von "Abgeleitet".

3: Wechseln Sie in diesem Storyboard zur Hauptansicht, nicht zu Ihrer Bildlaufansicht, sondern zur Ansicht der obersten Ebene.

4: Klicken Sie auf Size Inspectorund stellen Sie diese Ansicht auf die gewünschte Größe ein. Ich habe meine Größe auf 1000 geändert.

Jetzt sehen Sie, dass Ihr Storyboard Ihre Ansicht eingerichtet hat, sodass Sie die gesamte Höhe Ihrer Schriftrolle für ein einfaches Design sehen können.

5: Legen Sie eine Bildlaufansicht ab und strecken Sie sie so, dass sie die gesamte Ansicht einnimmt. Sie sollten jetzt eine Bildlaufansicht mit einer Größe von 320.1000 auf einer Ansicht in Ihrem Ansichts-Controller haben.

Jetzt müssen wir es scrollen lassen und den Inhalt korrekt anzeigen lassen.

6: Klicken Sie auf Ihre Bildlaufansicht und klicken Sie auf Identity Inspector.

7: Fügen Sie ein User Defined runtime attributemit KeyPath vom contentSizeTyp SIZE hinzu und geben Sie Ihre Inhaltsgröße ein. Für mich ist es (320, 1000).

Da wir unsere gesamte Bildlaufansicht auf dem Storyboard sehen möchten, haben wir sie gedehnt und sie hat einen Rahmen von 320.1000. Damit dies in unserer App funktioniert, müssen wir den Rahmen auf die sichtbare Bildlaufansicht ändern.

8: Fügen Sie ein runtime attributemit KeyPath framemit dem Typ RECT und 0,0320,416 hinzu.

Wenn wir jetzt unsere App ausführen, haben wir eine sichtbare Bildlaufansicht mit einem Rahmen von 0,0,320, 416 und können bis zu 1000 nach unten scrollen. Wir können unsere Unteransichten und Bilder und so weiter im Storyboard so gestalten, wie wir sie haben möchten. Dann stellen unsere Laufzeitattribute sicher, dass sie richtig angezeigt werden. All dies ohne 1 Codezeile.

Hier sind die Schritte Auto Layout, die für mich unter XCode 8.2.1 funktioniert haben.

1. Wählen Sie Size Inspectoraus View Controller, und ändern Sie Simulated Sizeauf Freeformmit der Höhe 1000 statt Fixed.
2. Benennen Sie die Ansicht von View Controllerin RootView um .
3. Ziehen Sie eine Scroll Viewals Unteransicht von RootView und benennen Sie sie in ScrollView um .
4. Fügen Sie Einschränkungen für ScrollView hinzu :
   • ScrollView [Oben, Unten, Führend, Nachlaufend] = RootView [Oben, Unten, Führend, Nachlaufend]
5. Ziehen Sie eine Vertical Stack Viewals Unteransicht von ScrollView und benennen Sie sie in ContentView um .
6. Fügen Sie Einschränkungen für ContentView hinzu :
   • ContentView .height = 1000
   • ContentView [Oben, Unten, Führend, Nachlaufend, Breite] = ScrollView [Oben, Unten, Führend, Nachlaufend, Breite]
7. Wählen Sie Attributes Inspectoraus InhaltAlle , und ändern Distributionzu Fill Equallystatt Fill.
8. Ziehen Sie eine Viewals Unteransicht von ContentView und benennen Sie sie in RedView um .
9. Stellen Sie Redals Hintergrund für RedView .
10. Ziehen Sie eine Viewals Unteransicht von ContentView und benennen Sie sie in BlueView um .
11. Stellen Sie Blueals Hintergrund für Blueview .
12. Wählen Sie RootView und klicken Sie auf die Update FramesSchaltfläche.
    • Update Framesist eine neue Schaltfläche in Xcode8 anstelle der Resolve Auto Layout IssuesSchaltfläche. Es sieht aus wie eine Schaltfläche zum Aktualisieren in der Steuerleiste unter dem Storyboard:

Hierarchie anzeigen:

• RootView
  • ScrollView
    • ContentView
      • RedView
      • BlueView

Controller-Szene anzeigen (Höhe: 1000):

Laufen Sie auf dem iPhone7 (Höhe: 1334/2):

Hier sind die Schritte, die für mich unter iOS 7 und XCode 5 funktioniert haben.

1. Ziehen Sie einen ViewController (im Lieferumfang von UIView "View" enthalten).

   1.1 Wählen Sie "View Controller" und wählen Sie "File Inspector" und deaktivieren Sie "Auto Layout".

2. Ziehen Sie eine ScrollView (als untergeordnetes Element von ViewControllers UIView "View").
3. Wählen Sie ScrollView und öffnen Sie "Identity Inspector".

4. Geben Sie "contentSize" für keyPath ein. Wählen Sie "Größe" als Typ. Geben Sie als Wert {320, 1000} ein .

   Hinweis: In Schritt 4 wird lediglich angegeben, dass der Scroller Inhalte enthält, deren Größe 320 x 1000 Einheiten beträgt. Wenn Sie also contentSize einstellen, funktioniert der Scroller.

5. Wählen Sie View Controller, wählen Sie "Attributes Inspector" und dann Freeform unter Size.

   Hinweis: In Schritt 5 können wir die Größe von "Ansicht" ändern, mit der der Ansichts-Controller geliefert wird.

6. Wählen Sie "Ansicht" und dann "Größeninspektor".

7. Stellen Sie die Breite auf 320 und die Höhe auf 1000 ein.

Hinweis: 5, 6 und 7 ist rein für uns zu sehen , im Inneren Storyboard gestreckt oder ganz erweiterte Ansicht. Hinweis: Stellen Sie sicher, dass die Option "Automatisches Layout" in View Controller deaktiviert ist.

Ihre Ansichtshierarchie sollte folgendermaßen aussehen:

Nach stundenlangem Ausprobieren habe ich eine sehr einfache Möglichkeit gefunden, Inhalte in Bildlaufansichten zu platzieren, die sich außerhalb des Bildschirms befinden. Getestet mit XCode 5 und iOS 7. Sie können dies fast vollständig in Storyboard mit 2 kleinen Tricks / Problemumgehungen tun:

1. Ziehen Sie einen Viewcontroller auf Ihr Storyboard.
2. Ziehen Sie eine scrollView auf diesen viewController. Für die Demo können Sie die Standardgröße beibehalten und den gesamten Bildschirm abdecken.
3. Jetzt kommt Trick 1 : Bevor Sie ein Element zur scrollView hinzufügen, ziehen Sie eine reguläre 'Ansicht' (Diese Ansicht wird größer als der Bildschirm und enthält alle Unterelemente wie Schaltflächen, Beschriftungen, ... nennen wir es das ' umschließende Ansicht ').
4. Lassen Sie die Y-Größe dieser umschließenden Ansicht im Größeninspektor auf beispielsweise 800.
5. Legen Sie ein Etikett in die umschließende Ansicht, irgendwo an der Y-Position 200, und nennen Sie es "Etikett 1".
6. Trick 2 : Stellen Sie sicher, dass die umschließende Ansicht ausgewählt ist ( nicht die scrollView! ), Und setzen Sie die Y-Position auf beispielsweise -250, damit Sie ein Element hinzufügen können, das sich außerhalb des Bildschirms befindet
7. Legen Sie ein Etikett irgendwo am unteren Bildschirmrand ein und nennen Sie es "Etikett 2". Dieses Etikett befindet sich tatsächlich außerhalb des Bildschirms.
8. Setzen Sie die Y-Position der umschließenden Ansicht auf 0 zurück. Sie sehen Etikett 2 nicht mehr, da es außerhalb des Bildschirms positioniert wurde.

Bisher müssen Sie für die Storyboard-Arbeit der 'viewDidLoad'-Methode von viewController eine einzige Codezeile hinzufügen, um den Inhalt von scrollViews so festzulegen, dass er die gesamte' umschließende Ansicht 'enthält. Ich habe im Storyboard keinen Weg gefunden, dies zu tun:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = CGSizeMake(320, 800);
}

Sie können dies versuchen, indem contentSizeSie sizeder scrollView im Identitätsinspektor einen Schlüsselpfad als hinzufügen und ihn auf (320, 1000) setzen.

Ich denke, Apple sollte dies im Storyboard einfacher machen. In einem TableViewController können Sie im Storyboard einfach vom Bildschirm scrollen (fügen Sie einfach 20 Zellen hinzu, und Sie werden sehen, dass Sie einfach scrollen können). Dies sollte auch mit einem ScrollViewController möglich sein.

Scrollen in iOS7 und Auto-Layout in iOS 7 und XCode 5.

Darüber hinaus: https://stackoverflow.com/a/22489795/1553014

Anscheinend müssen wir nur:

1. Setzen Sie alle Einschränkungen auf Bildlaufansicht (dh Bildlaufansicht zuerst korrigieren)

2. Setzen Sie dann die Einschränkung für den Abstand von der Bildlaufansicht auf das unterste Element für die Bildlaufansicht (dies ist die Superansicht).

Hinweis: In Schritt 2 wird dem Storyboard mitgeteilt, wo sich der letzte Inhalt in der Bildlaufansicht befindet.

In diesem Beispiel habe ich die Autolayout-Funktion des Interface Builder deaktiviert. Und ich verwende immer noch (ohne Grund) die relativ alte Version 4.6.1 von Xcode.

Beginnen Sie mit einem Ansichts-Controller, über dem sich eine Bildlaufansicht befindet (die Hauptansicht).

1: Fügen Sie der Bildlaufansicht eine Containeransicht aus der Objektbibliothek hinzu. Beachten Sie, dass dem Storyboard ein neuer Ansichts-Controller hinzugefügt und mit der Bildlaufansicht mit dem Ansichts-Controller verknüpft wird.

2: Wählen Sie die Containeransicht aus und verankern Sie sie im Größeninspektor oben und links, ohne die Größe automatisch zu ändern.

3: Ändern Sie die Höhe auf 1000. (In diesem Beispiel wird 1000 verwendet. Sie sollten den gewünschten Wert anwenden.)

4: Wählen Sie den neuen Ansichts-Controller aus und ändern Sie im Attributinspektor die Größe in Freiform.

5: Wählen Sie die Ansicht des neuen Ansichts-Controllers aus und ändern Sie im Größeninspektor die Höhe auf 1000 (entspricht der Höhe der Containeransicht).

6: Fügen Sie für Ihren späteren Test, während Sie sich noch in der Ansicht des neuen Ansichtscontrollers befinden, oben und unten in der Ansicht eine Beschriftung hinzu.

7: Wählen Sie die Bildlaufansicht aus dem Original View Controller. Fügen Sie im Identitätsinspektor ein Attribut hinzu, dessen Schlüsselpfad auf contentSize festgelegt ist, dessen Typ auf Größe festgelegt ist und dessen Wert auf {320, 1000} (oder die Größe Ihrer Containeransicht) festgelegt ist.

8: Laufen Sie auf dem 4-Zoll-iPhone-Simulator. Sie sollten in der Lage sein, vom oberen zum unteren Etikett zu scrollen.

9: Führen Sie den 3,5-Zoll-iPhone-Simulator aus. Sie sollten in der Lage sein, vom oberen zum unteren Etikett zu scrollen.

Denken Sie daran, dass Xcode 4.6.1 nur für iOS6 und niedriger erstellt werden kann. Mit diesem Ansatz und dem Erstellen für iOS6 kann ich immer noch dieselben Ergebnisse erzielen, wenn die App unter iOS7 ausgeführt wird.

Beachten Sie, dass Sie innerhalb von a UITableViewtatsächlich durch die Tabellenansicht scrollen können, indem Sie eine Zelle oder ein Element darin auswählen und mit Ihrem Trackpad nach oben oder unten scrollen.

Zum einen UIScrollViewmag ich Alex 'Vorschlag, aber ich würde empfehlen , den Ansichts-Controller vorübergehend in Freiform zu ändern, die Höhe der Stammansicht zu erhöhen, Ihre Benutzeroberfläche zu erstellen (Schritte 1 bis 5) und sie dann wieder auf die abgeleitete Standardgröße zu ändern, wenn Sie fertig sind Damit Sie die Inhaltsgrößen nicht als Laufzeitattribute fest codieren müssen. Wenn Sie dies tun, sind Sie mit vielen Wartungsproblemen konfrontiert, die versuchen, sowohl 3,5 "- als auch 4" -Geräte zu unterstützen, sowie mit der Möglichkeit, die Bildschirmauflösung in Zukunft zu erhöhen.

Sie sollten die contentSize-Eigenschaft nur für viewDidAppear festlegen, wie in diesem Beispiel:

- (void)viewDidAppear:(BOOL)animated{

     [super viewDidAppear:animated];
     self.scrollView.contentSize=CGSizeMake(306,400.0);

}

Es löst die Autolayout-Probleme und funktioniert unter iOS7 einwandfrei.

Haftungsausschluss: - Nur für iOS 9 und höher (Stapelansicht).

Wenn Sie Ihre App auf iOS 9-Geräten bereitstellen, verwenden Sie eine Stapelansicht . Hier sind die Schritte: -

1. Fügen Sie eine Bildlaufansicht mit Einschränkungen hinzu - Pin links, rechts, unten, oben (ohne Ränder) zur Übersicht (Ansicht)
2. Fügen Sie der Bildlaufansicht eine Stapelansicht mit denselben Einschränkungen hinzu.
3. Stapelansicht Andere Einschränkungen: - stackView.bottom = view.bottom und stackView.width = scrollView.width
4. Fügen Sie Ihre Ansichten hinzu. In der Bildlaufansicht wird basierend auf der Größe der Stapelansicht (die im Wesentlichen Ihre Inhaltsansicht ist) entschieden, einen Bildlauf durchzuführen.

In iOS7 stellte ich fest, dass eine Ansicht in einer UIScrollView auf einem ViewController in FreeForm-Größe nicht in der App gescrollt wird, egal was ich getan habe. Ich spielte herum und stellte fest, dass Folgendes zu funktionieren schien, das keine FreeForms verwendet:

1. Fügen Sie eine UIScrollView in die Hauptansicht eines ViewControllers ein

2. Legen Sie die Autolayout-Einschränkungen in der ScrollView entsprechend fest. Für mich habe ich 0 bis Top Layout Guide und 0 bis Bottom Layout Guide verwendet

3. Platzieren Sie in der ScrollView eine Containeransicht. Stellen Sie die Höhe auf einen beliebigen Wert ein (z. B. 1000).

4. Fügen Sie dem Container eine Höhenbeschränkung (1000) hinzu, damit die Größe nicht geändert wird. Der untere Rand befindet sich nach dem Ende des Formulars.

5. Fügen Sie die Zeile hinzu [self.scrollView setContentSize: CGSizeMake (320, 1000)]; an den ViewController, der die scrollView enthält (die Sie als IBOutlet angeschlossen haben)

Der ViewController (automatisch hinzugefügt), der dem Container zugeordnet ist, hat im Interface Builder die gewünschte Höhe (1000) und wird auch im ursprünglichen View Controller ordnungsgemäß gescrollt. Sie können jetzt den ViewController des Containers verwenden, um Ihre Steuerelemente zu gestalten.

Ich möchte meine 5 Cent auf die akzeptierte Antwort setzen: Ich habe 2 Tage lang nach dem Thema gesucht und endlich eine Lösung gefunden, die ich von nun an immer verwenden werde

Gehen Sie in der akzeptierten Antwort zu Punkt 4 und vergessen Sie das Hinzufügen von Attributen für Frames und Inhaltsgrößen usw.

Um alles automatisch zu machen, verwenden Sie einfach die Lösung über diesen Link

Alles ist klar, einfach, elegant und wirkt wie ein Zauber auf iOS 7. Ich bin ziemlich froh über all das lol

Hier ist eine einfache Lösung.

1. Setzen Sie das Größenattribut Ihres View Controllers im Storyboard auf "Freiform" und stellen Sie die gewünschte Größe ein. Stellen Sie sicher, dass es groß genug ist, um den gesamten Inhalt Ihrer Bildlaufansicht aufzunehmen.

2. Fügen Sie Ihre Bildlaufansicht hinzu und legen Sie die Einschränkungen wie gewohnt fest. Wenn Sie also möchten, dass die Bildlaufansicht die Größe Ihrer Ansicht hat, hängen Sie Ihre oberen, unteren, führenden und nachlaufenden Ränder wie gewohnt an die Übersicht an.

3. Stellen Sie jetzt sicher, dass in den Unteransichten der Bildlaufansicht Einschränkungen vorhanden sind, die den oberen und unteren Rand der Bildlaufansicht verbinden. Gleiches gilt für links und rechts, wenn Sie horizontal scrollen.

Hier ist eine etwas schmuddelige Antwort, die zur gleichen Lösung für vertikale Bildlaufansichten führt, aber (gegen das Ethos des Stackoverflow) die Frage nicht beantwortet. Anstatt eine scrollView zu verwenden, verwenden Sie einfach eine UITableView, ziehen Sie eine normale UIView in die Kopfzeile und machen Sie sie so groß wie Sie möchten. Sie können jetzt den Inhalt im Storyboard scrollen.

Anscheinend müssen Sie die Höhe überhaupt nicht angeben! Das ist großartig, wenn es sich aus irgendeinem Grund ändert (Sie ändern die Größe von Komponenten oder ändern die Schriftgröße).

Ich habe gerade dieses Tutorial befolgt und alles hat funktioniert: http://natashatherobot.com/ios-autolayout-scrollview/

(Randnotiz: viewDidLayoutSubviews muss nur implementiert werden, wenn Sie die Ansicht zentrieren möchten, sodass die Liste der Schritte noch kürzer ist.)

Hoffentlich hilft das!

Der Schlüssel ist die contentSize.

Dies fehlt häufig und wird beim Hinzufügen einer UIScrollView nicht angezeigt.

Wählen Sie die UIScrollView und dann den Identity Inspector.

Fügen contentSizeSie sizeder scrollView im Identitätsinspektor einen Schlüsselpfad als hinzu und setzen Sie ihn auf (320, 1000).

Scrolle weg.

Wenn Sie das automatische Layout verwenden, verwenden Sie am besten UITableViewController mit statischen Zellen im Storyboard.

Ich habe das Problem auch einmal mit einer Ansicht konfrontiert, die viel mehr Bildlauf erfordert. Ändern Sie daher die UIScrollView mit der oben genannten Technik.

So richten Sie eine Bildlaufansicht mit Xcode 11 ein

1 - Fügen Sie eine Bildlaufansicht hinzu und legen Sie die oberen, unteren, führenden und nachfolgenden Einschränkungen fest

2 - Fügen Sie der Bildlaufansicht eine Inhaltsansicht hinzu, ziehen Sie eine Verbindung zum Inhaltslayout-Handbuch und wählen Sie Führend, Oben, Unten und Nachlauf. Stellen Sie sicher, dass die Werte auf 0 oder die gewünschten Konstanten gesetzt sind.

3 - Ziehen Sie aus der Inhaltsansicht in das Rahmenlayout-Handbuch und wählen Sie Gleiche Breiten

4 - Legen Sie eine Höhenbeschränkungskonstante für die Inhaltsansicht fest