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?
ios
xcode
uiscrollview
uistoryboard
Alex Reynolds
quelle
quelle
Antworten:
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
Freeform
anstelle 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 Inspector
und 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 attribute
mit KeyPath vomcontentSize
Typ 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 attribute
mit KeyPathframe
mit 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.
quelle
frame
Attribut nicht definieren . In der Tat haben nicht alle Geräte genau die gleiche Größe (iPhone 5).Hier sind die Schritte
Auto Layout
, die für mich unter XCode 8.2.1 funktioniert haben.Size Inspector
ausView Controller
, und ändern SieSimulated Size
aufFreeform
mit der Höhe 1000 stattFixed
.View Controller
in RootView um .Scroll View
als Unteransicht von RootView und benennen Sie sie in ScrollView um .Vertical Stack View
als Unteransicht von ScrollView und benennen Sie sie in ContentView um .Attributes Inspector
aus InhaltAlle , und ändernDistribution
zuFill Equally
stattFill
.View
als Unteransicht von ContentView und benennen Sie sie in RedView um .Red
als Hintergrund für RedView .View
als Unteransicht von ContentView und benennen Sie sie in BlueView um .Blue
als Hintergrund für Blueview .Update Frames
Schaltfläche.Update Frames
ist eine neue Schaltfläche in Xcode8 anstelle derResolve Auto Layout Issues
Schaltfläche. Es sieht aus wie eine Schaltfläche zum Aktualisieren in der Steuerleiste unter dem Storyboard:Hierarchie anzeigen:
Controller-Szene anzeigen (Höhe: 1000):
Laufen Sie auf dem iPhone7 (Höhe: 1334/2):
quelle
BlueView
oben nachRedView
unten für Anfänger wie mich (Xcode 8.2): 1) Ziehen Sie dasBlueView
FolgendeRedView
(dh sie sollten sich nicht überlappen oder Schritt 4) funktioniert nicht). 2) Öffnen Sie das Pin-Menü unten. 3) Klicken Sie auf den kleinen Pfeil rechts neben der Einschränkung für den oberen Rand. 4) Wählen SieRedView
aus diesem Menü und setzen Sie den Wert auf 0. Dies unterscheidet sich von früheren Xcode-Versionen, in denen Sie Dinge wieEditor
->Pin
-> ...UIStackView
, um die Probleme beim Festlegen von Einschränkungen zu vermeiden.Hier sind die Schritte, die für mich unter iOS 7 und XCode 5 funktioniert haben.
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".
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.
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.
Wählen Sie "Ansicht" und dann "Größeninspektor".
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:
quelle
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:
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:
Sie können dies versuchen, indem
contentSize
Siesize
der 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.
quelle
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:
Setzen Sie alle Einschränkungen auf Bildlaufansicht (dh Bildlaufansicht zuerst korrigieren)
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.
quelle
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.
quelle
Beachten Sie, dass Sie innerhalb von a
UITableView
tatsä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
UIScrollView
mag 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.quelle
Sie sollten die contentSize-Eigenschaft nur für viewDidAppear festlegen, wie in diesem Beispiel:
Es löst die Autolayout-Probleme und funktioniert unter iOS7 einwandfrei.
quelle
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: -
quelle
spacing
Stellen Sie die Stapel so ein , dass zwischen den Unteransichten (untergeordneten Elementen) etwas Platz bleibt. Wenn Sie mehr Platz zwischen nur zwei Unteransichten benötigen, fügen Sie ein untergeordnetes "Spacer" hinzu: eine transparente UIView mit fester Größe.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:
Fügen Sie eine UIScrollView in die Hauptansicht eines ViewControllers ein
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
Platzieren Sie in der ScrollView eine Containeransicht. Stellen Sie die Höhe auf einen beliebigen Wert ein (z. B. 1000).
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.
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.
quelle
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
quelle
Hier ist eine einfache Lösung.
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.
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.
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.
quelle
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.
quelle
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!
quelle
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
contentSize
Siesize
der scrollView im Identitätsinspektor einen Schlüsselpfad als hinzu und setzen Sie ihn auf (320, 1000).Scrolle weg.
quelle
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.
quelle
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
quelle