Osoba trzymająca w ręce smartfon z wyświetlonym ekranem głównym pełnym aplikacji.
LINKI AFILIACYJNE

Jak tworzymy interfejs użytkownika w aplikacjach na Androida?

6 minut czytania
Komentarze

Przypominamy ciekawe teksty z Android.com.pl, które są już nieco starsze. Jeśli chcecie powspominać i zobaczyć, jak wyglądał świat IT kilka lat temu – zapraszamy do przeczytania poniższego artykułu. Część wiedzy nadal jest jak najbardziej aktualna, ale w obliczu dynamicznych zmian, pojawienia się AI i innych nowości wynikających z postępu technologicznego – sporo również się zmieniło. Oryginalna treść tekstu opublikowanego w 2018 roku znajduje się poniżej.

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 – 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

Fot. Redakcja Android.com.pl

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.

Fot. freemockups.org / Pexels

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 rozmiarów:

Fot. Android / materiały prasowe

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.

jak udostępnić kalendarz google
Fot. Czapp Arpsd / Pexels

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.

Źródło: oprac. własne. Zdjęcie otwierające: Kharis Ardi / Shutterstock

Motyw