#2 – Emulator iOS i pierwszy ekran aplikacji Car Information

Witam w Was w kolejnym wpisie z cyklu DSP17, tym razem zajmiemy się ekranem początkowy aplikacji, oraz emulatorem iOS. Aplikacja będzie zawierała w ekranie startowym 3 przyciski, oraz jeden obrazek symbolizujący logo aplikacji.  W celu dodawania elementów na widok, przechodzimy do storyboard’u dostępnego po lewej stronie w strukturze projektu, a następnie po prawej stronie w sekcji z kontrolkami dodajemy przycisk (Button) na widok. Wystarczy przeciągnąć button w odpowiednie miejsce na ekranie.

Storyboard

Przeciągamy 3 przyciski, mniej więcej w połowie widoku i nadajemy im odpowiednie nazwy. Dodatkowo rozciągamy je na całą szerokość widoku, tak aby były dopasowane do różnych wersji iPhon’ów. Dodatkowo jeżeli chcemy aby nasz widok miał już konkretne wymiar np. 4,7″ możemy ustawić taki rozmiar dla wybranego widoku. W tym celu przechodzimy do sekcji attributes inspector i w pierwszej liście rozwijanej „Size” wybieramy odpowiedni wymiar. Dla naszego projektu przykładowo wybierzemy 4,7″.

attributes inspector

W tej sekcji możemy wybrać również inne istotne opcje dla naszego projektu takie jak orientacja widoku (pozioma/pionowa), schemat kolorystyczny górnej i dolnej belki, możemy ja nawet całkowicie ukryć co przy małych wymiarach telefonów może być bardzo przydatne. Następnie wracamy do naszych przycisków i aby je wyrównać w pionie/poziomie zaznaczamy wszystkie 3 przyciski i na dole po prawej stronie klikamy ikonkę trójkąta „auto layout” a następnie „Add missing constraints” aby dodać odpowiednie wymiary.

Add missing constraints

Teraz gdy mamy przyciski możemy zająć się ich wyglądem i stylami. W tym celu klikamy na przycisk i po prawej stronie mamy dostęp do zmiany czcionek, koloru tła, wyrównania i wszelkich opcji związanych z zawartością przycisku. Dodatkowo również z poziomu kodu możemy nadać odpowiedni styl i tym sposobem zrobić np. zaokrąglone rogi przycisków.

ustawienia przycisku

Następnie aby sprawdzić działanie dodanych przycisków, już po nadaniu im wstępnego wyglądu, możemy uruchomić emulator iOS w bardzo prosty sposób.  W prawy górnym rogu klikamy ikonkę strzałki (run) a następnie z rozwijanej listy wybieramy odpowiednie urządzenia. Sa one wszystkie instalowane wraz z oprogramowaniem xCode. Znajdziemy tam wszystkie iPhone’y, iPad’y, a także apple watch. Wszystko działa bardzo prosto i intuicyjnie. Jeżeli program nie będzie zawierał błędów to symulator powinien uruchomić się wraz z nasza aplikacją.

emulatory ios

Po wybraniu odpowiedniego emulatora, powinnismy zobaczyć na ekranie efekt jak poniżej, czyli czarne przyciski, czcionką 20, o kolorze białym. Kolor tła aplikacji został ustawiony na lekko szary.

podgląd aplikacji

Dodamy teraz ikonkę obrazka nad przyciskami, w tym celu przeciągamy Image View na widok. Następnie przeciągamy do naszego projektu ikonę. Wracamy do widoku, klikamy Image View i po prawej stronie wybieramy z listy obrazek, który dodaliśmy przed chwilą.

dodawanie image view

Po dodaniu powinien pojawić się już w naszym widoku. Proponuję wybrać sposób skalowania na Aspect Fit, wtedy zachowane zostaną proporcje. Domyślnie wybrane jest scale to fill i wtedy obrazek automatycznie wypełnia nam całą przestrzeń image view, nie zachowując proporcji. Następnie klikamy trójkąt na dole po prawej „Auto layout”, klikamy clear a następnie add constraints, w tym celu wyrównamy wszystkie elementy. Ja dodatkowo całość przesunąłem na samą górę i obecnie projekt widoku wygląda tak jak poniżej.

Teraz zapisujemy zmiany i commitujemy repozytorium do gita.

Dodaj komentarz