Das Auto-Layout und die Constraints spielen beim Design in einer iOS App eine große Rolle. Um eine Ansicht mit mehr Inhalt zu füllen, wird hierzu ein UIScrollView verwendet. Beim UIScrollView gibt es eine Besonderheit in Verbindung mit Auto-Layout und Constraints. Grundsätzlich können einzelne Komponenten wie UITextField oder UILabel direkt auf einem UIScrollView platziert werden. Unter der alten Variante mit AutoResizing hat dieses auch keine Probleme gemacht. Leider hat das Auto-Layout und die Constraints hiermit Probleme. Anhand einer Schritt für Schritt Anleitung möchte ich erklären, wie man eine Scroll View entsprechend mit Auto-Layout und Constraints aufbaut.
Erstellen der Beispiel App
Als erstes erstellen wir eine kleine Beispiel App. Dazu gehen Sie im Xcode Menü auf File –> New –> Project oder drücken die Tastenkombination Shift+Command+N. Dann sollten Sie das folgende Fenster sehen :
Hier wählen Sie Single View App aus und klicken auf den Button Next. Als nächstes geben Sie der App noch einen Namen. Für diese Anleitung heißt die App ScrollViewExample. Als nächstes noch die Sprache auswählen, Swift oder Objective-C. Nun sollten die Optionen für das Projekt wie folgt aussehen :
Ich habe hier jetzt Objective-C ausgewählt. Das ist aber egal, da die Anleitung beide Sprachen beinhaltet. Zusätzlich sollten Sie noch ein Team auswählen, einen Firmennamen und einen Identifier eingeben. Als nächstes klicken Sie auf den Button Next und wählen einen entsprechenden Speicherort aus. Nun ist die App erstellt.
Bearbeitung des Storyboards
Als nächstes wechseln Sie in das Main.storyboard. Hier sehen Sie nun einen leeren UIViewController im Format vom iPhone Xr. Aktuell arbeite ich mit Xcode 10.3. Nun rufen Sie mit der Tastenkombination Shift+Command+L die Objects Library auf.
Oben in der Suchzeile wo Objects steht geben Sie UIScollView ein. Dann erscheint nur noch das Object einzeln. Nun klicken Sie auf den Eintrag und ziehen Ihn mit der Maus auf den UIViewController so wie im folgenden Bild :
Als nächstes setzen wir die Constraints für das UIScrollView. Dazu klicken wir auf das kleine Symbol im roten Kreis, wie im folgenden Bild gezeigt :
Hier werden die aktuellen Constraints vom UIScrollView angezeigt. Bei der Spacing Angabe im oberen Teil des Dialogs werden alle Zahlen durch eine 0 ersetzt. Das bedeutet, dass das ScrollView 0 Pixel nach oben, unten, links und rechts ausgerichtet wird. Zusätzlich verändert die ScrollView automatisch Ihre Größe, wenn es zum Beispiel die App auf einem iPhone SE ausgeführt wird. Nun sollte der Dialog wie folgt aussehen :
Als nächstes auf den Button Add 4 Constraints klicken. Nun vergrößert sich die UIScrollView auf die komplette Displaygröße und berücksichtigt auch die Safe Area für das iPhone X, Xs, Xs Max und Xr. Als nächstes legen wir eine UIView auf das UIScrollView. Dieses UIView statten wir ebenfalls wieder mit den gleichen Constraints aus, wie das UIScrollView. Das UIView verändert nicht automatisch seine Größe, wie das UIScrollView. Aktuell sollten Sie folgende Ansicht im Storyboard haben :
Als erstes markieren wir in der Document Outline das View unterhalb des Scroll Views, dass es blau hinterlegt ist. Dann klicken wir das Element nochmals an mit gedrückter Control-Taste und ziehen den Mauszeiger auf das darüber liegende Haupt-View. In dem nun erscheinenden Menü wählen Sie den Punkt Equal Widths aus. Damit setzen Sie die Breite des View automatisch auf die Breite des Haupt-Views. Als weiteren Constraint setzen wir noch die Höhe auf 568 Pixel.
Erstellen des Eingabeformulars
Mit den obenstehenden Schritten haben Sie jetzt die Basis gelegt. In diesem Beispiel werden wir ein Eingabeformular über die UIScrollView realisieren. Ich selber gehe immer davon aus, dass der Anwender den kleinsten Bildschirm hat. Aktuell wäre es hier das iPhone SE, welches den kleinsten Bildschirm hat. Also stellen wir die Ansicht des Storyboards um auf das iPhone SE. Unterhalb des Storyboards gibt es eine Leiste mit mehreren Anzeigen. Eine davon heißt aktuelle View as: iPhone Xr. Siehe roter Kreis im folgenden Bild :
Wenn Sie jetzt auf diesen Text klicken, erscheint eine Auswahl mit allen Gerätetypen von Apple. Hier wählen Sie das zweite Symbol von rechts aus im Bereich Device. Haben Sie auf das Symbol geklickt, ändert sich die Ansicht im Storyboard. Nun können Sie die UILabel und die UITextField auf dem UIView entsprechend Ihren Vorstellungen platzieren. Ich habe hier als Beispiel ein Eingabeformular zum Erfassen von Kontaktdaten angefangen aufzubauen. Da sieht man, dass bei einem iPhone SE spätestens beim Eingabefeld für die Telefaxnummer Schluß ist, wie das folgende Bild zeigt :
Jetzt gibt es zwei Möglichkeiten das Eingabeformular weiter zu erstellen mit den restlichen Eingabefeldern. Die erste Möglichkeit ist, dass Sie jetzt umschalten auf ein größeres iPhone Modell. Die zweite Möglichkeit ist, sie Vergrößern die UIViewController Ansicht. Damit haben Sie weiterhin die Breite von iPhone SE.
Ich empfehle die zweite Möglichkeit, da Sie immer davon ausgehen müssen, dass Anwender mit einem iPhone SE Ihre App starten. Deshalb klicken Sie oben links auf View Controller Scene. Danach öffnen Sie den Size Inspector rechts. Nun wählen sie für Simulator Size den Wert Freeform aus. Die nun erscheinenden Werte für Höhe (Height) und Breite (Width) sind die Größen für ein iPhone SE. Hier verändern Sie nur den Wert für die Höhe (Height) soweit, dass alle Eingabefelder darauf Platz finden. Das bedeutet, dass das View eine Höhe von 687 Pixel haben muss. Nun können für alle UILabels und UITextFields die Constraints entsprechend gesetzt werden. Nun sollte Ihr Storyboard wie folgt aussehen :
Wenn Sie jetzt die App zum Beispiel auf einem iPhone SE oder im Simulator starten, dann werden Sie die beiden Eingabefelder Mobil und E-Mail Adresse nicht sehen. Auch ein runterscrollen funktioniert nicht.
Das UIScrollView über den Content scrollen lassen
Damit jetzt das Eingabeformular entsprechend gescrollt werden kann, muss noch ein wenig Quelltext eingefügt werden. Dazu erstellen Sie zwei IBOutlets vom dem UIScrollView und dem UIView, worauf Sie die ganzen UITextFields und UILabels positioniert haben. Für die Programmiersprache Objective-C sieht der Quelltext wie folgt aus :
-(void)viewDidLayoutSubviews {
_scrolly.contentSize = CGSizeMake(_contentView.frame.size.width, _contentView.frame.size.height);
}
Ich habe die UIScrollView den IBOutlet-Namen scrolly gegeben und für das UIView den Namen contentView. Für die Programmiersprache Swift wie folgt :
func viewDidLayoutSubviews() {
scrolly.contentSize = CGSize(width: contentView.frame.size.width, height: contentView.frame.size.height)
}
Das wichtigste ist die Methode viewDidLayoutSubviews. Diese Methode legt die Inhaltsgröße des UIScrollView fest. Damit brauchen Sie keine Anpassungen der Inhaltsgröße für das UIScrollView berechnen oder manuell ändern. Die Inhaltsgröße passt sich in der Größe immer dem darauf liegenden UIView an.
Das komplett funktionierende Beispiel in Objective-C und Swift finden Sie auf Github.
Für Verbesserungsvorschläge, Probleme und Lob steht Ihnen die Kommentarfunktion zur Verfügung. Schreiben Sie gleich ein Kommentar, wie Ihnen der Beitrag gefallen hat oder welche Probleme Sie bei der Umsetzung hatten.
