Utwórz widok przewijania za pomocą Swift: 9 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:31

Kilka miesięcy temu nie wiedziałem o istnieniu Swift i Xcode. Dziś udało mi się opracować niewielką część aplikacji, którą chcę stworzyć. Udało mi się stworzyć coś fajnego, czym chciałbym się z Wami podzielić.

W tym samouczku przeprowadzę Cię przez proces budowania sceny scroll view, w której użytkownicy będą przekierowywani, gdy będą chcieli zarejestrować nowe konto. Po drodze upewnię się, że przedstawię Wam kilka teoretycznych wyjaśnień tego, co robimy, abyście mogli rzeczywiście zrozumieć, co robimy.

Zanim to zrobimy, porozmawiajmy o tym, czym jest Swift i Xcode:

1. Swift to potężny i intuicyjny język programowania dla macOS, iOS, watchOS i tvOS. Pisanie kodu Swift jest interaktywne i zabawne, składnia jest zwięzła, ale wyrazista, a Swift zawiera nowoczesne funkcje, które uwielbiają programiści. Kod Swift jest bezpieczny z założenia, ale także tworzy oprogramowanie, które działa błyskawicznie. Został zaprojektowany do pracy z platformami Apple Cocoa i Cocoa Touch oraz dużą ilością istniejącego kodu Objective-C napisanego dla produktów Apple. Jest on zbudowany na platformie kompilatora open source LLVM i jest zawarty w Xcode od wersji 6, wydanej w 2014 roku. Na platformach Apple używa biblioteki wykonawczej Objective-C, która umożliwia uruchamianie kodu C, Objective-C, C++ i Swift w ramach jednego programu.

2. Xcode to zintegrowane środowisko programistyczne (IDE) dla systemu macOS zawierające zestaw narzędzi programistycznych opracowanych przez firmę Apple do tworzenia oprogramowania dla systemów macOS, iOS, watchOS i tvOS.

Krok 1: Pobierz Xcode

Xcode 10 zawiera wszystko, czego potrzebujesz do tworzenia niesamowitych aplikacji na wszystkie platformy Apple. Teraz Xcode i instrumenty świetnie prezentują się w nowym trybie ciemnym w systemie macOS Mojave. Edytor kodu źródłowego umożliwia łatwiejsze przekształcanie lub refaktoryzację kodu, wyświetlanie zmian kontroli źródła wraz z powiązanym wierszem i szybkie uzyskiwanie szczegółowych informacji na temat różnic w kodzie nadrzędnym. Możesz zbudować własny instrument z niestandardową wizualizacją i analizą danych. Swift szybciej kompiluje oprogramowanie, pomaga dostarczać szybsze aplikacje i generuje jeszcze mniejsze pliki binarne. Zestawy testowe kończą się wielokrotnie szybciej, praca z zespołem jest prostsza i bezpieczniejsza, a także wiele więcej.

Xcode 10 zawiera Swift 4.2, który szybciej kompiluje oprogramowanie, pomaga dostarczać szybsze aplikacje i generuje jeszcze mniejsze pliki binarne. W porównaniu do Swift 4.0 najnowszy kompilator Swift może tworzyć duże aplikacje ponad dwukrotnie szybciej.* W połączeniu z nowym systemem Xcode new build, codzienna edycja, kompilacja i testowanie są znacznie szybsze. Zoptymalizowane pod kątem najnowszego wielordzeniowego sprzętu Mac, Xcode i Swift tworzą błyskawiczną platformę programistyczną.

Krok 2: Zacznijmy

Więc co zrobimy, to przejdziemy do Xcode i stworzymy nowy projekt. Po kliknięciu nowego projektu nasza aplikacja stanie się aplikacją z jednym widokiem. Dla tych, którzy nie wiedzą, aplikacja z pojedynczym widokiem oznacza, że będziesz musiał zacząć wszystko od zera i że będzie jeden widok, który możemy zaprogramować.

Nazwij swój produkt TutorialApp. Jeśli jesteś doświadczonym programistą, który publikuje aplikacje w App Store, prawdopodobnie będziesz miał zespół, ale jeśli jesteś nowy i nie masz opublikowanych aplikacji, możesz pominąć to pole. W nazwie organizacji możesz wpisać nazwę firmy na wypadek, gdybyś ją posiadał, w moim przypadku po prostu zatrzymam MacBooka Pro. Wtedy identyfikator organizacji jest traktowany jako coś w rodzaju unikalnego identyfikatora twojego projektu, dlatego możesz pisać, co chcesz. Język na pewno będzie szybki.

Więc naciśnij dalej i zapiszmy projekt na pulpicie, aby był łatwy dostęp.

Nowy projekt składa się z trzech plików, AppDelegate.swift, ViewController.swift i gwiazdy tego samouczka: Main.storyboard. Under Deployment Info > Device Orientation w ogólnych ustawieniach projektu, ustaw Devices to iPhone. Ponieważ jest to aplikacja tylko w orientacji pionowej, odznacz opcje Pozioma lewa i Pozioma prawa. Otwórz Main.storyboard w nawigatorze projektu, aby wyświetlić go w edytorze interfejsu Builder:

Nie będziemy wprowadzać żadnych zmian w konfiguracji i przejdziemy od razu do głównego storyboardu. Ponieważ stworzyliśmy aplikację z jednym widokiem, stworzyliśmy prosty, pojedynczy, pusty widok. To jest coś, nad czym musimy popracować.

Krok 3: Praca w interfejsie użytkownika

Oficjalna terminologia scenorysów dla kontrolera widoku to „scena”, ale możesz używać tych terminów zamiennie. Scena reprezentuje kontroler widoku w scenorysie.

Tutaj widzisz pojedynczy kontroler widoku zawierający pusty widok. Strzałka wskazująca kontroler widoku z lewej strony wskazuje, że jest to początkowy kontroler widoku, który ma być wyświetlany dla tego scenorysu. Projektowanie układu w edytorze scenorysów odbywa się przez przeciągnięcie kontrolek z Biblioteki obiektów (patrz prawy górny róg) do kontrolera widoku.

Aby poczuć, jak działa edytor scenorysów, przeciągnij niektóre kontrolki z biblioteki obiektów do pustego kontrolera widoku, jak widać na filmie.

Podczas przeciągania kontrolek powinny one pojawić się w konspektu dokumentu po lewej stronie.

Możesz utworzyć żądany interfejs użytkownika. W moim przypadku użyłem tego, który widzisz na zdjęciu.

Krok 4: Opracuj drugi kontroler widoku i zainicjuj przejścia (przejścia)

Tak więc w mojej aplikacji, gdy użytkownik naciśnie przycisk „Zarejestruj nowe konto”, chcę, aby został przekierowany na stronę rejestracji konta. W tym celu każda strona jest nową sceną, nowym wyświetlaczem. Z tego powodu musimy stworzyć drugi kontroler widoku, który znajdziesz w bibliotece obiektów.

Wpisz kontroler widoku i umieść go obok początkowego kontrolera widoku. Ta scena będzie odpowiedzialna za kontroler widoku rejestru. Przekierowanie na tę stronę można wykonać na dwa sposoby:

1. możemy to zrobić ręcznie, gdy tworzymy połączenie akcji z przycisku do innej kontrolki widoku
2. możemy to zrobić programowo

To, co zdecydowałem się zrobić, to zrobić to ręcznie. To proste:

1. Wykonaj jedno kliknięcie lewym przyciskiem myszy (w moim przypadku Zarejestruj nowe konto)
2. Przytrzymaj polecenie i kliknij lewym przyciskiem myszy, aby przeciągnąć go na scenę kontroli rejestru.
3. Zwolnij go tam i wybierz „Prezentuj modalnie”

Krok 5: Utwórz klasę programowania dla procesu rejestracji

Więc teraz chcemy stworzyć dedykowaną klasę kodowania dla nowej sceny.

Aby to zrobić, musisz wykonać następujące czynności:

• kliknij prawym przyciskiem myszy folder swojego projektu
• kliknij nowy plik o nazwie kakao touch class
• w klasie napisz: RegisterVC
• BARDZO WAŻNE! Upewnij się, że podklasa musi być typu UIViewController
• język musi być szybki.
• kliknij dalej i zapisz swoją klasę kakao w głównym katalogu głównym projektu.
• Kliknij główny scenorys i przejdź do nowego kontrolera widoku
• kliknij żółty przycisk, który znajduje się nad nim
• po prawej przejdź do inspektora klas i zrób odniesienie do Rejestru VC (klasa kostiumu, klasa = RejestrVC

Krok 6: Zbuduj poziome przesuwanie strony

W systemie iOS widoki przewijania służą do wyświetlania treści, które nie mieszczą się w całości na ekranie. Widoki przewijania mają dwa główne cele:

Aby umożliwić użytkownikom przeciąganie obszaru zawartości, którą chcą wyświetlić, aby umożliwić użytkownikom powiększanie lub pomniejszanie wyświetlanej zawartości za pomocą gestów uszczypnięcia. Wspólna kontrolka używana w aplikacjach systemu iOS - UITableView - jest podklasą UIScrollView i zapewnia doskonały sposób wyświetlania zawartości większej niż ekran.

Do czego służą podstrony w poziomym przesunięciu?

Cóż, gdybym miał stworzyć 6 różnych stron, oznaczałoby to, że muszę stworzyć dedykowaną klasę dla każdej z nich i nie jest tak wygodnie przekazywać informacje z jednej klasy do drugiej. Kiedy na przykład wpiszę mój e-mail, a następnie kliknę dalej, jeśli mam inny kontroler widoku, opuszczę pierwszą stronę kontrolera widoku, a następnie zostanie zaprezentowana druga. W tym przypadku informacje z pierwszego kontrolera widoku muszą zostać przekazane do następnego, a następnie ponownie do trzeciego kontrolera widoku itp. Kiedy mam wszystkie potrzebne kontrolery widoku, będę musiał zebrać wszystkie dane ze wszystkich strony i wyślij je na serwer. Byłoby to więc naprawdę skomplikowane.

Przechodząc więc do tworzenia tego kontrolera widoku, w moim przypadku miałem 5 stron, które chciałem stworzyć:

1. E-mail
2. Pełne imię i nazwisko
3. Hasło
4. Data urodzenia
5. Płeć

Oznacza to, że kontroler widoku, który stworzymy, musi być 5 razy większy niż ten, który wykonaliśmy wcześniej.

Wybierz kontroler widoku i przejdź do prawego górnego rogu, kliknij ikonę linijki i edytuj symulowany rozmiar. Wybierz Freeform, aby dostosować szerokość i wysokość. Domyślna szerokość ekranu odpowiednia dla iPhone'a 8 to 375, więc jeśli pomnożę 375*5 = 1875. I proszę bardzo, masz rozszerzony kontroler widoku.

Podobnie postępujesz zgodnie z tym samym procesem dla wszystkich różnych telefonów i rozmiarów ekranu.

Aby widok przewijania działał, potrzebujemy obiektu widoku przewijania. Scroll View udostępnia mechanizm wyświetlania zawartości, która jest większa niż rozmiar okna aplikacji. Kliknij na ten obiekt, przeciągnij go i umieść w lewym górnym rogu kontrolera widoku i upewnij się, że X i Y są na pozycjach zerowych, a rozciągnięcie jest zgodne z kontrolerem widoku.

Scroll View pozwala nam tylko na przewijanie, nic więcej. Następnie musimy dodać widok treści, w którym będą przechowywane inne widoki. Możesz znaleźć UIView - reprezentuje prostokątny region, w którym rysuje i odbiera zdarzenia - w bibliotece obiektów. Po prostu kliknij i przeciągnij go do widoku przewijania i ponownie odpowiednio rozciągnij.

Wybierz widok przewijania z lewego panelu, a nazwiemy wyrównanie 0, 0, 0, 0 i dodamy ograniczenia. Zrób to samo dla widoku zawartości.

Krok 7: Opracuj interfejs użytkownika dla podstron przesuwania w poziomie

W tym kroku musisz stworzyć UI swoich podstron. To, co zdecydowałem się zrobić, to zrobić prototyp w Sketchu, a następnie zbudować go w Xcode.

Krok 8: Zaimplementuj projekt w Xcode

Następnym krokiem jest zaimplementowanie tego projektu w Xcode. W tym celu należy utworzyć połączenia wylotowe dla wszystkich podstron i utworzyć kolejną dla „widoku matki”, czyli jedno połączenie wylotowe dla całego sterownika widoku.

Elementy w scenorysie są połączone z kodem źródłowym. Ważne jest, aby zrozumieć związek, jaki ma storyboard z pisanym kodem.

W scenorysie scena reprezentuje jeden ekran zawartości i zwykle jeden kontroler widoku. Kontrolery widoków implementują zachowanie Twojej aplikacji i zarządzają pojedynczym widokiem zawartości z jego hierarchią widoków podrzędnych. Koordynują przepływ informacji między modelem danych aplikacji, który zawiera dane aplikacji, a widokami wyświetlającymi te dane, zarządzają cyklem życia swoich widoków treści, obsługują zmiany orientacji po obróceniu urządzenia, definiują nawigację w aplikacji i zaimplementuj zachowanie, aby odpowiadać na dane wejściowe użytkownika. Wszystkie obiekty kontrolera widoku w systemie iOS są typu UIViewController lub jednej z jego podklas.

Definiujesz zachowanie kontrolerów widoku w kodzie, tworząc i implementując niestandardowe podklasy kontrolera widoku. Następnie możesz utworzyć połączenie między tymi klasami i scenami w swoim scenorysie, aby uzyskać zachowanie zdefiniowane w kodzie i interfejs użytkownika zdefiniowany w scenorysie.

Xcode utworzył już jedną taką klasę, na którą patrzyłeś wcześniej, ViewController.swift, i połączył ją ze sceną, nad którą pracujesz w swoim scenorysie. Gdy dodasz więcej scen, sam nawiążesz to połączenie w Inspektorze tożsamości. Inspektor tożsamości umożliwia edycję właściwości obiektu w scenorysie powiązanych z tożsamością tego obiektu, na przykład klasy, do której należy obiekt.

Tworzenie gniazd dla interfejsu użytkownika ElementsOutlets umożliwiają odwoływanie się do obiektów interfejsu - obiektów dodanych do scenorysu - z plików kodu źródłowego. Aby utworzyć gniazdko, przeciągnij klawisz Control z określonego obiektu w scenorysie do pliku kontrolera widoku. Ta operacja tworzy właściwość obiektu w pliku kontrolera widoku, która umożliwia dostęp do tego obiektu i manipulowanie nim z poziomu kodu w czasie wykonywania

1. Otwórz swój scenorys, Main.storyboard.
2. Kliknij przycisk Asystent na pasku narzędzi Xcode w prawym górnym rogu Xcode, aby otworzyć edytor asystenta. Jeśli potrzebujesz więcej miejsca do pracy, zwiń nawigator projektu i obszar narzędziowy, klikając przyciski Nawigator i Narzędzia na pasku narzędzi Xcode.
3. Możesz także zwinąć widok konspektu.

Na pasku wyboru edytora, który pojawia się u góry edytora asystenta, zmień edytor asystenta z Podglądu na Automatyczny > ViewController.swift.

Kliknij podstronę i przeciągnij do odpowiedniej klasy w kodzie.

Krok 9: Zintegruj niestandardowe gesty

GEST PRZESUWANIA

Gest machnięcia występuje, gdy użytkownik przesuwa jeden lub więcej palców po ekranie w określonym kierunku poziomym lub pionowym. Użyj klasy UISwipeGestureRecognizer do wykrywania gestów przesunięcia.

Implementacja gestu machnięcia

Krok 1: Dodaj gesty machnięcia w metodzie viewDidLoad()

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) }

Krok 2: Sprawdź wykrywanie gestów w metodzie handleGesture() func handleGesture(gesture: UISwipeGestureRecognizer) -> Void { if gesture.direction == UISwipeGestureRecognizerDirection.right { print("Przesuń w prawo") } else if gesture.direction == UISwipeGestureRecognizerDirection. left { print("Przesuń w lewo") } else if gesture.direction == UISwipeGestureRecognizerDirection.up { print("Przesuń w górę") } else if gesture.direction == UISwipeGestureRecognizerDirection.down { print("Przesuń w dół") } }

W mojej aplikacji chciałem użyć swipeRight, ale mogłem użyć tego, który jest bardziej odpowiedni dla Twojej aplikacji.

Teraz zaimplementujmy to w naszym kodzie.

Wchodzimy do registerVC.swift, który utworzyliśmy wcześniej i piszemy kod, jak widać na zdjęciach.

WYJAŚNIENIE KODEKSU

niech current_x pobiera bieżącą pozycję ScrollView (pozycja pozioma)let screen_width pobiera szerokość ekranu, odejmując ten rozmiar niech new_x od aktualnej pozycji scrollview, wracam przez szerokość ekranu, jeśli current_x > 0 dopóki nie jest większy niż 0 - 0 to pierwsza strona.

I gotowe!

Dobra robota Panowie!