{"id":31619,"date":"2025-07-28T05:00:00","date_gmt":"2025-07-28T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=31619"},"modified":"2025-07-28T09:50:30","modified_gmt":"2025-07-28T07:50:30","slug":"wykorzystanie-najnowszych-funkcji-swiftui-w-developmencie-ios","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/wykorzystanie-najnowszych-funkcji-swiftui-w-developmencie-ios\/","title":{"rendered":"Wykorzystanie najnowszych funkcji SwiftUI w developmencie iOS"},"content":{"rendered":"\n

W ostatnim czasie mo\u017cemy zaobserwowa\u0107, \u017ce tempo rozwoju technologii znacz\u0105co przyspieszy\u0142o. Apple nie przestaje nas zadziwia\u0107 szybko\u015bci\u0105 wprowadzania coraz to nowszych i ciekawszych API<\/strong> do swojego ekosystemu, a sam Swift UI jest bardzo mocno promowany przez Apple jako zalecany spos\u00f3b tworzenia aplikacji mobilnych.<\/p>\n\n\n\n

W kr\u00f3tkim artykule nie spos\u00f3b opisa\u0107 wszystkich bibliotek, kt\u00f3re pojawia\u0142y si\u0119 w iOS od wersji 15 do 18<\/strong>, dlatego chcia\u0142bym si\u0119 skupi\u0107 zaledwie na kilku ciekawych zagadnieniach, na kt\u00f3re uda\u0142o mi si\u0119 natrafi\u0107 zar\u00f3wno w codziennej pracy jak i w trakcie przegl\u0105dania najnowszych materia\u0142\u00f3w szkoleniowych oraz oficjalnej dokumentacji Apple.<\/p>\n\n\n\n

W dzisiejszym wpisie opisz\u0119 pokr\u00f3tce takie zagadnienia jak AGA (Automatic Grammar Agreement)<\/strong> i String Catalog<\/strong>, czyli nowe podej\u015bcie Apple do lokalizacji swoich aplikacji, oraz jak stworzy\u0107 i wykorzysta\u0107 w praktyce sw\u00f3j w\u0142asny EnvironmentKey().<\/strong><\/p>\n\n\n\n

Zatem \u2013 nie przed\u0142u\u017caj\u0105c przyd\u0142ugiego ju\u017c i tak wst\u0119pu, przejd\u017amy do meritum. Link do repozytorium znajdziecie na ko\u0144cu artyku\u0142u.<\/p>\n\n\n\n

AGA \u2013 Automatic Grammar Agreement<\/strong><\/h2>\n\n\n\n

My\u015bl\u0119, \u017ce ka\u017cdy z developer\u00f3w spotka\u0142 si\u0119 z problemem poprawnego odmieniania rzeczownik\u00f3w<\/strong> w zale\u017cno\u015bci od ilo\u015bci lub przynajmniej zastanawia\u0142 si\u0119 nad takim problemem. \u0141atwo wyobrazi\u0107 sobie przypadek, kiedy mamy za zadanie stworzy\u0107 widok, w kt\u00f3rym, korzystaj\u0105c przyk\u0142adowo ze Stepper(),<\/strong> zwi\u0119kszamy ilo\u015b\u0107 np. fili\u017canek kawy, kt\u00f3re klient mo\u017ce zam\u00f3wi\u0107 przy u\u017cyciu tworzonej przez nas aplikacji.<\/p>\n\n\n\n

Nawet w j\u0119zyku angielskim, gdzie sprawa sprowadza si\u0119 najcz\u0119\u015bciej do dodania literki \u201es\u201d<\/strong> do danego s\u0142owa, w okre\u015blonych przypadkach poprawna odmiana mo\u017ce si\u0119 mocno skomplikowa\u0107. Przyk\u0142adowo z one goose<\/strong> robi si\u0119 two geese, a z one mouse \u2013 two mice<\/strong>.<\/p>\n\n\n\n

W j\u0119zyku polskim sprawa wygl\u0105da\u0142aby jeszcze ciekawiej, chocia\u017cby na przyk\u0142adzie p\u0105czk\u00f3w \u2013 jeden p\u0105czek, dwa p\u0105czki, 11 p\u0105czk\u00f3w,<\/strong> 23 p\u0105czki<\/strong>\u2026 i prawdopodobnie z tego prostego powodu, Apple nie zdecydowa\u0142o si\u0119 na obj\u0119ciem AGA<\/strong> naszego ojczystego j\u0119zyka \ud83e\uddd0<\/p>\n\n\n\n

AGA w praktyce<\/strong><\/h2>\n\n\n\n

Odstawmy na bok zawi\u0142o\u015bci gramatyczne i spr\u00f3bujmy zobrazowa\u0107 na prostym przyk\u0142adzie kodu, z czym przychodzi nam si\u0119 mierzy\u0107. Poni\u017cej mamy zdefiniowane dwa przyciski do zwi\u0119kszania i zmniejszania warto\u015bci oraz prosty tekst ze s\u0142owem \u201eBottle\u201d<\/strong> powi\u0105zanym z ilo\u015bci\u0105:<\/p>\n\n\n\n

\"Code
Ryc. 1 Code snippet 1: Kod pocz\u0105tkowy<\/figcaption><\/figure>\n\n\n\n

Efekt omawianego przyk\u0142adu nietrudno przewidzie\u0107 \u2013 bez wzgl\u0119du na wybran\u0105 ilo\u015b\u0107 butelek otrzymamy dok\u0142adnie ten sam String \u2013 \u201eBottle\u201d<\/strong> poprzedzony oczywi\u015bcie w\u0142a\u015bciw\u0105 ilo\u015bci\u0105, kt\u00f3r\u0105 wybrali\u015bmy, korzystaj\u0105c z dw\u00f3ch prostych przycisk\u00f3w.<\/p>\n\n\n\n

W zrzucie ekranu prezentowanym poni\u017cej mo\u017cecie zobaczy\u0107, jak to prezentuje si\u0119 wizualnie \u2013 raczej nie jest to co\u015b, co chcieliby\u015bmy pokaza\u0107 w czasie prezentacji na koniec sprintu naszym product ownerom.<\/p>\n\n\n\n

\"Screen
Ryc. 2 Screen 1: Ekran pocz\u0105tkowy<\/figcaption><\/figure>\n\n\n\n

W aplikacji chcieliby\u015bmy uzyska\u0107 taki efekt, gdzie zdefiniowane przez nas s\u0142owo \u201eBottle<\/strong>\u201d lub jakiekolwiek inne zostanie poprawnie odmienione zgodnie z obowi\u0105zuj\u0105cymi zasadami gramatyki.<\/p>\n\n\n\n

Pojawia si\u0119 zatem pytanie: W jaki spos\u00f3b mo\u017cemy osi\u0105gn\u0105\u0107 nasz cel bez konieczno\u015bci tworzenia dodatkowych funkcji zwracaj\u0105cych odpowiedni\u0105 warto\u015b\u0107 String <\/strong>dla odpowiedniej warto\u015bci liczbowej?<\/strong><\/p>\n\n\n\n

Tutaj z pomoc\u0105 przychodzi nam w\u0142a\u015bnie Automatic Grammar Agreement,<\/strong> kt\u00f3re dzia\u0142a na ten moment dla 6 najbardziej popularnych j\u0119zyk\u00f3w. Dla waszej wygody zebra\u0142em ca\u0142o\u015b\u0107 w tabel\u0119 zbiorcz\u0105 zaprezentowanej w dalszej cz\u0119\u015bci wpisu.<\/p>\n\n\n\n

Wracaj\u0105c do tematu w przedmiotowej dyskusji oraz mo\u017cliwo\u015bci rozwi\u0105zania problemu, to w naszym przypadku wystarczy, \u017ce zamienimy poprzedni zapis na:<\/p>\n\n\n

\nText("^[\\(count) Bottle](inflect: true)")\n<\/pre><\/div>\n\n\n
I uzyskamy efekt, jaki chcieli\u015bmy uzyska\u0107 \u2013 angielskie s\u0142owo \u201eBOTTLE\u201d<\/strong> zostanie poprawnie odmienione w zale\u017cno\u015bci od wybranej ilo\u015bci.<\/p>\n\n\n\n
AGA w praktyce \u2013 kolejne przyk\u0142ady<\/strong><\/h2>\n\n\n\n
Zmie\u0144my nieco nasz kod, aby pokaza\u0107 wi\u0119cej przyk\u0142ad\u00f3w i przy okazji wystylizujmy nieco widok, korzystaj\u0105c z natywnych element\u00f3w Swift UI,<\/strong> dodaj\u0105c m.in. gradientowe t\u0142o, stylizuj\u0105c kontener, w kt\u00f3rym znajduj\u0105 si\u0119 przyk\u0142ady oraz wykorzystuj\u0105c Stepper() <\/strong>zamiast wcze\u015bniej wykorzystanego Button()<\/strong>.<\/p>\n\n\n\n
\"Code
Ryc. 3 Code snippet 2: AGM Kod ko\u0144cowy<\/figcaption><\/figure>\n\n\n\n
Uzyskany efekt:<\/p>\n\n\n\n
\"Screen
Ryc. 4 Screen 2 i 3: AGM Ekran ko\u0144cowy, liczba pojedyncza    (po lewej) i mnoga (po prawej)<\/figcaption><\/figure>\n\n\n\n
W tym miejscu warto wspomnie\u0107, \u017ce w warunkach produkcyjnych cz\u0119sto otrzymujemy warto\u015bci z innych miejsc w aplikacji np. z View Modelu. W tym przypadku konieczne jest wskazanie typu LocalizedStringKey,<\/strong> czyli dla naszego przyk\u0142adu, je\u015bli chcieliby\u015bmy zdefiniowa\u0107 warto\u015b\u0107 tekstow\u0105 np. w view modelu, to musieliby\u015bmy zapisa\u0107 nasz parametr w ten spos\u00f3b:<\/p>\n\n\n
\nvar test: LocalizedStringKey {("^[\\(count) Bottle](inflect: true)")}\n}\n<\/pre><\/div>\n\n\n
AGM<\/strong> jest dost\u0119pne dla iOS wg tabeli poni\u017cej i mo\u017ce okaza\u0107 si\u0119 pomocne przy lokalizacji aplikacji, nad kt\u00f3r\u0105 pracujecie lub b\u0119dziecie pracowa\u0107 w przysz\u0142o\u015bci. Nawet je\u015bli nie przyjdzie Wam skorzysta\u0107 z tego rozwi\u0105zania, to przynajmniej ju\u017c b\u0119dziecie wiedzie\u0107, jak zbudowa\u0107 poprawnie liczb\u0119 mnog\u0105 od s\u0142owa Goose w j\u0119zyku angielskim \ud83d\ude42<\/p>\n\n\n\n
iOS 15<\/td>Angielski<\/td><\/tr>
Hiszpa\u0144ski<\/td><\/tr>
iOS 16<\/td>Francuski<\/td><\/tr>
W\u0142oski<\/td><\/tr>
Portugalski (Brazylia)<\/td><\/tr>
iOS 17<\/td>Portugalski (Europa)<\/td><\/tr>
Niemiecki<\/td><\/tr><\/tbody><\/table>
Tab. 1 Wsparcie AGM wg wersji iOS<\/figcaption><\/figure>\n\n\n\n
String Catalog \u2013 nowe podej\u015bcie do lokalizacji w XCode<\/strong><\/h2>\n\n\n\n
W ostatnim czasie Apple wprowadzi\u0142o nowocze\u015bniejsz\u0105 wersj\u0119 lokalizacji, kt\u00f3ra mo\u017cna wykorzysta\u0107 od wersji XCode 15.0<\/strong>. Zmianie uleg\u0142o podej\u015bcie do samej lokalizacji \u2013 wcze\u015bniej wykorzystywali\u015bmy Localizable.strings,<\/strong> w kt\u00f3rym mozolnie wpisywali\u015bmy kolejne klucze lokalizacji.<\/p>\n\n\n\n
W nowym wydaniu pojawi\u0142o si\u0119 narz\u0119dzie, kt\u00f3rego mo\u017cemy u\u017cy\u0107 jako alternatywy do wymienionych powy\u017cej Localizable.strings,<\/strong> je\u015bli oczywi\u015bcie chcieliby\u015bmy, aby nasza aplikacja obs\u0142ugiwa\u0142a wi\u0119cej ni\u017c jeden j\u0119zyk. Rozwi\u0105zanie to dzia\u0142a Out of the box, je\u015bli j\u0119zyk aplikacji jest zgodny z ustawieniami systemowymi.<\/p>\n\n\n\n
String Catalog w praktyce<\/strong><\/h2>\n\n\n\n
Pozw\u00f3lcie zatem przedstawi\u0107 Wam, jak to rozwi\u0105zanie dzia\u0142a w praktyce. Przejd\u017amy zatem do rzeczy i na przyk\u0142adzie kilku prostych t\u0142umacze\u0144 dodajmy lokalizacj\u0119 aplikacji oraz obs\u0142ug\u0119 zmiany j\u0119zyka wykorzystuj\u0105c\u0105 natywne narz\u0119dzia SwiftUI.<\/p>\n\n\n\n
W pierwszym kroku musimy doda\u0107 nowy katalog string\u00f3w do naszego projektu, kt\u00f3ry domy\u015blnie dostaje nazw\u0119 Localizable.xcstring<\/strong><\/p>\n\n\n\n
\"Dodanie
Ryc. 5 Dodanie String Catalog do projektu<\/figcaption><\/figure>\n\n\n\n
Standardowo przechodzimy dalej i wybieramy nazw\u0119 dla naszego katalogu, a ja, na potrzeby artyku\u0142u, zostawiam warto\u015b\u0107 domy\u015bln\u0105.<\/p>\n\n\n\n
Jak mo\u017cecie zauwa\u017cy\u0107 \u2013 lista s\u0142\u00f3w jest pocz\u0105tkowo pusta.<\/p>\n\n\n\n
\"Wybranie
Ryc. 6 Wybranie nazwy katalogu<\/figcaption><\/figure>\n\n\n\n
\"Startowy
Ryc. 7 Startowy String Catalog<\/figcaption><\/figure>\n\n\n\n
W kolejnym kroku mo\u017cemy doda\u0107 dodatkowe j\u0119zyki, kt\u00f3re chcemy, aby by\u0142y obj\u0119te lokalizacj\u0105. W moim przypadku doda\u0142em j\u0119zyk polski i hiszpa\u0144ski.<\/p>\n\n\n\n
\"Dodanie
Ryc. 8 Dodanie dodatkowego j\u0119zyka<\/figcaption><\/figure>\n\n\n\n
\"Widok
Ryc. 9 Widok katalogu z kilkoma j\u0119zykami<\/figcaption><\/figure>\n\n\n\n
W przeciwie\u0144stwie do Localized.strings<\/strong> poszczeg\u00f3lne wpisy uzupe\u0142niaj\u0105 si\u0119 automatycznie w fazie budowania si\u0119<\/strong> naszego projektu. Je\u015bli wprowadzona warto\u015b\u0107 tekstowa b\u0119dzie zgodna z typem LocalizedStringKey<\/strong>, ju\u017c przy pierwszym uruchomieniu projektu, nawet w wersji z jednym widokiem, kt\u00f3ry zrobili\u015bmy do tej pory, uzyskamy co\u015b takiego:<\/p>\n\n\n\n
\"Klucze
Ryc. 10 Klucze dodane do projektu przy pierwszym zbudowaniu projektu<\/figcaption><\/figure>\n\n\n\n
Jak mo\u017cecie zauwa\u017cy\u0107, do t\u0142umaczenia po uruchomieniu projektu automatycznie pojawi\u0142y si\u0119 wszystkie wpisy z p\u00f3l Text()<\/strong>. W moim przypadku nie widz\u0119 potrzeby t\u0142umaczenia dw\u00f3ch pierwszych rekord\u00f3w, kt\u00f3re pojawi\u0142y si\u0119 na tej li\u015bcie, wi\u0119c z menu kontekstowego mog\u0119 wybra\u0107 opcj\u0119 \u201eDon\u2019t translate\u201d,<\/u><\/strong> co z automatu wy\u0142\u0105czy lokalizacj\u0119 dla wszystkich dodanych j\u0119zyk\u00f3w w katalogu.<\/p>\n\n\n\n
Dla przyk\u0142adu przet\u0142umaczmy sobie na pocz\u0105tek przynajmniej ten jeden string odpowiednio dla j\u0119zyka polskiego i hiszpa\u0144skiego. Po wprowadzeniu tej warto\u015bci mo\u017cemy zauwa\u017cy\u0107, \u017ce XCode oznaczy\u0142 nam wszystkie t\u0142umaczenia jako uzupe\u0142nione, natomiast je\u015bli nie jeste\u015bmy pewni, czy t\u0142umaczenie jest ok lub chcemy poprosi\u0107 o sprawdzenie, mo\u017cemy oznaczy\u0107 dany wiersz jako \u201eMark for review\u201d<\/u><\/strong>.<\/p>\n\n\n\n
Na tym etapie warto wspomnie\u0107, \u017ce String Catalog<\/strong> posiada funkcjonalno\u015b\u0107 r\u00f3\u017cnicowania wpis\u00f3w w zale\u017cno\u015bci od wariantu urz\u0105dzenia, czy te\u017c dodawania odpowiedniej formy dla liczby mnogiej danego wpisu.<\/p>\n\n\n\n
\"Uzupe\u0142niony
Ryc. 11 Uzupe\u0142niony pocz\u0105tkowy katalog<\/figcaption><\/figure>\n\n\n\n
Implementacja lokalizacji w aplikacji<\/strong><\/h2>\n\n\n\n
Skoro ju\u017c wiemy, jak pos\u0142ugiwa\u0107 si\u0119 katalogiem, to mo\u017cemy przej\u015b\u0107 do implementacji lokalizacji
w aplikacji. W tym celu wykorzystamy @AppStorage oraz zmienne \u015brodowiskowe environment(). Dodamy te\u017c NavigationStack()<\/strong> oraz proste menu kontekstowe pozwalaj\u0105ce na zmian\u0119 j\u0119zyka aplikacji w czasie rzeczywistym.<\/p>\n\n\n\n
Na pocz\u0105tek stw\u00f3rzmy klas\u0119 AppData,<\/strong> gdzie b\u0119dziemy przechowa\u0107 ustawienia u\u017cytkownika.
W naszym przypadku na tym etapie b\u0119dzie to tylko jedna zmienna \u201elanguage\u201d<\/strong>, kt\u00f3r\u0105 dodatkowo oznaczymy jako @AppStorage.<\/strong><\/p>\n\n\n\n
@AppStorage <\/strong>to nic innego jak Property Wrapper, kt\u00f3ry dzia\u0142a w spos\u00f3b podobny do User Defaults<\/strong>, przechowuj\u0105c podstawowe ustawienia u\u017cytkownika.<\/strong><\/p>\n\n\n\n
\"Code
Ryc. 12 Code snippet 3: AppData aplikacji<\/figcaption><\/figure>\n\n\n\n
Ten krok nie jest wymagany, je\u015bli nie chcemy mie\u0107 pe\u0142nej kontroli nad ustawieniami j\u0119zyka w aplikacji, poniewa\u017c domy\u015blnie aplikacja b\u0119dzie dzia\u0142a\u0142a w oparciu o ustawienia systemowe<\/strong>.<\/p>\n\n\n\n
Aby osi\u0105gn\u0105\u0107 zamierzony cel, dodatkowo wykorzystamymodyfikatory environment() <\/strong>oraz environmentObject(), <\/strong>kt\u00f3re nale\u017cy doda\u0107 do root view naszej aplikacji.<\/p>\n\n\n\n
\"Code
Ryc. 13 Code snippet 4: Root view aplikacji uwzgl\u0119dniaj\u0105cy parametry lokalizacji<\/figcaption><\/figure>\n\n\n\n
Nast\u0119pnie tworzymy widok pomocniczy zawieraj\u0105cy Menu()<\/strong> do wyboru odpowiedniego j\u0119zyka:<\/p>\n\n\n\n
\"Code
Ryc. 14 Code snippet 5: Language Options Menu<\/figcaption><\/figure>\n\n\n\n
Potrzebujemy jeszcze jeden dodatkowy widok pomocniczy, gdzie zaprezentujemy kilka prostych s\u0142\u00f3w. Podobnie jak poprzednio po zbudowaniu projektu te s\u0142owa od razu pojawi\u0105 si\u0119 w katalogu string\u00f3w, gdzie b\u0119dzie mo\u017cna je przet\u0142umaczy\u0107 analogicznie do zrzut\u00f3w ekranu pokazanych wcze\u015bniej.<\/p>\n\n\n\n
Przyk\u0142adowy kod dla omawianego widoku:<\/p>\n\n\n\n
\"Code
Ryc. 15 Code snippet 6: Widok pomocniczy zawieraj\u0105cy proste stringi<\/figcaption><\/figure>\n\n\n\n
W przyk\u0142adzie powy\u017cej u\u017cy\u0142em typu LocalizedStringKey<\/strong>. Nie jest to jednak niezb\u0119dne, aby zachowa\u0107 oczekiwan\u0105 przez nas funkcjonalno\u015b\u0107. Chcia\u0142em jedynie pokaza\u0107, jaki typ wykorzystywany jest przez Swift do procesowania lokalizacji.<\/p>\n\n\n\n
Ostatnim etapem jest umieszczenie naszego widoku w NavigationStack(),<\/strong> oraz dodanie przygotowanego wcze\u015bniej przycisku menu z opcjami zmiany j\u0119zyka. W przyk\u0142adzie poni\u017cej dodatkowo umie\u015bci\u0142em widoki w TabView,<\/strong> aby urozmaici\u0107 prezentacj\u0119 i zobrazowa\u0107 wykorzystanie tego API <\/strong>w aplikacjach mobilnych.<\/p>\n\n\n\n
\"Code
Ryc. 16 Code snippet 7: Widok w TabView<\/figcaption><\/figure>\n\n\n\n
Wa\u017cne:<\/strong><\/p>\n\n\n\n
Zwr\u00f3\u0107cie uwag\u0119, \u017ce je\u015bli chcemy korzysta\u0107 z obiekt\u00f3w \u015brodowiskowych i Preview,<\/strong> koniecznie musimy doda\u0107 environmentObject()<\/strong> r\u00f3wnie\u017c w Preview<\/strong>. W innym przypadku nie b\u0119dzie dzia\u0142a\u0107 i nie b\u0119dziemy mogli skorzysta\u0107 z tej funkcjonalno\u015bci przy projektowaniu widoku, kt\u00f3ry wykorzystuje dany element \u015brodowiskowy.<\/p>\n\n\n\n
Efekt ko\u0144cowy prezentuj\u0119 si\u0119 nast\u0119puj\u0105co \u2013 zmiana j\u0119zyka nast\u0119puje natychmiastowo po klikni\u0119ciu w wybrany przycisk menu. Zmieniaj\u0105 si\u0119 jednocze\u015bnie wszystkie s\u0142owa, kt\u00f3re zosta\u0142y zdefiniowane wcze\u015bniej w katalogu, uwzgl\u0119dniaj\u0105c r\u00f3wnie\u017c elementy menu.<\/p>\n\n\n\n
\"Screen
Ryc. 17 Screen 3: Efekt ko\u0144cowy<\/figcaption><\/figure>\n\n\n\n
Podsumowanie<\/strong><\/h3>\n\n\n\n
W mojej ocenie nowe rozwi\u0105zanie to czytelna alternatywa dla poprzedniego rozwi\u0105zania Apple, kt\u00f3ra ma szereg ciekawych funkcjonalno\u015bci. Dodatkowo, nawet je\u015bli w Waszym projekcie wykorzystywana jest poprzednia wersja lokalizacji, to migracja do katalogu string\u00f3w jest bardzo prosta.<\/p>\n\n\n\n
Na sam koniec tej sekcji warto wspomnie\u0107, \u017ce je\u015bli zajrzycie g\u0142\u0119biej do projektu, to zauwa\u017cycie, \u017ce String Catalog <\/strong>jest generowany w formacie JSON,<\/strong> co daje dodatkowe mo\u017cliwo\u015bci na etapie developmentu samej aplikacji, a sam katalog mo\u017cna \u0142atwo wygenerowa\u0107 w XCode (Xcode, Product -> Export Localizable) i przes\u0142a\u0107 do t\u0142umaczenia.<\/p>\n\n\n\n
Environment Key \u2013 jak stworzy\u0107 i wykorzysta\u0107 customowe klucze \u015brodowiskowe<\/strong><\/h2>\n\n\n\n
Pracuj\u0105c ze SwiftUI, zapewne spotkali\u015bcie si\u0119 z wykorzystaniem r\u00f3\u017cnego rodzaju obiekt\u00f3w \u015brodowiskowych, kt\u00f3re definiujemy jako @Environment(\\.key) var yourKeyName<\/strong>.<\/strong> W Swift UI znajdziemy ich mn\u00f3stwo, wystarczy zacz\u0105\u0107 wpisywanie i pojawi si\u0119 ca\u0142a lista:<\/p>\n\n\n\n
\"Code
Ryc. 18 Code snippet 7: Przyk\u0142ady zmiennych enviromnent<\/figcaption><\/figure>\n\n\n\n
Przyk\u0142adem u\u017cycia mo\u017ce by\u0107 chocia\u017cby colorScheme:<\/p>\n\n\n
\n@Environment(\\.colorScheme) var colorScheme\n<\/pre><\/div>\n\n\n
Kt\u00f3ry mo\u017cemy wykorzysta\u0107 do np. zdefiniowania koloru teksu czy jego wielko\u015b\u0107 w zale\u017cno\u015bci od ustawie\u0144 preferencji systemowych:<\/p>\n\n\n
\n.foregroundStyle(colorScheme == .dark ? .primary : .secondary)\n<\/pre><\/div>\n\n\n
Oczywi\u015bcie, w tym przypadku mo\u017cemy zdefiniowa\u0107, jaki kolor zostanie u\u017cyty odpowiednio dla dark mode i light mode<\/strong> w Assetach<\/strong>. Niemniej, warto mie\u0107 w swoim arsenale umiej\u0119tno\u015bci r\u00f3wnie\u017c tak\u0105 wiedz\u0119, zw\u0142aszcza, \u017ce wykorzystanie innych zmiennych \u015brodowiskowych, jak np.\u00a0 .horizontalSizeClass, mo\u017ce okaza\u0107 si\u0119 ju\u017c nie tak samo oczywiste, ale r\u00f3wnie pomocne.<\/p>\n\n\n\n
W mojej ocenie umiej\u0119tno\u015b\u0107 wykorzystanie zmiennych \u015brodowiskowych obok tworzenia w\u0142asnych styli oraz Extension do praktycznie dowolnego typu jest czym\u015b, co podnosi umiej\u0119tno\u015bci Swift UI na wy\u017cszy poziom.<\/p>\n\n\n\n
Tworzenie nowych kluczy<\/strong><\/h2>\n\n\n\n
Ale co mo\u017cemy zrobi\u0107 w sytuacji, kiedy interesuj\u0105cy nas klucz nie istnieje lub jego funkcjonalno\u015b\u0107 nie spe\u0142nia naszych oczekiwa\u0144?<\/p>\n\n\n\n
O ile tworzenie nowych styli dla element\u00f3w UI w SwiftUI opiera si\u0119 na stworzeniu struct<\/strong> zgodnego z odpowiednim protoko\u0142em, jak np. ButtonStyle(), DatePickeStyle(), ProgressBarStyle() TextFieldStyle(), <\/strong>to w przypadku kluczy \u015brodowiskowych po prostu musimy stworzy\u0107 nowy.<\/p>\n\n\n\n
Na potrzeby niniejszego wpisu om\u00f3wimy sobie przyk\u0142ad pola, kt\u00f3re jest wymagane do wprowadzenia, aby p\u00f3j\u015b\u0107 dalej w danym formularzu, czyli co\u015b, co nietrudno nam b\u0119dzie sobie wyobrazi\u0107 w codziennym u\u017cyciu.<\/p>\n\n\n\n
Zacznijmy od stworzenia nowego klucza o nazwie isRequired:<\/p>\n\n\n\n
\"Code
Ryc. 19 Code snippet 8: Tworzenie nowego klucza<\/figcaption><\/figure>\n\n\n\n
Nast\u0119pnie, jako \u017ce chcemy wykorzysta\u0107 nasz klucz przy tworzeniu nowych p\u00f3l tekstowych i zak\u0142adamy, \u017ce b\u0119dziemy wykorzystywa\u0107 ten styl wi\u0119cej ni\u017c raz, zdefiniujmy sobie CustomTextFieldStyle(), kt\u00f3ry wykorzystamy do stworzenia naszego widoku. Jak ju\u017c wspomnia\u0142em wcze\u015bniej wykorzystanie styli<\/strong> to dosy\u0107 cz\u0119sta praktyka przy tworzeniu aplikacji mobilnych w Swift UI, wi\u0119c warto wiedzie\u0107, jak mo\u017cna to zrobi\u0107.<\/p>\n\n\n\n
\"Code
Ryc. 20 Code snippet 9: Custom Text Field Style z parametrem isRequired<\/figcaption><\/figure>\n\n\n\n
Przy okazji tego widoku wykorzysta\u0142em dodatkowy Extension do View z funkcj\u0105 \u2013\u00a0.if(), <\/strong>kt\u00f3ry u\u0142atwia wykorzystanie r\u00f3\u017cnych element\u00f3w UI. Bardzo \u0142atwo mo\u017cna go znale\u017a\u0107 w sieci, ale poka\u017c\u0119 go r\u00f3wnie\u017c tutaj. Jednocze\u015bnie dodaj\u0119 funkcj\u0119 isRequired, kt\u00f3ra u\u0142atwi nam u\u017cycie zmiennej \u015brodowiskowej isRequired:<\/strong><\/p>\n\n\n\n
\"Code
Ryc. 21 Code snippet 10: Pomocnicze funkcje .if oraz isRequired<\/figcaption><\/figure>\n\n\n\n
Nast\u0119pnie tworzymy widok pomocniczy CustomInputField(), <\/strong>w kt\u00f3rym wykorzystamy nasz customowy<\/strong> styl<\/strong> oraz nasz nowy klucz \u015brodowiskowy, <\/strong>kt\u00f3ry przeka\u017cemy do stylu<\/p>\n\n\n
\n@Environment(\\.isRequired) var isRequired\n<\/pre><\/div>\n\n\n
\"Code
Ryc. 22 Code snippet 11: Custom Input Field<\/figcaption><\/figure>\n\n\n\n
Na sam koniec pozostaje nam jedynie zbudowanie widoku, kt\u00f3ry mo\u017cemy wykorzysta\u0107 w aplikacji. Dodatkowo w przyk\u0142adzie pokaza\u0142em, jak mo\u017cna wykorzysta\u0107 @FocusState<\/strong> do zarz\u0105dzaniem focusem<\/strong> dla poszczeg\u00f3lnych p\u00f3l, co jest bardzo przydatne, je\u015bli mamy wi\u0119cej jak jedno pole tekstowe.<\/p>\n\n\n\n
\"Code
Ryc. 23 Code snippet 12: FocusState<\/figcaption><\/figure>\n\n\n\n
Efekt ko\u0144cowy naszych prac przedstawia si\u0119 nast\u0119puj\u0105co:<\/p>\n\n\n\n
\"Efekt
Ryc. 24 Efekt ko\u0144cowy<\/figcaption><\/figure>\n\n\n\n
\"oferty<\/a><\/figure>\n\n\n\n
Podsumowanie<\/strong><\/h2>\n\n\n\n
Na zako\u0144czenie powy\u017cszej sekcji warto zaznaczy\u0107, \u017ce przy wykorzystaniu istniej\u0105cych czy stworzonych przez nas kluczy \u015brodowiskowych nale\u017cy zachowa\u0107 czujno\u015b\u0107 i rozwag\u0119. Mo\u017ce si\u0119 bowiem okaza\u0107, \u017ce aplikacja zacznie nam generowa\u0107 trudne do zdiagnozowania problemy, je\u015bli zapomnieli\u015bmy u\u017cy\u0107 odpowiedniego klucza w odpowiednim miejscu i we w\u0142a\u015bciwy spos\u00f3b. Do minus\u00f3w tego rozwi\u0105zania mo\u017cna zaliczy\u0107 trudniejsze testowanie naszej aplikacji.<\/p>\n\n\n\n
Mam nadziej\u0119, \u017ce uda\u0142o mi si\u0119 cho\u0107by w niewielkim stopniu przyku\u0107 Wasz\u0105 uwag\u0119 i \u017ce omawiane tematy przydadz\u0105 si\u0119 Wam w codziennej pracy.<\/p>\n\n\n\n
Poni\u017cej znajdziecie link do repozytorium z omawianymi przyk\u0142adami oraz bibliografi\u0119, kt\u00f3ra pomog\u0142a mi w napisaniu tego artyku\u0142u.<\/p>\n\n\n\n
***<\/p>\n\n\n\n
Link do repozytorium z przyk\u0142adami przestawianymi w blogu:<\/strong> https:\/\/github.com\/Theordius\/SwiftUIBlogExamples<\/a><\/p>\n\n\n\n
***<\/p>\n\n\n\n
Bibliografia<\/strong><\/h2>\n\n\n\n