Angenommen, ich habe in UIStackView weitere Ansichten hinzugefügt, die angezeigt werden können. Wie kann ich den UIStackView
Bildlauf durchführen?
ios
uiscrollview
uistackview
itsaboutcode
quelle
quelle
Antworten:
Für den Fall, dass jemand nach einer Lösung ohne Code sucht , habe ich ein Beispiel erstellt, um dies mithilfe des automatischen Layouts vollständig im Storyboard zu tun.
Sie können es von Github bekommen .
Grundsätzlich, um das Beispiel neu zu erstellen (für vertikales Scrollen):
UIScrollView
und legen Sie die Einschränkungen fest.UIStackView
zum hinzuUIScrollView
Leading
,Trailing
,Top
undBottom
sollten auf diejenigen gleich ausUIScrollView
Width
Einschränkung zwischenUIStackView
und einUIScrollView
.UIStackView
UIViews
auf dieUIStackView
Austausch
Width
für dieHeight
in Schritt 4 und SatzAxis
=Horizontal
in Schritt 5 eine horizontale UIStackView zu erhalten.quelle
Apples Auto Layout Guide enthält einen ganzen Abschnitt über das Arbeiten mit Bildlaufansichten . Einige relevante Ausschnitte:
Außerdem:
Zusammenfassend muss die Inhaltsansicht der Bildlaufansicht (in diesem Fall eine Stapelansicht) an ihren Rändern befestigt werden und ihre Breite und / oder Höhe anderweitig eingeschränkt sein. Dies bedeutet, dass der Inhalt der Stapelansicht (direkt oder indirekt) in der Richtung (den Richtungen) eingeschränkt werden muss, in der das Scrollen gewünscht wird. Dies kann beispielsweise bedeuten, dass jeder Ansicht in einer vertikal scrollenden Stapelansicht eine Höhenbeschränkung hinzugefügt wird. Im Folgenden finden Sie ein Beispiel für das vertikale Scrollen einer Bildlaufansicht mit einer Stapelansicht:
quelle
Need constraints for: Y position or height.
Dieser Fehler wird nur behoben, wenn Sie sowohl eine Breiten- als auch eine Höhenbeschränkung für die Stapelansicht festlegen, wodurch das vertikale Scrollen deaktiviert wird. Funktioniert dieser Code noch für Sie?Die Einschränkungen in der Antwort mit der höchsten Abstimmung hier haben für mich funktioniert, und ich habe ein Bild der Einschränkungen unten eingefügt, die in meinem Storyboard erstellt wurden.
Ich habe jedoch zwei Probleme festgestellt, die anderen bewusst sein sollten:
Nach dem Hinzufügen von Einschränkungen, die denen in der akzeptierten Antwort ähneln, wird der rote Autolayout-Fehler angezeigt
Need constraints for: X position or width
. Dies wurde gelöst, indem ein UILabel als Unteransicht der Stapelansicht hinzugefügt wurde.Ich füge die Unteransichten programmgesteuert hinzu, sodass ich ursprünglich keine Unteransichten im Storyboard hatte. Um die Autolayout-Fehler zu beseitigen, fügen Sie dem Storyboard eine Unteransicht hinzu und entfernen Sie sie beim Laden, bevor Sie Ihre tatsächlichen Unteransichten und Einschränkungen hinzufügen.
Ich habe ursprünglich versucht,
UIButtons
UIStackView hinzuzufügen. Die Schaltflächen und Ansichten würden geladen, die Bildlaufansicht jedoch nicht . Dies wurde durch Hinzufügen gelöstUILabels
anstelle von Schaltflächen zur Stapelansicht . Unter Verwendung der gleichen Einschränkungen wird in dieser Ansichtshierarchie mit den UILabels gescrollt, in den UIButtons jedoch nicht.Ich bin von diesem Problem verwirrt, da die UIButtons Sie scheinen eine IntrinsicContentSize zu haben (wird von der Stapel - Ansicht). Wenn jemand weiß, warum die Tasten nicht funktionieren, würde ich gerne wissen, warum.
Hier ist meine Ansichtshierarchie und Einschränkungen als Referenz:
quelle
Wie Eik sagt
UIStackView
und gutUIScrollView
zusammen spielt, siehe hier .Der Schlüssel ist, dass der
UIStackView
die variable Höhe / Breite für verschiedene Inhalte handhabt undUIScrollView
dann seine Aufgabe gut erledigt, diesen Inhalt zu scrollen / zu springen:quelle
Ich wollte das Gleiche tun und bin auf diesen ausgezeichneten Beitrag gestoßen . Wenn Sie dies programmgesteuert mithilfe der Anker-API tun möchten, ist dies der richtige Weg.
Um es zusammenzufassen, binden Sie Ihre
UIStackView
in Ihre einUIScrollView
und legen Sie die Ankereinschränkungen von so festUIStackView
, dass sie mit denen der folgenden übereinstimmenUIScrollView
:quelle
Aktuell für 2020.
100% Storyboard ODER 100% Code.
Hier ist die einfachste mögliche Erklärung:
Haben Sie eine leere Vollbildszene
Fügen Sie eine Bildlaufansicht hinzu. Ziehen Sie bei gedrückter Ctrl-Taste von der Bildlaufansicht in die Basisansicht , fügen Sie links-rechts-oben-unten und alle Null hinzu.
Fügen Sie der Bildlaufansicht eine Stapelansicht hinzu. Ziehen Sie bei gedrückter Ctrl-Taste von der Stapelansicht in die Bildlaufansicht , fügen Sie links-rechts-oben-unten und alle Null hinzu.
Legen Sie zwei oder drei Etiketten in die Stapelansicht.
Machen Sie aus Gründen der Klarheit die Hintergrundfarbe des Etiketts rot. Stellen Sie die Etikettenhöhe auf 100 ein.
Stellen Sie nun die Stellen Sie Breite jedes UILabels ein:
Überraschenderweise Steuertaste von der
UILabel
auf die Bildlaufansicht, nicht auf den Stapel Ansicht und wählen gleiche Breiten .Wiederholen:
Kontrollieren Sie nicht das Ziehen vom UILabel zum Elternteil des UILabels - gehen Sie zum Großelternteil. (Mit anderen Worten, gehen Sie bis zur Bildlaufansicht und nicht bis zur Stapelansicht.)
So einfach ist das. Das ist das Geheimnis.
Du bist fertig.
Tipp: Sie müssen jedem neuen Element eine Höhe hinzufügen . Jedes Element in einer Bildlaufstapelansicht muss entweder eine Eigengröße (z. B. eine Beschriftung) haben oder eine explizite Höhenbeschränkung hinzufügen.
Der alternative Ansatz:
Oben: Stellen Sie überraschenderweise die Breite der UILabels auf die Breite der Bildlaufansicht (nicht der Stapelansicht) ein.
Abwechselnd...
Ziehen Sie von der Stapelansicht in die Bildlaufansicht und fügen Sie eine Einschränkung "Breite gleich" hinzu. Das scheint seltsam, weil Sie bereits links-rechts gepinnt haben , aber so machen Sie es . Egal wie seltsam es scheint, das ist das Geheimnis.
Sie haben also zwei Möglichkeiten:
oder
Um klar zu sein, machen Sie EINE dieser Methoden, machen Sie NICHT beide.
quelle
Horizontales Scrollen (UIStackView in UIScrollView)
Zum horizontalen Scrollen. Erstellen Sie zunächst ein
UIStackView
und einUIScrollView
und fügen Sie sie folgendermaßen zu Ihrer Ansicht hinzu:In Erinnerung an die zu setzen ,
translatesAutoresizingMaskIntoConstraints
umfalse
auf demUIStackView
und dieUIScrollView
:Damit alles funktioniert, sollten die nachlaufenden, führenden, oberen und unteren Anker
UIStackView
derUIScrollView
Anker gleich sein:Aber der Breitenanker des
UIStackView
Mosts muss gleich oder größer als die Breite desUIScrollView
Ankers sein:Verankern Sie jetzt
UIScrollView
zum Beispiel:Als nächstes würde ich vorschlagen, die folgenden Einstellungen für die
UIStackView
Ausrichtung und Verteilung zu versuchen :Schließlich müssen Sie die
addArrangedSubview:
Methode verwenden, um Ihrem UIStackView Unteransichten hinzuzufügen.Texteinfügungen
Ein zusätzliches Merkmal , dass Sie nützlich finden könnten , ist , dass , weil die
UIStackView
innerhalb einer gehalten wirdUIScrollView
nun Sie den Zugriff auf Texteinschübe haben , um die Dinge sehen ein bisschen schöner.quelle
Fügen Sie dies einfach hinzu zu
viewdidload
:Quelle: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html
quelle
Sie können ScrollableStackView ausprobieren : https://github.com/gurhub/ScrollableStackView
Es ist eine Objective-C- und Swift-kompatible Bibliothek. Es ist über CocoaPods erhältlich .
Beispielcode (Swift)
Beispielcode (Ziel-C)
quelle
Wenn Sie die Stapelansicht vertikal in der Bildlaufansicht zentrieren müssen, entfernen Sie sie einfach.
quelle
Beispiel für eine vertikale Stapelansicht / Bildlaufansicht (mit der Option für das automatische Layout
EasyPeasy
):Stellen Sie einfach sicher, dass jede Höhe Ihrer Unteransicht definiert ist!
quelle
Entwerfen Sie in erster Linie Ihre Ansicht, vorzugsweise in einer Art Skizze, oder machen Sie sich ein Bild davon, was Sie als scrollbaren Inhalt wünschen.
Machen Sie danach die freie Form des Ansichtscontrollers (wählen Sie aus dem Attributinspektor) und stellen Sie Höhe und Breite gemäß der inhaltlichen Größe Ihrer Ansicht ein (aus dem Größeninspektor auszuwählen).
Danach legen Sie im Ansichts-Controller eine Bildlaufansicht ab. Dies ist eine Logik, die in iOS fast immer funktioniert (möglicherweise muss die Dokumentation dieser Ansichtsklasse durchgesehen werden, die Sie über Befehl + Klicken erhalten können diese Klasse oder über googeln)
Wenn Sie mit zwei oder mehr Ansichten arbeiten, beginnen Sie zuerst mit einer Ansicht, die früher eingeführt wurde oder primitiver ist, und wechseln Sie dann zu der Ansicht, die später eingeführt wurde oder moderner ist. Beginnen Sie hier also, da zuerst die Bildlaufansicht eingeführt wurde, zuerst mit der Bildlaufansicht und wechseln Sie dann zur Stapelansicht. Setzen Sie hier die Einschränkungen für die Bildlaufansicht in alle Richtungen gegenüber der Superansicht auf Null. Fügen Sie alle Ihre Ansichten in diese Bildlaufansicht ein und fügen Sie sie dann in die Stapelansicht ein.
Während der Arbeit mit der Stapelansicht
Beginnen Sie zuerst mit Grounds Up (Bottom-Up-Ansatz), dh wenn Sie Beschriftungen, Textfelder und Bilder in Ihrer Ansicht haben, legen Sie diese Ansichten zuerst an (in der Bildlaufansicht) und fügen Sie sie anschließend in die Stapelansicht ein.
Danach optimieren Sie die Eigenschaft der Stapelansicht. Wenn die gewünschte Ansicht immer noch nicht erreicht wird, verwenden Sie eine andere Stapelansicht.
Fügen Sie nach dem Erstellen Ihrer Ansicht eine Einschränkung zwischen der Mutterstapelansicht und der Bildlaufansicht ein, während die untergeordnete Stapelansicht mit der Mutterstapelansicht eingeschränkt wird. Hoffentlich sollte es zu diesem Zeitpunkt gut funktionieren, oder Sie erhalten eine Warnung von Xcode mit Vorschlägen, lesen Sie die darin enthaltenen Informationen und implementieren Sie diese. Hoffentlich sollten Sie jetzt eine Arbeitssicht haben, die Ihren Erwartungen entspricht :).
quelle
Für die verschachtelte oder einzelne Stapelansicht muss die Bildlaufansicht mit der Stammansicht auf eine feste Breite eingestellt werden. Die Hauptstapelansicht innerhalb der Bildlaufansicht muss dieselbe Breite haben. [Meine Bildlaufansicht befindet sich unten in einer Ansicht. Ignorieren Sie sie.]
quelle
Wenn jemand nach einer horizontalen Bildlaufansicht sucht
quelle
Platzieren Sie eine Bildlaufansicht in Ihrer Szene und passen Sie sie so an, dass sie die Szene ausfüllt. Platzieren Sie dann eine Stapelansicht in der Bildlaufansicht und die Schaltfläche Element hinzufügen in der Stapelansicht. Sobald alles vorhanden ist, legen Sie die folgenden Einschränkungen fest:
Code:
Stack View.Width = Scroll View.Width
ist der Schlüssel.quelle
Hinzufügen einer neuen Perspektive für macOS Catalyst. Da MacOS-Apps die Größenänderung von Fenstern unterstützen, ist es möglich, dass Sie
UIStackView
von einem nicht scrollbaren Status zu einem scrollbaren Status wechseln oder umgekehrt. Hier gibt es zwei subtile Dinge:UIStackView
ist für alle Bereiche geeignet.UIScrollView
wird versucht, die Größe zu ändern, um den neu gewonnenen / verlorenen Bereich unter Ihrer Navigationsleiste (oder die Symbolleiste bei macOS-Apps) zu berücksichtigen.Dies wird leider eine Endlosschleife erzeugen. Ich bin nicht sehr vertraut mit
UIScrollView
und seineadjustedContentInset
, aber aus meinem Protokoll in seinerlayoutSubviews
Methode sehe ich das folgende Verhalten:UIScrollView
versucht, seine Grenzen zu verkleinern (da der Bereich unter der Symbolleiste nicht benötigt wird).UIStackView
folgt.UIScrollView
ist er unzufrieden und beschließt, die größeren Grenzen wiederherzustellen. Das fühlt sich für mich sehr seltsam an, da ich das aus dem Protokoll seheUIScrollView.bounds.height == UIStackView.bounds.height
.UIStackView
folgt.Es scheint mir, dass zwei Schritte das Problem beheben würden:
UIStackView.top
aufUIScrollView.topMargin
.contentInsetAdjustmentBehavior
zu.never
.Hier geht es um eine vertikal scrollbare Ansicht mit einer vertikal wachsenden
UIStackView
. Ändern Sie für ein horizontales Paar den Code entsprechend.Hoffe, es hilft jedem in der Zukunft. Ich konnte niemanden finden, der dies im Internet erwähnte, und es hat mich ziemlich lange gekostet, herauszufinden, was passiert ist.
quelle