Erstellen Sie eine Scroll-Ansicht mit Swift - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:19

Vor ein paar Monaten wusste ich nicht, dass es Swift und Xcode gibt. Heute konnte ich einen kleinen Teil der Anwendung entwickeln, die ich erstellen möchte. Ich konnte etwas Cooles kreieren, was ich gerne mit euch teilen möchte.

In diesem Tutorial werde ich Sie durch den Prozess der Erstellung einer Scroll-View-Szene führen, in der Benutzer umgeleitet werden, wenn sie ein neues Konto registrieren möchten. Unterwegs werde ich sicherstellen, dass Sie einige theoretische Erklärungen zu den Dingen geben, die wir tun, damit Sie tatsächlich verstehen, was wir tun.

Bevor wir das tun, lassen Sie uns über Swift und Xcode sprechen:

1. Swift ist eine leistungsstarke und intuitive Programmiersprache für macOS, iOS, watchOS und tvOS. Das Schreiben von Swift-Code ist interaktiv und macht Spaß, die Syntax ist prägnant und dennoch ausdrucksstark, und Swift enthält moderne Funktionen, die Entwickler lieben. Swift-Code ist vom Design her sicher, produziert aber auch Software, die blitzschnell läuft. Es wurde entwickelt, um mit den Frameworks Cocoa und Cocoa Touch von Apple und dem großen Bestand an vorhandenem Objective-C-Code zu arbeiten, der für Apple-Produkte geschrieben wurde. Es wurde mit dem Open-Source-LLVM-Compiler-Framework erstellt und ist seit Version 6, die 2014 veröffentlicht wurde, in Xcode enthalten. Auf Apple-Plattformen verwendet es die Objective-C-Laufzeitbibliothek, die die Ausführung von C-, Objective-C-, C++- und Swift-Code ermöglicht innerhalb eines Programms.

2. Xcode ist eine integrierte Entwicklungsumgebung (IDE) für macOS, die eine Reihe von Softwareentwicklungstools enthält, die von Apple für die Entwicklung von Software für macOS, iOS, watchOS und tvOS entwickelt wurden.

Schritt 1: Xcode herunterladen

Xcode 10 enthält alles, was Sie brauchen, um fantastische Apps für alle Apple-Plattformen zu erstellen. Jetzt sehen Xcode und Instruments im neuen Dark Mode auf macOS Mojave großartig aus. Mit dem Quellcode-Editor können Sie Code einfacher transformieren oder umgestalten, Änderungen der Quellcodeverwaltung neben der zugehörigen Zeile anzeigen und schnell Details zu den Unterschieden im Upstream-Code abrufen. Sie können Ihr eigenes Instrument mit benutzerdefinierter Visualisierung und Datenanalyse bauen. Swift kompiliert Software schneller, hilft Ihnen, schnellere Apps bereitzustellen und generiert noch kleinere Binärdateien. Testsuiten werden um ein Vielfaches schneller abgeschlossen, die Arbeit im Team ist einfacher und sicherer und vieles mehr.

Xcode 10 enthält Swift 4.2, das Ihre Software schneller kompiliert, Ihnen hilft, schnellere Apps bereitzustellen und noch kleinere Binärdateien generiert. Im Vergleich zu Swift 4.0 kann der neueste Swift-Compiler große Apps mehr als doppelt so schnell erstellen.* In Kombination mit dem neuen Xcode New Build-System ist Ihr täglicher Bearbeitungs-, Build- und Test-Workflow viel schneller. Optimiert für die neueste Multi-Core-Mac-Hardware sorgen Xcode und Swift für eine blitzschnelle Entwicklungsplattform.

Schritt 2: Fangen wir an

Was wir also tun werden, ist zu Xcode zu gehen und ein neues Projekt zu erstellen. Sobald wir auf ein neues Projekt klicken, wird unsere Anwendung eine Einzelansicht-App sein. Für diejenigen, die es nicht wissen, bedeutet eine Einzelansicht-App, dass Sie alles von vorne beginnen müssen und dass es eine einzige Ansicht gibt, die wir programmieren können.

Benennen Sie Ihr Produkt TutorialApp. Wenn Sie ein erfahrener Entwickler sind, der Apps im App Store veröffentlicht, haben Sie wahrscheinlich ein Team, aber wenn Sie neu sind und keine Anwendungen veröffentlicht haben, können Sie dieses Feld überspringen. In den Organisationsnamen können Sie den Namen der Firma schreiben, falls Sie eine haben, in meinem Fall werde ich nur das MacBook Pro behalten. Dann wird die Organisationskennung so etwas wie eine eindeutige Kennung Ihres Projekts betrachtet, daher können Sie schreiben, was Sie wollen. Die Sprache wird auf jeden Fall schnell sein.

Drücken Sie also auf Weiter und speichern wir das Projekt auf dem Desktop, damit es leicht zugänglich ist.

Das neue Projekt besteht aus drei Dateien, AppDelegate.swift, ViewController.swift und dem Star dieses Tutorials: Main.storyboard. Setzen Sie unter Bereitstellungsinfo > Geräteausrichtung in den allgemeinen Projekteinstellungen Geräte auf iPhone. Da es sich um eine App nur im Hochformat handelt, deaktivieren Sie die Optionen Querformat links und Querformat rechts. Öffnen Sie Main.storyboard im Projektnavigator, um es im Interface Builder-Editor anzuzeigen:

Wir werden keine Änderungen an der Konfiguration vornehmen und gehen direkt zum Hauptstoryboard. Da wir eine Einzelansicht-App erstellt haben, haben wir eine einfache, einzelne, leere Ansicht erstellt. Daran müssen wir arbeiten.

Schritt 3: Arbeiten in der Benutzeroberfläche

Die offizielle Storyboard-Terminologie für einen Ansichtscontroller ist „Szene“, aber Sie können die Begriffe austauschbar verwenden. Eine Szene repräsentiert einen Ansichtscontroller im Storyboard.

Hier sehen Sie einen einzelnen View-Controller, der eine leere View enthält. Der Pfeil, der von links auf den Ansichtscontroller zeigt, zeigt an, dass es sich um den anfänglichen Ansichtscontroller handelt, der für dieses Storyboard angezeigt werden soll. Das Entwerfen eines Layouts im Storyboard-Editor erfolgt durch Ziehen von Steuerelementen aus der Objektbibliothek (siehe obere rechte Ecke) in Ihren Ansichtscontroller.

Um ein Gefühl für die Funktionsweise des Storyboard-Editors zu bekommen, ziehen Sie einige Steuerelemente aus der Objektbibliothek in den leeren Ansichtscontroller, wie im Video zu sehen.

Wenn Sie Steuerelemente hineinziehen, sollten sie in der Dokumentgliederung auf der linken Seite angezeigt werden.

Sie können die gewünschte Benutzeroberfläche erstellen. In meinem Fall habe ich das verwendet, was Sie auf dem Bild sehen.

Schritt 4: Entwickeln eines Second View Controllers und Initiieren von Segues (Übergängen)

Wenn der Benutzer in meiner App also auf die Schaltfläche "Neues Konto registrieren" drückt, möchte ich, dass er auf die Seite "Konto registrieren" weitergeleitet wird. Dafür ist jede einzelne Seite eine neue Szene, ein neues Display. Aus diesem Grund müssen wir einen zweiten View-Controller erstellen, den Sie in der Objektbibliothek finden.

Geben Sie Ansichtscontroller ein und platzieren Sie ihn neben Ihrem ursprünglichen Ansichtscontroller. Diese Szene ist für den Registeransicht-Controller verantwortlich. Die Umleitung zu dieser Seite kann auf zwei Arten erfolgen:

1. Wir können dies manuell tun, wenn wir eine Aktionsverbindung von der Schaltfläche zum anderen Ansichtssteuerelement herstellen
2. Wir können es programmatisch tun

Ich habe mich dafür entschieden, es manuell zu machen. So einfach ist es:

1. Machen Sie einen Linksklick auf Ihre Schaltfläche (in meinem Fall Registrieren eines neuen Kontos)
2. Halten Sie den Befehl gedrückt und klicken Sie mit der linken Maustaste, um ihn in die Registersteuerungsszene zu ziehen.
3. Lassen Sie es dort los und wählen Sie "Modalell präsentieren"

Schritt 5: Programmierklasse für Registrierungsprozess erstellen

Nun wollen wir also eine dedizierte Codierungsklasse für die neue Szene erstellen.

Dazu müssen Sie die folgenden Schritte ausführen:

• Rechtsklick auf deinen Projektordner
• Klicken Sie auf die neue Datei mit dem Namen Cocoa Touch Class
• in der Klasse schreiben: RegisterVC
• SEHR WICHTIG! Stellen Sie sicher, dass die Unterklasse vom Typ UIViewController. sein muss
• Sprache muss schnell sein.
• Klicken Sie auf Weiter und speichern Sie Ihre Kakaoklasse im Hauptverzeichnis Ihres Projekts.
• Klicken Sie auf das Hauptstoryboard und gehen Sie zum neuen Ansichtscontroller
• klicke auf den gelben Button, der darüber platziert ist
• rechts gehen Sie zum Klasseninspektor und verweisen Sie auf das Register VC (Kostümklasse, Klasse = RegisterVC

Schritt 6: Erstellen Sie den horizontalen Swipe der Seite

In iOS werden Bildlaufansichten verwendet, um Inhalte anzuzeigen, die nicht vollständig auf den Bildschirm passen. Scroll-Ansichten haben zwei Hauptzwecke:

Damit Benutzer den Bereich des anzuzeigenden Inhalts ziehen können, damit Benutzer mit den Pinch-Gesten in den angezeigten Inhalt hinein- oder herauszoomen. Ein gängiges Steuerelement, das in iOS-Apps verwendet wird – UITableView – ist eine Unterklasse von UIScrollView und bietet eine großartige Möglichkeit, Inhalte anzuzeigen, die größer als der Bildschirm sind.

Was nützen Unterseiten beim horizontalen Wischen?

Nun, wenn ich 6 verschiedene Seiten erstellen würde, würde das bedeuten, dass ich für jede eine eigene Klasse erstellen müsste und es nicht so bequem ist, Informationen von einer Klasse an eine andere weiterzugeben. Wenn ich zum Beispiel meine E-Mail eingebe und dann auf Weiter klicke, verlasse ich, wenn ich einen anderen Ansichtscontroller habe, die erste Seite des Ansichtscontrollers und dann wird die zweite angezeigt. In diesem Fall müssen die Informationen des ersten View-Controllers an den nächsten und dann wieder an den dritten View-Controller weitergegeben werden usw. Wenn ich alle View-Controller habe, die ich benötige, muss ich alle Daten von allen zusammentragen die Seiten und senden Sie sie an den Server. Das wäre also wirklich komplex.

Um mit der Erstellung dieses Ansichtscontrollers fortzufahren, hatte ich in meinem Fall 5 Seiten, die ich erstellen wollte:

1. Email
2. Vollständiger Name
3. Passwort
4. Geburtsdatum
5. Geschlecht

Dies bedeutet, dass der View-Controller, den wir erstellen werden, fünfmal größer sein muss als der zuvor erstellte.

Wählen Sie Ihren Ansichtscontroller aus und gehen Sie zur oberen rechten Ecke und klicken Sie auf das Linealsymbol und bearbeiten Sie die simulierte Größe. Sie wählen Freeform, um die Breite und Höhe anzupassen. Die Standardbreite des Bildschirms, die für das iPhone 8 geeignet ist, beträgt 375, wenn ich also 375 * 5 = 1875 multipliziere. Und los geht's, Sie haben einen erweiterten Ansichtscontroller.

In ähnlicher Weise befolgen Sie den gleichen Vorgang für alle verschiedenen Telefone und Bildschirmgrößen.

Damit die Scroll-Ansicht funktioniert, benötigen wir ein Scroll-View-Objekt. Bildlaufansicht bietet einen Mechanismus zum Anzeigen von Inhalten, die größer als die Größe des Anwendungsfensters sind. Klicken Sie auf dieses Objekt, ziehen Sie es und platzieren Sie es in der oberen linken Ecke des Ansichtscontrollers und stellen Sie sicher, dass X und Y auf Nullpositionen stehen und die Dehnung entsprechend Ihrem Ansichtscontroller ist.

Scroll View erlaubt uns nur zu scrollen, sonst nichts. Dann müssen wir eine Inhaltsansicht hinzufügen, die andere Ansichten speichert. Sie finden das UIView - es stellt einen rechteckigen Bereich dar, in dem es Ereignisse zeichnet und empfängt - in der Objektbibliothek. Klicken Sie einfach darauf, ziehen Sie es in die Scroll-Ansicht und strecken Sie es erneut entsprechend.

Wählen Sie die Bildlaufansicht im linken Bereich aus und wir nennen die Ausrichtung 0, 0, 0, 0 und fügen Einschränkungen hinzu. Machen Sie dasselbe für die Inhaltsansicht.

Schritt 7: Entwickeln Sie die Benutzeroberfläche für die Unterseiten des horizontalen Swipe

In diesem Schritt müssen Sie die Benutzeroberfläche Ihrer Unterseiten erstellen. Ich habe mich dafür entschieden, einen Prototyp in Sketch zu erstellen und ihn dann in Xcode zu erstellen.

Schritt 8: Implementieren Sie das Design in Xcode

Der nächste Schritt besteht darin, dieses Design in Xcode zu implementieren. Dazu müssen Sie für alle Unterseiten Abgangsanschlüsse anlegen und einen weiteren für die "Mutteransicht", also einen Abgangsanschluss für die gesamte Ansichtssteuerung.

Elemente in einem Storyboard sind mit Quellcode verknüpft. Es ist wichtig, die Beziehung zwischen einem Storyboard und dem von Ihnen geschriebenen Code zu verstehen.

In einem Storyboard stellt eine Szene einen Inhaltsbildschirm und normalerweise einen Ansichtscontroller dar. Ansichtscontroller implementieren das Verhalten Ihrer App und verwalten eine einzelne Inhaltsansicht mit ihrer Hierarchie von Unteransichten. Sie koordinieren den Informationsfluss zwischen dem Datenmodell der App, das die Daten der App kapselt, und den Ansichten, die diese Daten anzeigen, verwalten den Lebenszyklus ihrer Inhaltsansichten, verarbeiten Ausrichtungsänderungen beim Drehen des Geräts, definieren die Navigation in Ihrer App, und implementieren Sie das Verhalten, um auf Benutzereingaben zu reagieren. Alle Ansichtscontrollerobjekte in iOS sind vom Typ UIViewController oder einer seiner Unterklassen.

Sie definieren das Verhalten Ihrer Ansichtscontroller im Code, indem Sie benutzerdefinierte Ansichtscontroller-Unterklassen erstellen und implementieren. Anschließend können Sie eine Verbindung zwischen diesen Klassen und Szenen in Ihrem Storyboard herstellen, um das im Code definierte Verhalten und die in Ihrem Storyboard definierte Benutzeroberfläche zu erhalten.

Xcode hat bereits eine solche Klasse erstellt, die Sie sich zuvor angesehen haben, ViewController.swift, und sie mit der Szene verbunden, an der Sie in Ihrem Storyboard arbeiten. Wenn Sie weitere Szenen hinzufügen, stellen Sie diese Verbindung im Identitätsinspektor selbst her. Mit dem Identitätsinspektor können Sie Eigenschaften eines Objekts in Ihrem Storyboard bearbeiten, die sich auf die Identität dieses Objekts beziehen, z. B. zu welcher Klasse das Objekt gehört.

Erstellen von Outlets für UI-ElementeOutlets bieten eine Möglichkeit zum Referenzieren von Schnittstellenobjekten – den Objekten, die Sie Ihrem Storyboard hinzugefügt haben – aus Quellcodedateien. Um einen Ausgang zu erstellen, ziehen Sie bei gedrückter Strg-Taste von einem bestimmten Objekt in Ihrem Storyboard zu einer Ansichts-Controller-Datei. Diese Operation erstellt eine Eigenschaft für das Objekt in Ihrer Ansichts-Controller-Datei, mit der Sie zur Laufzeit vom Code aus auf dieses Objekt zugreifen und es bearbeiten können

1. Öffnen Sie Ihr Storyboard Main.storyboard.
2. Klicken Sie auf die Schaltfläche Assistent in der Xcode-Symbolleiste in der oberen rechten Ecke von Xcode, um den Assistenten-Editor zu öffnen. Wenn Sie mehr Platz zum Arbeiten benötigen, reduzieren Sie den Projektnavigator und den Dienstprogrammbereich, indem Sie in der Xcode-Symbolleiste auf die Schaltflächen Navigator und Dienstprogramme klicken.
3. Sie können die Gliederungsansicht auch reduzieren.

Ändern Sie in der Editor-Auswahlleiste, die oben im Assistenten-Editor angezeigt wird, den Assistenten-Editor von Vorschau auf Automatisch > ViewController.swift.

Klicken Sie auf die Unterseite und ziehen Sie sie in die entsprechende Klasse im Code.

Schritt 9: Integrieren Sie benutzerdefinierte Gesten

Wischgeste

Eine Wischgeste tritt auf, wenn der Benutzer einen oder mehrere Finger in einer bestimmten horizontalen oder vertikalen Richtung über den Bildschirm bewegt. Verwenden Sie die UISwipeGestureRecognizer-Klasse, um Wischgesten zu erkennen.

Implementierung der Wischgeste

Schritt 1: Streichgeste(n) in der Methode viewDidLoad() hinzufügen

override func viewDidLoad() { super.viewDidLoad()

let swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer(swipeLeft)

let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer(swipeRight)

let swipeUp = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer(swipeUp)

let swipeDown = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture)) swipeDown.direction =.down self.view.addGestureRecognizer(swipeDown) }

Schritt 2: Überprüfen Sie die Gestenerkennung in handleGesture() Methode func handleGesture(gesture: UISwipeGestureRecognizer) -> Void { if gesture.direction == UISwipeGestureRecognizerDirection.right { print("Swipe Right") } else if geste.direction == UISwipeGestureRecognizerDirection. left { print("Swipe Left") } else if gesture.direction == UISwipeGestureRecognizerDirection.up { print("Swipe Up") } else if gesture.direction == UISwipeGestureRecognizerDirection.down { print("Swipe Down") } }

In meiner App wollte ich swipeRight verwenden, konnte aber diejenige verwenden, die für Ihre Anwendung besser geeignet ist.

Lassen Sie uns dies nun in unseren Code implementieren.

Wir gehen auf die zuvor erstellte registerVC.swift und schreiben den Code wie auf den Bildern zu sehen.

ERKLÄRUNG DES CODES

let current_x die aktuelle Position des ScrollViews (horizontale Position) erhalten let screen_width die Breite des Bildschirms erhalten, diese Größe abziehen lassen new_x von der aktuellen Position des ScrollViews, ich komme um die Breite des Bildschirms zurück, wenn current_x > 0 bis es nicht mehr als 0 ist - 0 ist die 1. Seite.

Und wir sind fertig!

Gute Arbeit, Leute!