10 sztuczek Design Studio – część 6

Tak jak wspomnieliśmy na początku, aplikacje stworzone w Lumira Designer to aplikacje webowe. Oznacza to, że jedyne czego potrzebujemy do ich uruchomienia po stronie użytkownika końcowego to przeglądarka internetowa.

Jednakże, każdy typ urządzenia różni się od siebie rozdzielczością i proporcjami ekranu. Aplikacja, która dobrze wygląda na komputerze, może być całkowicie nieczytelna na telefonie, i vice versa – aplikacja, która świetnie prezentuje się na telefonie, może wydawać się mało dopracowana na komputerze.

Dlatego w Lumira Designer istnieje kilka możliwych sposobów na prezentowanie elementów – możemy je ustawiać ręcznie, a ich rozmiary ustawiać w pikselach – zapewnia nam to całkowity wpływ na wygląd naszej aplikacji. Korzystając z tej metody łatwo zaprezentować nam kokpit, który dobrze prezentuje się np. na ekranie komputera w rozdzielczości Full HD.

Istnieją także bardziej dynamiczne techniki prezentowania elementów – możemy dokładnie ustawić ich marginesy, ale zamiast konkretnych rozmiarów pozwolić, by automatycznie się rozciągały, dostosowując się do dostępnego miejsca.

Takie zachowanie ustawiamy korzystając z właściwości elementów (okno Properties), a dokładniej działu Display.

Gdzie:

Top, Left, Bottom, Right Margin – (odpowiednio) górny, lewy, dolny i prawy margines do ekranu naszej aplikacji (lub kontenera, jeśli nasz element w takowym się znajduje).

Width, Height – odpowiednio szerokość i wysokość.

Możemy zauważyć, że w niektórych polach występują wartości liczbowe, a w niektórych słowo auto. Taki wpis oznacza, że dana właściwość naszego elementu automatycznie dostosowuje się na podstawie widoku aplikacji do pozostałych wartości.

Uwaga!

Zawsze co najmniej dwie wartości z działu display muszą być ustawione na auto.

Przykład ustawienia statycznego:

W naszym wypadku górny i lewy margines ustawione są na 50 pikseli. Rozmiar elementu ustawiliśmy na 700×300 px. Dolny i prawy margines natomiast automatycznie dostosowuje się tak, aby być zgodny z resztą wartości.

Podgląd naszego elementu:

Takie zastosowanie pozwala nam na dokładne ustawienie każdego elementu według naszych zaleceń, jednakże stałe wartości rozmiarów powodują, że zmiana wielkości okienka w której wyświetlamy nasz kokpit nie będzie miała na niego wpływu. Przykładowo: jeśli rozdzielczość urządzenia jest mniejsza niż 700×300 px, nie będzie mogło ono nawet wyświetlić wykresu w całości:

Przykład ustawienia dynamicznego

Dla tego samego elementu (w tych samych ustawieniach) wpiszemy teraz słowo auto w jego właściwości Width i Height.

Lumira Designer automatycznie wypełni resztę właściwości tak, żeby element nie ruszył się z wcześniej postawionego miejsca. Na podglądzie widzimy jednak, że pojawiły się strzałki określające dolny i prawy margines, a zniknęły te określające długość i szerokość.

Teraz, jeśli zmniejszymy okienko w którym pracujemy, wielkość elementu automatycznie dostosuję się do wartości marginesów.

Dzięki temu podejściu rozdzielczość ekranu urządzenia, na którym będziemy prezentować nasz kokpit staje się mniejszym problemem.

Oba podejścia mają swoje wady i zalety – w tym wypadku nie mamy już tak dokładnego wpływu na ustawienie elementów. To, które podejście należy wybrać, zależy tylko i wyłącznie od projektanta i rodzaju kokpitu, który chcemy stworzyć.

Ekran stworzony pod rozdzielczość HD wyświetlony w mniejszej rozdzielczości, przykład użycia:

Ten sam ekran przeniesiony na siatki z zastosowaniem automatycznego dostosowywania:

Zapisz się do
naszego newslettera

Nie przegap nowych aktualizacji