Moja droga do ponownego uczenia się systemu iOS, część 1

Ideą tego bloga jest podzielenie się z wami tym, czego się nauczyłem w możliwie najdrobniejszych szczegółach i utrwalenie/odpowiedzenie na wszelkie pytania, które miałem, kiedy uczyłem się z samouczków „od zera do bohatera”.

W tym poście zacznę od czegoś BARDZO prostego, co może zająć doświadczonemu programiście 5 minut lub mniej, aby go stworzyć. Ale hej, wszyscy od czegoś zaczynamy, więc czemu nie tutaj

Oto zapowiedź tego, co będziemy tutaj robić:

Podobnie jak w przypadku każdej tradycji języków programowania, stworzymy aplikację „witaj świecie”, w której po naciśnięciu przycisku powyższy tekst wyświetli losowo tekst „witaj świecie” w różnych językach.

Celem tej aplikacji jest zrozumienie podstaw:

1. UILable, UIButton i UIImageView UIKit.
2. Szybkie deklaracje zmiennych i tablic.
3. IBOutlety i IBActions.

Więc zacznijmy!

Najpierw otwórz swój Xcode i utwórz nową aplikację w następujący sposób:

Oto kluczowa część: wybierz stuknięcie iOS zamiast stuknięcia wieloplatformowego, w przeciwnym razie nie możesz później wybrać Storyboard i musisz pracować z SwiftUI.

Teraz w obszarze Nazwa produktu wpisz „Hello World App” lub inne fantazyjne nazwy, które możesz chcieć nazwać. To naprawdę zależy od Twojej kreatywności!

A teraz czym, do diabła, jest identyfikator organizacji?

Identyfikator organizacji to unikatowa nazwa Twojej aplikacji, dzięki której inni mogą ją znaleźć w App Store. Zalecam wpisanie tutaj swojego nazwiska, a następnie imienia, aby uprościć pracę nad tym projektem.

Twój identyfikator pakietu (bezpośrednio pod identyfikatorem organizacji) będzie wyglądał mniej więcej tak:

doejohn.Hello-World-App

Niektóre starsze wersje Xcode mogą wyświetlać com.doejohn.Hello-World-App. Nazywa się to odwrotną nazwą domeny tylko dla Twojej informacji.

Teraz kliknij Dalej i zapisz swój projekt w preferowanym miejscu, a następnie kliknij Utwórz i przejdźmy do zabawnej części!

Po zakończeniu Twój Xcode powinien wyglądać mniej więcej tak:

Przejdźmy więc pokrótce do tego, co tutaj widzimy:

• Pomarańczowa sekcja to strona Nawigatora, na której aktualnie wyświetla się Nawigator projektu. Tutaj widzisz, że masz swój projekt Hello World na górze z trzema folderami: Hello World , Hello WorldTest s i Hello WorldUITests . Folder Hello World to miejsce, w którym będziemy robić całe nasze kodowanie i edytowanie. Testy Hello WorldTest i Hello WorldUITest są dla nas tworzone automatycznie, gdy pozostawiliśmy pole wyboru Dołącz testy , gdy tworzyliśmy nasz projekt podczas fazy tworzenia nazwy. Omówię dwa foldery w innym poście, więc bądźcie czujni!
• Zielona sekcja to część dotycząca ogólnych informacji i edycji naszej aplikacji. W zakładce Ogólne tutaj możemy zobaczyć, że mamy nazwę wyświetlaną (nazwa naszej aplikacji), identyfikator pakietu (to, o czym mówiliśmy wcześniej o odwrotnej nazwie domeny), wersję (jak gry, które mamy w wersji 1.0, 1.1, 2.x… itp.)
• Fioletowa sekcja Informacje o rozwoju to miejsce, w którym chciałbym spędzić trochę więcej czasu na dyskutowaniu tutaj. Przejdźmy tutaj od góry do dołu.
• Na samej górze mamy iOS 15.2 z zaznaczonym iPhonem i iPadem ale Mac Catalyst. Dzieje się tak dlatego, że kiedy tworzyliśmy nasz projekt, wybraliśmy „iOS”, a nie „multiplatform”, stąd mówiąc „chcemy, aby nasza aplikacja działała tylko na urządzeniach z systemem iOS”. Część iOS 15.2 mówi „Minimalna wersja iOS, na której można uruchomić naszą aplikację”. Możesz go kliknąć i wybrać przynajmniej inną wersję systemu iOS, z której mają korzystać Twoi użytkownicy. Pamiętaj, aby sprawdzić, czy funkcje, które chcesz uruchomić, są obsługiwane w minimalnej wersji, na której mają działać Twoi użytkownicy. W przypadku tej aplikacji powinieneś być w porządku. Orientacja urządzenia mówi, że Twoja aplikacja działa tylko w trybie pionowym, do góry nogami, poziomym lewym lub poziomym prawym , jak możesz sobie wyobrazić, jak niektóre gry pozwalają graczom grać tylko w określonej orientacji. ThePasek stanu to miejsce, w którym możesz ustawić styl wyświetlania paska stanu. Możesz się nim pobawić i zobaczyć, jak ma wyglądać Twoja aplikacja. W przypadku tej aplikacji po prostu zachowamy ustawienia domyślne, aby wszystko było proste.
• Sekcja żółta to miejsce, w którym przebywają twoi inspektorzy. Tak więc w tej sekcji można znaleźć takie rzeczy, jak nazwa aplikacji, pełna ścieżka do pliku itp. Stanie się to bardziej przydatne, gdy będziemy rozwijać naszą aplikację za pomocą Storyboard.

Teraz chcę, żebyś kliknął ten przycisk, który zaznaczyłem żółtym kwadratem. Pozwoli nam to podzielić środkową część naszego Xcode na dwie strony: jedną do wyświetlenia głównego pliku, a drugą do wyświetlenia naszego pliku ViewController.

Twój ekran może początkowo wyglądać tak, ale możesz po prostu kliknąć dowolną stronę, którą chcesz zmienić, aby wyświetlić ViewController i kliknąć ViewController w sekcji nawigatora, a następnie się zmieni.

Twój ekran powinien wyglądać tak, gdy skończysz. Przyjrzyjmy się teraz krótko, co oznaczają wiersze kodu, które widzimy w ViewControllerze:

Na samej górze widzimy wiersz import UIKit , który mówi, że „hej, chcemy zaimportować ten framework/bibliotekę do użycia w tym pliku ViewController!” W tym przypadku chcemy pracować z UIKit, dlatego importujemy go tutaj. W przyszłości zaimportujemy więcej, na przykład Google Firebase lub niektóre biblioteki animacji interfejsu użytkownika, które chcesz dodać!

Następnie mamy klasę ViewController: UIViewController{} , która mówi, że mamy klasę o nazwie ViewController , która dziedziczy po UIViewController. Dziedziczenie w klasie oznacza, że ​​my, podklasa (ViewController), chcemy móc korzystać ze wszystkich metod, właściwości i innych cech superklasy (UIViewController).

Wewnątrz naszej klasy ViewController mamy:

Nazywa się to funkcją. Ta specyficzna funkcja mówi, co powinno się stać, gdy ten widok zostanie załadowany po raz pierwszy. Na przykład, jeśli chcemy, aby zmienna Gwiazda zawsze miała wartość 0, gdy ten widok jest ładowany, będziemy mieć tutaj gwiazdę var = 0 .

Teraz chcę, abyś spojrzał na środkową część swojego Xcode, na samym górnym pasku powinien znajdować się znak + w ten sposób:

Kliknij na to i powinniśmy zobaczyć listę obiektów, które możemy przeciągnąć i upuścić do naszej głównej scenorysu.

Jak widać w Xcode mamy wszystkie te predefiniowane obiekty gotowe do użycia dla nas. Przeciągnijmy więc obiekty Etykieta i Przycisk do naszej Tablicy Głównej.

Jak widać, kiedy po raz pierwszy upuszczamy obiekt etykiety na naszą scenorys, możemy go upuścić w dowolnym miejscu, niezależnie od tego, jak duży nam się podoba. Rozszerzmy więc naszą etykietę tak szeroką, jak pierwsza niebieska kropkowana linia po lewej i prawej stronie. Te linie są tym, co Xcode mówi nam o „bezpiecznej strefie” dla istnienia naszych obiektów. W międzyczasie zmieńmy również tekst z Label na Hello World, klikając dwukrotnie obiekt Label.

Teraz, zanim to nastąpi, chcę, żebyśmy spojrzeli na żółty kwadratowy fragment na powyższym obrazku. Nazywa się to Inspektorem atrybutów , w którym możemy zmieniać takie rzeczy, jak kolor tekstu, czcionka, rozmiar czcionki itp. dla naszego wybranego obiektu. Tutaj zmienimy rozmiar czcionki na 50 i tekst z etykiety na Hello World, jak widać poniżej.

Następnie zrobimy to samo dla obiektu przycisku. Zaoszczędzę nam trochę czasu i oddaję Wam do zrobienia (tutaj na pewno nie leniuchuję )

W rezultacie powinieneś mieć coś, co wygląda tak. Teraz możemy (nieco) bezpiecznie powiedzieć, że nasza część interfejsu użytkownika jest kompletna! Poklepcie się mocno po plecach

Oto najważniejsze pytanie: skąd nasza niesamowita aplikacja wie, co zrobić, gdy użytkownik dotknie przycisku? Lub co powinien zrobić, gdy użytkownik naciśnie przycisk? Lub co powinna zrobić aplikacja, gdy wykryje, że nasi użytkownicy przeżywają kryzys egzystencjalny, tak jak autor?

Cóż, ostatnie pytanie prawdopodobnie wykracza poza zakres tego samouczka, ale hej, możemy poradzić sobie z dwoma pierwszymi bez problemu.

Xcode wyświadczył nam przysługę i uczynił to bardzo prostym: Control + Kliknij na Obejt i przeciągnij go do pliku ViewController w ten sposób:

Bądź bardzo ostrożny, aby NIE przeciągnąć go do metody viewDidLoad().

Pojawi się okno dialogowe, takie jak to, co widzimy w sekcji z żółtym kwadratem, a Xcode poprosi o nazwę tej etykiety, nazwijmy ją helloWorldText . Ta konwencja nazewnictwa nosi nazwę Camel Casing.

Teraz, gdy mamy naszą etykietę połączoną z naszym kodem! Możemy programowo nakazać mu wykonanie naszej licytacji! Muwahahaha!

Zauważ, że możesz zobaczyć wypełnione kółko obok wiersza kodu IBOutlet. Oznacza to, że ten Obiekt jest połączony z czymś w Storyboard.

Teraz dla przycisku zrobimy to samo, ale trochę inaczej; chcemy, aby nasz przycisk był Akcją, czymś, z czym możemy wchodzić w interakcje, a nie tylko do wyświetlania. Tak więc zrobimy w następujący sposób

Upewnij się, że w obszarze Połączenie wybrana jest Akcja. Możemy nazwać to HelloWorldAction tutaj. W sekcji Zdarzenie określamy, co się stanie, gdy użytkownik coś zrobi. Tutaj wybraliśmy Touch Up Inside, co oznacza, kiedy użytkownik dotknie (dotknie i puści) przycisku.

Teraz możemy powiedzieć, co nasza aplikacja powinna zrobić, gdy użytkownik dotknie jej programowo! Horraj

Dobra, przejdźmy do pikantnych części naszej aplikacji. Dodajmy dwie linie kodu pod naszym UILabel:

var helloTextNumber = 0

var helloTextArray = ["Witaj świecie", "Hej Verden!", "Hallo Wereld!", "Ciao mondo!", "Hei Verden!", "你好世界!"]

Porozmawiajmy trochę o tym, czym są te dwie zmienne.

helloTextArray to tablica, której chcemy użyć do wybrania naszego „Hello World” w innym języku tutaj. Tutaj mamy tablicę ciągów składającą się z 6 ciągów znaków (ciągi to po prostu typ z „”.) Podobnie jak w wielu innych językach, tablica zaczyna się od 0, a nie od 1! Bądź więc ostrożny podczas przechodzenia przez Swift Arrays!

Więc helloTextArray[0] będzie „witaj świecie”, helloTextArray[3] to „Ciao mondo”, a helloTextArray[5] to „你好世界! ”

Oto link do dokumentacji Apple Swift na temat Array. Możesz przeczytać więcej na ten temat tutaj:

Jak widzieliśmy powyżej, aby pobrać element z hellTextArray, musimy powiedzieć mu, jaki numer chcemy (tak więc pierwszy mówimy helloTextArray[0], drugi helloTextArray[1], trzeci helloTextArray[2] … itd.) ale nie możemy po prostu ręcznie wpisać każdego z nich ani oczekiwać, że nasi użytkownicy wprowadzą za nas liczbę (zawsze oczekuj najmniej od użytkownika. Zasada, której się nauczyłem). Co więc robimy?

Nadchodzi helloTextNumber. helloTextNumber to zmienna Integer (Int), której chcemy użyć jako elementu zastępczego dla elementu naszej tablicy, który chcemy wyświetlić. Będziemy mieli metodę, która generuje losową liczbę całkowitą z przedziału od 0 do 5 i użyjemy helloTextNumber do przechowywania tej liczby dla nas. Możemy więc losowo wyświetlić element z naszej helloTextArray. Jeśli jesteś trochę zdezorientowany w tej części, nie martw się, wszystko wyjaśni się w następnej części.

Oto kod, który chcę, abyś dodał:

Przyjrzyjmy się, co robi wewnątrz naszego bloku kodu hellowWorldAction.

Tutaj ustawiliśmy nasz helloTextNumber na Int.random(in:0…5). Ten wiersz kodu oznacza, że ​​chcemy, aby nasz helloTextNumber był losowo generowaną liczbą całkowitą od 0 do 5 włącznie (co oznacza 5).

Oto coś, co chcę omówić trochę dalej. Porozmawiajmy o następnej linii

helloWorldText.text = helloTextArray[helloTextNumber]

W Swift ten zapis kropkowy jest zgodny z regułą

Kto.Co = Wartość

który rozkłada się na:

„Kogo trzeba zmienić”

"kropka"

„co trzeba zmienić”

"równa się"

„na co należy to zmienić”.

Więc z naszym kodem mówimy, że:

Chcemy, aby tekst helloWorldText (kto) został zmieniony na element helloTextNumber elementu helloTextArray.

Więc kiedy uruchomimy ten wiersz kodu, zmienimy helloWorldText, aby wyświetlić dowolny element w helloWorldTextArray losowo wygenerowanej metody Int.random() wygenerowanej dla naszego helloWorldTextNumber.

Teraz, gdy uruchomimy nasz symulator (commnad + r lub przycisk ▶️ na górnym pasku Xcode), kiedy klikniemy nasz przycisk, nasz tekst powinien się zmieniać za każdym razem, gdy klikniemy przycisk!

Horra! Zakończyliśmy część kodowania naszej aplikacji!

Ostatnia rzecz. Nasze tło jest w rzeczywistości trochę brzydkie Chcielibyśmy dodać jakiś obraz tła, aby nie wyglądał tak zwyczajnie. Więc znajdź obraz, który naprawdę chcesz dodać jako tło dla swojej aplikacji. Jeśli chodzi o mnie, użyję obrazu ziemi (ponieważ to cześć świata, prawda?).

Teraz kliknijmy „Zasoby” w folderze Hello World i powinniśmy zobaczyć coś takiego jak poniżej. Przeciągnij wybrany obraz i upuść go w kolumnie z „AccentColor” i „Appicon”. To tam nasz wizerunek będzie rezydował i będzie wezwany do użycia.

Teraz wróćmy do „Main” i upuśćmy obiekt Image z biblioteki obiektów (jeśli nie pamiętasz, jak to zrobić, przewiń w górę, aby zobaczyć, gdzie mówiliśmy o obiektach Label i Button). Chcę, abyś rozwinął obiekt Obraz tak duży, że obejmuje cały ekran Twojego telefonu. Teraz chcę, abyś kliknął ten obiekt obrazu i poszedł do inspektorów (panel po prawej stronie) i poszukał tego:

W obszarze Widok obrazu chcę, abyś kliknął menu rozwijane Obraz i wybrał obraz tła, który wcześniej upuściłeś w Zasobach. W tym miejscu możemy zdefiniować, jaki obiekt obrazu powinien wyświetlać bez konieczności kodowania czegokolwiek w nim. Schludny! Im mniej kodowania, tym lepiej!

Teraz Twój ekran może wyglądać mniej więcej tak:

Chwileczkę… co tu się dzieje? Co się stało z naszą etykietą i guzikiem, nad którymi tak ciężko pracowaliśmy?

To, co się tutaj wydarzyło, jest po prostu kwestią warstwy. Wyobraź sobie, że mamy talerz, jabłko i pomarańczę. To, co zrobiliśmy, to najpierw wyświetliliśmy jabłko i pomarańczę, a następnie umieściliśmy talerz na wierzchu tych dwóch, stąd widzimy tylko późne (obraz tła), a nie nasze jabłko (etykieta) ani pomarańczę (przycisk). Chcemy najpierw położyć nasz talerz, potem jabłko i pomarańczę na wierzchu.

Jak to zrobić? Czy po prostu musimy usunąć cały nasz projekt i zrobić wszystko od nowa?

Cóż, jeśli chcesz to zrobić, aby utrwalić to, czego się tutaj nauczyłeś, możesz to zrobić! ALE Apple dało nam znacznie prostszy sposób na zrobienie tego.

Po lewej stronie poprzedniego zrzutu ekranu widzimy „Wyświetl scenę kontrolera”. Pod tym mamy „Kontroler widoku”, a pod tym mamy „Widok”. Jest to warstwa naszego bieżącego widoku z naszymi obiektami (etykieta, przycisk i obraz) wraz z domyślnym „bezpiecznym obszarem”, niebieskimi przerywanymi liniami, które widzimy, gdy przeciągamy nasze obiekty.

Teraz po prostu przeciągnij obiekt obrazu od dołu do prawej poniżej „bezpiecznego obszaru” w następujący sposób:

I voila! Widzimy naszą etykietę i guzik! A kiedy uruchomimy tę aplikację w naszym symulatorze, powinniśmy zobaczyć, że wszystko działa zgodnie z przeznaczeniem!

Mam nadzieję, że pomogło ci to dobrze rozpocząć przygodę z iOS. Zostaw komentarz i klaszcz, jeśli uznasz to za pomocne

Ale w przyszłości będę pisać więcej samouczków bez względu na wszystko szkoda, jeśli mnie nie lubisz

Pokój ✌