Jak tworzymy interfejs użytkownika w aplikacjach na Androida?

27 października 2018 6 minut czytania

Witajcie w kolejnym odcinku naszego cyklu. Dzisiaj chciałbym Wam pokazać jak z perspektywy programisty wygląda tworzenie interfejsu użytkownika w aplikacji. Dowiecie się jakie mamy możliwości, jakie są ograniczenia. Zejdziemy również na niższe poziomy systemu, dzięki czemu dowiecie się jak Android rysuje na ekranie naszą aplikację.

Zacznijmy od podstaw

Interfejs użytkownika w każdej aplikacji składa się z dwóch typów elementów. Pierwszym z nich jest View (w tym artykule będę używał nazwy „Widok”), który jest czymś w rodzaju klocka, budującego interfejs. Przycisk, obrazek, tekst, formularz do wpisywania tekstu – to wszystko są widoki – dokładniej rzecz biorąc te elementy rozszerzają klasę View.

Drugim typem jest ViewGroup – jak sama nazwa wskazuje ten element jest odpowiedzialny za grupowanie widoków. Klasy rozszerzające klasę ViewGroup nazywamy layoutami (w tym artykule też będę używał tej nazwy). Pojedynczego widoku nie możemy sobie tak po prostu gdzieś wsadzić – musi on znajdować się w jakimś layoucie. Możesz sobie wyobrazić, że layout to coś, co przyjmuje jakieś przedmioty i układa je w odpowiedni dla siebie sposób.

Rodzaje Layoutów

W zależności od wybranego przez nas Layoutu, nasze widoki będą rozmieszczone na ekranie w różny sposób. Wyróżniamy trzy najpopularniejsze Layouty:

Linear Layout – najprostszy layout jaki mamy. Linear z angielskiego oznacza „liniowy” – ta nazwa idealnie oddaje jego działanie. Linear Layout po prostu układa elementy jeden za drugim. Wyróżniamy jego dwa warianty – Linear Layout z orientacją pionową, gdzie elementy układane są jeden pod drugim (zaczynając od góry) oraz z orientacją poziomą, gdzie elementy układane są od lewej do prawej.

Relative Layout – słowo Relative możemy przetłumaczyć jako „względny” lub „zależny” – te dwa słowa również świetnie oddają jego działanie. W tym layoucie układamy widoki na podstawie położenia innych elementów. Dla przykładu jeśli mamy 3 widoki A, B oraz C to, chcąc ułożyć je jeden pod drugim, musimy powiedzieć systemowi coś w stylu: „Przypnij widok A do góry, widok B do widoku A, a widok C do widoku B”. W ten sposób powstanie nam taka wieża. Relative Layout jest używany w sytuacjach, gdzie chcemy osiągnąć efekt niemożliwy do zrealizowania przy użyciu Linear Layout.

Constraint Layout – powstał on stosunkowo niedawno – tak naprawdę jest to ulepszony Relative Layout. Każdy widok opisywany jest przez tak zwane constrainty, czyli opis tego w jaki sposób widok ma być przypięty do innego widoku. Na początku nauka Constraint Layouta może wydawać się ciężka, ale Android Studio posiada tryb graficzny, w którym możesz zdefiniować średnio zaawansowany interfejs użytkownika używając jedynie myszki.

Jak dostosować interfejs do różnych rozdzielczości?

Android niestety nie rozpieszcza programistów, jeśli chodzi o projektowanie interfejsów. Cały czas musimy pamiętać, że system działa na telefonach z całym wachlarzem różnych wielkości ekranów i rozdzielczości. Na szczęście Google pomyślało o tym już na etapie projektowania systemu. W Androidzie praktycznie nie używamy pikseli jako jednostki wielkości. Zamiast tego używamy jednostki „dp” czyli „density independent pixel” co można przetłumaczyć na pixel niezależny od gęstości. Tworząc interfejs deklarujemy na przykład, że nasz przycisk będzie miał 30dp szerokości i Android dba o to, żeby ten przycisk był jednakowej wielkości zarówno na urządzeniu z rozdzielczością HVGA jak i 4K.

Niestety to nie zawsze wystarcza. Czasami elementów jest tak dużo obok siebie, że na mniejszych ekranach wyglądają bardzo brzydko. Taka sytuacja również została przewidziana przez Google. Mianowicie możemy zdefiniować całkowicie osobny interfejs dla różnych wielkości ekranu. Z perspektywy programisty wygląda to tak, że umieszczamy projekt interfejsu w odpowiednim folderze, a system Android sam sprawdzi jaką rozdzielczość ma urządzenie i wybierze dla niego odpowiedni interfejs. Na poniższym obrazku możesz zobaczyć klasyfikację na podstawie różnych rozdzielczości:

Co z tym obracaniem ekranu?

Obiecałem, że zdradzę wam dlaczego nie wszystkie aplikacje wspierają obrót ekranu. Cały ten akapit mogę streścić zdaniem – jeśli nie wiadomo o co chodzi, to chodzi o pieniądze. Oczywiście nie oznacza to, że Google każe sobie płacić za włączenie funkcji obrotu ekranu. Chodzi oczywiście o czas potrzebny na dostosowanie aplikacji do poziomego trybu.

Pamiętacie artykuł o cyklu życia? Pisałem tam, że system android może zatrzymać naszą aktywność w przypadku braku pamięci. To samo dzieje się w przypadku obrotu ekranu – system ubija naszą aktywność i tworzy ją od nowa. Pewnie się zastanawiacie dlaczego się tak dzieje – otóż system daje nam szansę na załadowanie całkiem innego interfejsu użytkownika. Tak jak możemy definiować różne wersje interfejsów w zależności od rozdzielczości, tak samo możemy stworzyć dwie wersje w zależności czy użytkownik trzyma telefon pionowo czy poziomo. Oczywiście można powiedzieć systemowi, aby nie zatrzymywał naszej aktywności podczas obrotu ekranu, jednak wtedy sami musimy zadbać o przeładowanie interfejsu, lub zostawić go w takiej samej wersji jak w widoku pionowym.

Jednym z pierwszych pytań przy negocjacjach z klientem jest zawsze to czy będziemy obsługiwać obrót ekranu. Klienci przeważnie rezygnują z tej funkcjonalności, ponieważ uważają, że nie przełoży się ona jakoś znacząco na potencjalne zyski.

Co się dzieje pod maską?

Android działa w ten sposób, że odświeża interfejs naszej aktywności dokładnie co 16 ms. Oznacza to, że masz dokładnie tyle czasu, aby wykonać na przykład jakieś obliczenia. Jeśli przekroczysz ten czas, chociażby do 20 ms to system wyrysuje Twoją klatkę dopiero przy następnej okazji – czyli 32 ms po poprzedniej klatce. Pominięcie jednej klatki nie jest jakoś bardzo znaczące przy statycznych aplikacjach. Jednak jeśli będziemy gubić klatki podczas animacji, to użytkownik na pewno to zobaczy i nie zapamięta naszej aplikacji dobrze.

Dziękuję Wam za dzisiaj – było nieco bardziej technicznie, ale mam nadzieję, że Was nie zanudziłem. Za tydzień poruszymy trochę lżejszy temat. Opowiem, w jaki sposób Android oszczędza energię i jak to wpływa na tworzenie aplikacji.

Zapraszam również na największe w Polsce forum dla programistów Android. Jeśli macie pytania odnośnie kariery jako programista – zapraszam do działu Kariera programowanie. Zachęcam również do przejrzenia działu Praca oraz zlecenia dla programistów – być może to właśnie tam znajdziesz swoją pierwszą pracę ?

Dla bardziej zaawansowanych…

Jeśli jesteś programistą i interesujesz się tworzeniem interfejsu użytkownika, możesz połączyć programowanie z projektowaniem i zdobyć nowe umiejętności. Sprawdź kurs Digital UX i zostań UX Designerem. Dodatkowo, jeśli masz już w tej dziedzinie doświadczenie, możesz nauczać User Experience w Coders Lab — Szkole IT. Praca wykładowcy niesie ze sobą szereg korzyści, o których możesz przeczytać tutaj.

Poprzednie odcinki: