it-swarm.com.de

So verwenden Sie UIScrollView im Storyboard

Ich habe eine Bildlaufansicht mit 1000px großen Inhalten und möchte sie für die einfache Gestaltung 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 Ansichts-Controller stelle, wird kein Bildlauf durchgeführt. Ist es möglich, dass es funktioniert, wie ich will, oder muss ich es im Code tun?

118
Alex Reynolds

Ich beantworte meine eigene Frage, weil ich gerade zwei Stunden damit verbracht habe, die Lösung zu finden, und StackOverflow ermöglicht diesen QS-Stil.

Beginnen Sie damit, hier zu beenden, wie Sie es im Storyboard funktionieren lassen.

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

2: Ändern Sie Size in Freeform statt Inferred.

3: Gehen Sie zur Hauptansicht des Storyboards, nicht zu Ihrer Bildlaufansicht, sondern zur Ansicht der obersten Ebene.

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

Jetzt werden Sie feststellen, dass das Storyboard über die Ansichtseinstellungen verfügt, sodass Sie die gesamte Höhe Ihrer Bildlaufleiste 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 View-Controller haben.

Jetzt müssen wir einen Bildlauf durchführen und den Inhalt korrekt anzeigen lassen.

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

7: Fügen Sie einen User Defined runtime attribute mit KeyPath von contentSize hinzu, geben Sie SIZE ein 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 es gestreckt und es hat einen Rahmen von 320,1000. Damit dies jedoch in unserer App funktioniert, müssen wir den Rahmen auf die sichtbare Bildlaufansicht ändern.

8: Fügen Sie einen runtime attribute mit KeyPath frame mit dem Typ RECT und 0,0,320,416 hinzu.

Wenn wir nun unsere App ausführen, haben wir einen sichtbaren Bildlauf mit einem Rahmen von 0,0320, 416 und können auf 1000 herunter scrollen. Wir sind in der Lage, unsere Unteransichten und Bilder und das, was in Storyboard nicht so ist, wie sie erscheinen sollen. Dann stellen unsere Laufzeitattribute sicher, dass sie richtig angezeigt werden. All dies ohne eine Codezeile.

149
Alex Reynolds

Hier sind die Schritte mit Auto Layout, die auf XCode 8.2.1 für mich funktionierten.

  1. Wählen Sie Size Inspector von View Controller und ändern Sie Simulated Size in Freeform mit Höhe 1000 anstelle von Fixed.
  2. Benennen Sie die Ansicht von View Controller in RootView um.
  3. Ziehen Sie einen Scroll View als Unteransicht von RootView und benennen Sie ihn in ScrollView um.
  4. Fügen Sie Einschränkungen für ScrollView: .__ hinzu.
    • ScrollView [Oben, Unten, Führen, Nachlaufen] = RootView [Oben, Unten, Führen, Nachlaufen]
  5. Ziehen Sie einen Vertical Stack View als Unteransicht von ScrollView und benennen Sie ihn in ContentView um.
  6. Fügen Sie Einschränkungen für ContentView: .__ hinzu.
    • ContentView .height = 1000
    • ContentView [Oben, Unten, Führen, Nachlaufen, Breite] = ScrollView [Oben, Unten, Führen, Nachlaufen, Breite]
  7. Wählen Sie Attributes Inspector von ContentView aus und ändern Sie Distribution in Fill Equally anstelle von Fill.
  8. Ziehen Sie eine View als Unteransicht von ContentView und benennen Sie sie in RedView um.
  9. Legen Sie Red als Hintergrund für RedView fest.
  10. Ziehen Sie eine View als Unteransicht von ContentView und benennen Sie sie in BlueView um.
  11. Legen Sie Blue als Hintergrund für BlueView fest.
  12. Wählen Sie RootView aus und klicken Sie auf die Schaltfläche Update Frames .
    • Update Frames ist eine neue Schaltfläche in Xcode8 anstelle der Resolve Auto Layout Issues-Schaltfläche. Es sieht aus wie eine Aktualisierungsschaltfläche, die sich in der Steuerleiste unterhalb des Storyboards befindet:  Update Frames Button

Hierarchie anzeigen:

  • RootView
    • ScrollView
      • ContentView
        • RedView
        • BlueView

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

scene

Lauf auf iPhone7 (Höhe: 1334/2):

demo

48
jqgsninimo

Hier sind die Schritte, die auf iOS 7 und XCode 5 für mich funktionierten.

  1. Ziehen Sie einen ViewController (er wird mit UIView "View" geliefert).

    1.1 Wählen Sie "View Controller" und dann "File Inspector" und deaktivieren Sie "Auto layout".

  2. Ziehen Sie eine ScrollView (als untergeordnetes Element von UIView "View" von ViewController).
  3. Wählen Sie ScrollView und öffnen Sie "Identity Inspector".
  4. Geben Sie "contentSize" für keyPath ein. Wählen Sie "Typ" für Typ. Geben Sie {320, 1000} als Wert ein. 

    Hinweis: Schritt 4 besagt lediglich, dass der Scroller einige Inhalte mit einer Größe von 320 x 1000 Einheiten enthält. Wenn Sie contentSize einstellen, wird der Scroller funktionieren.

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

    Hinweis: In Schritt 5 können Sie die Größe der "Ansicht" ändern, mit der der View Controller geliefert wird.

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

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

Hinweis: 5, 6 und 7 ist nur für siehe gestreckte oder gesamte erweiterte Ansicht in StoryBoard geeignet. Hinweis: Stellen Sie sicher, dass "Auto Layout" im View Controller deaktiviert ist.

Ihre Ansichtshierarchie sollte folgendermaßen aussehen: hierarchy

43
Raja Rao

Nach stundenlangem Ausprobieren habe ich einen sehr einfachen Weg gefunden, Inhalte in Scrollviews zu integrieren, die "offscreen" sind. Getestet mit XCode 5 und iOS 7. Sie können dies fast vollständig in Storyboard mit zwei 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 Für den gesamten Bildschirm beibehalten.
  3. Nun kommt trick 1: Bevor Sie ein Element zur scrollView hinzufügen, ziehen Sie es in eine normale 'Ansicht' (Diese Ansicht wird größer als der Bildschirm und enthält alle Unterelemente wie Schaltflächen, Beschriftungen, ... Nennen wir es die 'einschließende Sicht').
  4. Lassen Sie die Y-Größe [] dieser einschließenden Ansicht im Größeninspektor z. B. auf 800.
  5. Legen Sie ein Etikett auf die umschließende Ansicht, irgendwo auf Y-Position 200, und nennen Sie es 'Etikett 1'.
  6. Trick 2: Stellen Sie sicher, dass die einschließende Ansicht ausgewählt ist (nicht das scrollView!), Und stellen Sie die Y-Position auf beispielsweise -250 ein, sodass Sie ein Element hinzufügen können, das sich außerhalb befindet ' der Bildschirm 
  7. Legen Sie ein Etikett irgendwo am unteren Rand des Bildschirms ein und nennen Sie es "Etikett 2". Dieses Label ist eigentlich "off screen".
  8. Setzen Sie die Y-Position der umschließenden Ansicht auf 0 zurück. Die Beschriftung 2 wird nicht mehr angezeigt, da sie außerhalb des Bildschirms positioniert wurde.

Für die Storyboard-Arbeit müssen Sie der 'viewDidLoad' - Methode von viewController jetzt eine einzige Codezeile hinzufügen, um den Inhalt der scrollViews so einzustellen, dass er die gesamte 'einschließende Ansicht' enthält. Ich habe in Storyboard keine Möglichkeit dafür gefunden:

- (void)viewDidLoad
{
    [super viewDidLoad];

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

Sie können dies versuchen, indem Sie contentSize keyPath als size zur Bildlaufansicht im Identitätsinspektor hinzufügen und den Wert auf (320, 1000) setzen.

Ich denke, Apple sollte dies im Storyboard einfacher machen, in einem TableViewController können Sie im Storyboard nur einen Bildlauf durchführen (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. 

13
Ronny Webers

Erste Schritte Blättern in iOS7 und Auto-Layout in iOS 7 und XCode 5.

Zusätzlich dazu: https://stackoverflow.com/a/22489795/1553014

Anscheinend ist alles was wir tun müssen:

  1. Alle Einschränkungen auf die Bildlaufansicht setzen (d. H. Die Bildlaufansicht zuerst fixieren)

  2. Legen Sie dann die Entfernung von der ScrollView-Einschränkung auf das unterste Element für die Bildlaufansicht fest (die Superansicht). 

Hinweis: Schritt 2 sagt dem Storyboard, wo der letzte Inhalt in der Bildlaufansicht liegt.

8
Raja Rao

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

Beginnen Sie mit einem View-Controller, der über eine Bildlaufansicht (Hauptansicht) verfügt.

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

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

enter image description here

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 View-Controller aus, und ändern Sie im Attribut-Inspector die Größe in Freeform.

enter image description here

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

6: Fügen Sie zu einem späteren Zeitpunkt, während Sie sich noch in der Ansicht des neuen Ansichtscontrollers befinden, ein Etikett oben und unten in der Ansicht hinzu.

7: Wählen Sie die Bildlaufansicht aus dem ursprünglichen Ansichts-Controller. Fügen Sie im Identitätsinspektor ein Attribut hinzu, für das keyPath auf contentSize gesetzt ist, geben Sie set auf Size und einen Wert auf {320, 1000} (oder die Größe Ihrer Containeransicht) ein.

enter image description here

8: Führen Sie den 4-Zoll-iPhone-Simulator aus. Sie sollten in der Lage sein, vom oberen Etikett bis zum unteren Etikett zu blättern.

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

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

7
yoninja

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

Für eine UIScrollView mag ich Alex 'Vorschlag, aber ich würde vorübergehend den View-Controller in Freeform ändern, die Höhe der Root-Ansicht erhöhen, die Benutzeroberfläche erstellen (Schritte 1 bis 5) und dann auf den abgeleiteten Standard zurücksetzen Wenn Sie fertig sind, müssen Sie die Größe der Inhalte nicht als Laufzeitattribute fest codieren. Wenn Sie dies tun, öffnen Sie sich einer Vielzahl von Wartungsproblemen, die versuchen, sowohl 3,5 "- als auch 4" -Geräte zu unterstützen, sowie die Möglichkeit zukünftiger Bildschirmauflösungen.

5
Kyle Clegg

In iOS7 habe ich festgestellt, dass ich, wenn ich einen View in einem UIScrollView auf einem FreeForm-großen ViewController hatte, nicht in der App scrollen würde, egal was ich tat. Ich habe herumgespielt und fand, dass das Folgende 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 nach oben Layout Guide und 0 nach 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. Die Unterseite befindet sich am Ende des Formulars.

  5. Fügen Sie die Zeile hinzu [self.scrollView setContentSize: CGSizeMake (320, 1000)]; an den ViewController, der das scrollView enthält (das 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 zum Layout Ihrer Steuerelemente verwenden.

4
nh32rg

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

- (void)viewDidAppear:(BOOL)animated{

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

}

Es löst die Probleme mit dem Autolayout und funktioniert gut unter iOS7.

4
Lucio Fonseca

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

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

  1. Fügen Sie eine Bildlaufansicht mit Abhängigkeiten hinzu - fügen Sie links, rechts, unten, oben (ohne Ränder) die Überblendung (Ansicht) an.
  2. Fügen Sie eine Stapelansicht mit denselben Einschränkungen für die Bildlaufansicht hinzu.
  3. Stack View Andere Einschränkungen: - stackView.bottom = view.bottom und stackView.width = scrollView.width
  4. Fügen Sie Ihre Ansichten hinzu. In der Bildlaufansicht wird ein Bildlauf basierend auf der Größe der Stapelansicht (im Wesentlichen Ihrer Inhaltsansicht) festgelegt.
3
DharinS

ich möchte meine 5 Cent zur akzeptierten Antwort stellen: Ich habe 2 Tage lang nach Themen 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 von Frames und Inhaltsgrößen usw.

um alles automatisch zu machen, benutze die Lösung aus diesem Link

alles ist klar, leicht, elegant und wirkt auf ios 7 wie ein zauber. ich bin sehr froh über all das

3
jungle_mole

Hier ist eine einfache Lösung.

  1. Stellen Sie das Größenattribut Ihres Ansichtscontrollers im Storyboard auf "Freeform" und legen Sie die gewünschte Größe fest. Stellen Sie sicher, dass er groß genug ist, um den gesamten Inhalt Ihrer Bildlaufansicht darzustellen.

  2. Fügen Sie Ihre Bildlaufansicht hinzu und legen Sie die Einschränkungen wie gewohnt fest. Wenn Sie möchten, dass die Bildlaufansicht der Größe Ihrer Ansicht entspricht, bringen Sie Ihre oberen, unteren, führenden und nachlaufenden Ränder wie üblich an den Überblick an.

  3. Stellen Sie nun sicher, dass in den Unteransichten der Bildlaufansicht Einschränkungen bestehen, die den oberen und den unteren Teil der Bildlaufansicht verbinden. Gleiches für links und rechts, wenn Sie horizontal scrollen.

 enter image description here

3
Hulk_SMASH

Hier ist eine schmuddelige Antwort, die zu der gleichen Lösung für vertikale Bildlaufansichten führt, aber (entgegen dem Ethos von stackoverflow) die Frage nicht beantwortet. Anstelle eines scrollView verwenden Sie einfach ein UITableView, ziehen eine normale UIView in die Kopfzeile und machen sie so groß, wie Sie möchten. Jetzt können Sie den Inhalt im Storyboard scrollen.

2
TimWhiting

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 den Identity Inspector aus.

Fügen Sie der ScrollView im Identitätsinspektor einen contentSize keyPath als size hinzu und setzen Sie ihn auf (320, 1000).

Wegblättern.

0
Alex Zavatone

Anscheinend müssen Sie gar keine Höhe angeben! Was großartig ist, wenn es aus irgendeinem Grund geändert wird (Sie ändern die Größe von Komponenten oder ändern die Schriftgröße).

Ich folgte diesem Tutorial und alles hat funktioniert: http://natashatherobot.com/ios-autolayout-scrollview/

(Randbemerkung: Es ist nicht erforderlich, viewDidLayoutSubviews zu implementieren, es sei denn, Sie möchten die Ansicht zentrieren, daher ist die Liste der Schritte noch kürzer).

Hoffentlich hilft das!

0

Wenn Sie das automatische Layout verwenden, empfiehlt es sich, UITableViewController mit statischen Zellen im Storyboard zu verwenden.

Ich habe auch einmal mit dem Problem konfrontiert, dass eine Ansicht viel mehr Scrollen erfordert. Ändern Sie also die UIScrollView mit der oben genannten Technik.

0
Usman Awan