Ta strona korzysta z plików cookie, abyśmy mogli zapewnić jak najlepszą obsługę. Informacje o plikach cookie są przechowywane w przeglądarce i wykonują takie funkcje, jak rozpoznawanie cię po powrocie do naszej witryny i pomaganie naszemu zespołowi w zrozumieniu, które sekcje witryny są dla Ciebie najbardziej interesujące i przydatne.
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.
![](https://quercus.pl/wp-content/uploads/2018/07/quercus_61.png)
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:
![](https://quercus.pl/wp-content/uploads/2018/07/quercus_62.png)
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:
![](https://quercus.pl/wp-content/uploads/2018/07/quercus_63-768x404.png)
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:
![](https://quercus.pl/wp-content/uploads/2018/07/quercus_64.png)
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.
![](https://quercus.pl/wp-content/uploads/2018/07/quercus_65.png)
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ść.
![](https://quercus.pl/wp-content/uploads/2018/07/quercus_66-768x512.png)
Teraz, jeśli zmniejszymy okienko w którym pracujemy, wielkość elementu automatycznie dostosuję się do wartości marginesów.
![](https://quercus.pl/wp-content/uploads/2018/07/quercus_67.png)
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:
![](https://quercus.pl/wp-content/uploads/2018/07/quercus_68-768x371.png)
![](https://quercus.pl/wp-content/uploads/2018/07/quercus_69-768x369.png)