Skocz do zawartości
KyluAce

Projektowanie wyglądu aplikacji, tak by wspierała każde urządzenie. (Ratio/Dpi/Screen Size)

    Rekomendowane odpowiedzi

    Witam wszystkich serdecznie,

    Jest to mój pierwszy wpis, więc proszę o wyrozumiałość. Chciałbym dziś poruszyć temat, który od dłuższego czasu nie daje mi spokoju. Mianowicie chodzi mi o to jak poprawnie zaprojektować wygląd aplikacji, aby wspierała jak największą liczbę urządzeń (myślałem czy nie dodać tego wpisu w kategorii "design", ale uznałem że tutaj będzie pasować lepiej, bo nie chodzi mi o sam design a o cały zbiór praktyk i całą otoczkę). Jak wiecie obecnie na rynku mamy jakoś ponad 10k różnych telefonów z Androidem. Powiedzieć że producenci nie trzymają się właściwie żadnych reguł przy tworzeniu urządzeń (co zrobiło niesamowity misz masz), to właściwie nic nie powiedzieć. Pomijając fakt, że zmieniły się rozmiary ekranów czy zagęszczenie pixeli, to w ostatnim czasie dochodzi kwestia zupełnie nowych ratio związanych z między innymi z pomijaniem ramek itp.

     

    Tak więc musimy uwzględnić 3 rzeczy:

    - rozmiar ekranu

    - zagęszczenie pixeli

    - ratio ekranu

     

    Biorąc to wszystko pod uwagę, czy jest jeszcze możliwe zrobienie aplikacji, która będzie wyglądała identycznie na większości urządzeń ?

    Weźmy na przykład aplikację która posiada ekran startowy, kilka grafik (dajmy na to jakieś tło, masa przycisków, coś z galerią i tak dalej). Możemy oczywiście tworzyć masę katalogów, ale załóżmy że obecnie nasze grafiki ważą 10mb w wersji standardowej. Załóżmy że weźmiemy pod uwagę tylko 3 foldery dpi: xhdpi, xxhdpi, xxxhdpi. Oczywiście nie są to jedyne foldery, które musimy rozważyć bo dochodzi kwestia ratio, wiadomo że zupełnie inaczej będzie wyglądała grafika na telefonie/tablecie z ratio  4:3 a inaczej 19,5:9. Różnych ratio obecnie używanych będzie pewnie z 10. W takim razie co mamy przygotować grafiki w 30 różnych folderach ? Przy początkowych założeniach da nam to 10x(3x10) = 300mb grafik, a to raczej mija się z celem. Możemy również wrzucić nasze grafiki do największych katalogów a android sam sobie je częściowo przeskaluje, ale w praktyce wychodzi to różnie no i dalej pozostaje kwestia że musimy rozważyć wtedy każde ratio już wtedy pomijając kwestie dpi.  Na developer.android.com można trochę poczytać o wsparciu dla różnych wielkości ekranów itp ale jest tam niewiele jeśli chodzi o różne screen ratio i niewiele o samych grafikach, głównie rozpisują się o layoutach.

     

    Jestem mega zmieszany, jeśli chodzi o ten temat, wyobraźmy sobie że mamy ściągnąć jakąś zwykłą, w miarę prostą, informacyjną aplikację, która waży ponad 300mb, przecież to istne szaleństwo.  Oczywiście możemy dociągać sobie grafiki na żywo, ale co jeśli aplikacja ma działać offline ? Na ten moment wydaje mi się właściwie niemożliwe, żeby aplikację dopasować do większości nawet w miarę nowych urządzeń (dajmy na to api 21<), tak aby wyglądało to niemal identycznie oraz aplikacja nie zajmowała mega dużo przestrzeni.

    Co o tym wszystkich myślicie ? Jak wy sobie z tym radzicie ? jakich praktyk używacie ?

    Pozdrawiam

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    27 minut temu, KyluAce napisał:

    Biorąc to wszystko pod uwagę, czy jest jeszcze możliwe zrobienie aplikacji, która będzie wyglądała identycznie na większości urządzeń ?

    Zrobienie takiej aplikacji jest w zasadzie niemożliwe, a jak już, to byś się musiał bardzo nastarać. Musiałbyś wszystkie rozmiary/marginy/paddingi faktycznie powrzucać do odpowiednich plików z dimensami, które to znowu musiałyby być proporcjonalnie obliczone dla każdej wielkości ekranu, aby wyglądały na prawdę identycznie. 

    Jeśli chodzi o grafiki, to w zasadzie spotkałem się tylko z tym, że odpowiednia grafika jest resizerowana do odpowiednich rozmiarów i wrzucana od odpowiedniego folderu drawable (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) i w sumie raczej to wystarczało. Rzadko kiedy potrzebowaliśmy się bardziej nasilić. 

    Oczywiście możesz porywać się z motyką na słońce i tworzyć np. layouty dla każdej możliwej wariacji, ale pytanie po co? Byłoby to czasochłonne i nieoptymalne (jak dla mnie takie coś ma dla mnie sens jedynie, gdy przygotowujemy wariant widoku smartphonowego oraz tabletowego).  

    Na nasze szczęście Google chyba też czasem pomyśli o poruszonej przez Ciebie kwestii, dlatego rozwijają ConstraintLayout, pomocna rzecz w tworzeniu flexible layoutów . :) Ogólnie mam wrażenie, że Google stara się jakoś pomóc deweloperom w tej kwestii ostatnio. 

    Jest też kwestia użycia grafik wektorowych niż rastrowych.

    Ogólnie rzecz biorąc deweloperzy, jak również u mnie, liczą się z tym, że nie da się wszystkim dogodzić. Dlatego też raczej nikt nie robi większego problemu, że na dużym ekranie widok mieści się cały, a ten sam widok na mniejszym trzeba przescrollować, aby np. kliknąć w jakiś przycisk. Raczej większy nacisk kładzie się na to, aby nic się nie rozjeżdżało, wszystko się ładnie mieściło i miało odpowiednie proporcje zachowane na różnych wyświetlaczach niż na tym, aby wyglądało to 1:1 na każdym sprzęcie. (Mam na myśli coś takiego: https://i.stack.imgur.com/Ys6IU.jpg :) 

     

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    34 minuty temu, Android Developer napisał:

    Zrobienie takiej aplikacji jest w zasadzie niemożliwe, a jak już, to byś się musiał bardzo nastarać. Musiałbyś wszystkie rozmiary/marginy/paddingi faktycznie powrzucać do odpowiednich plików z dimensami, które to znowu musiałyby być proporcjonalnie obliczone dla każdej wielkości ekranu, aby wyglądały na prawdę identycznie. 

    Jeśli chodzi o grafiki, to w zasadzie spotkałem się tylko z tym, że odpowiednia grafika jest resizerowana do odpowiednich rozmiarów i wrzucana od odpowiedniego folderu drawable (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) i w sumie raczej to wystarczało. Rzadko kiedy potrzebowaliśmy się bardziej nasilić. 

    Oczywiście możesz porywać się z motyką na słońce i tworzyć np. layouty dla każdej możliwej wariacji, ale pytanie po co? Byłoby to czasochłonne i nieoptymalne (jak dla mnie takie coś ma dla mnie sens jedynie, gdy przygotowujemy wariant widoku smartphonowego oraz tabletowego).  

    Na nasze szczęście Google chyba też czasem pomyśli o poruszonej przez Ciebie kwestii, dlatego rozwijają ConstraintLayout, pomocna rzecz w tworzeniu flexible layoutów . :) Ogólnie mam wrażenie, że Google stara się jakoś pomóc deweloperom w tej kwestii ostatnio. 

    Jest też kwestia użycia grafik wektorowych niż rastrowych.

    Ogólnie rzecz biorąc deweloperzy, jak również u mnie, liczą się z tym, że nie da się wszystkim dogodzić. Dlatego też raczej nikt nie robi większego problemu, że na dużym ekranie widok mieści się cały, a ten sam widok na mniejszym trzeba przescrollować, aby np. kliknąć w jakiś przycisk. Raczej większy nacisk kładzie się na to, aby nic się nie rozjeżdżało, wszystko się ładnie mieściło i miało odpowiednie proporcje zachowane na różnych wyświetlaczach niż na tym, aby wyglądało to 1:1 na każdym sprzęcie. (Mam na myśli coś takiego: https://i.stack.imgur.com/Ys6IU.jpg :) 

     

    Rozumiem to doskonale, ale właściwie wszystko co poruszyłeś, włącznie z linkiem który dałeś, odnosi się do jednego ratio. Całe tworzenie layoutów nie wydaje się być problemem bo tam możemy elementy fajnie od siebie uzależnić,  ale tak jak powiedziałem głównym problemem wydaje się tu być ratio i grafiki. Przykładowo jak mamy grafikę  (załóżmy ekran startowy) 16:9,  i chcemy ją wrzucić  do telefonu z ratio 19,5:9 która jest bardziej prostokątna, to mamy dwa wyjścia, albo pojawią się puste przestrzenie u góry i u dołu ekranu (jak wrzucimy oryginał) albo możemy go rozciągnąć ale wtedy grafika będzie rozjechana.

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach

    Chyba się trochę pogubiłem w tym, o co Ci właściwie chodzi. Możesz mi to jakoś przejrzyściej wyjaśnić? Czy chodzi Ci o obrazek, który wrzucasz np. do ImageView czy o coś innego? 

     

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    28 minut temu, Android Developer napisał:

    Chyba się trochę pogubiłem w tym, o co Ci właściwie chodzi. Możesz mi to jakoś przejrzyściej wyjaśnić? Czy chodzi Ci o obrazek, który wrzucasz np. do ImageView czy o coś innego? 

     

    Przykładowo mamy grafikę, 1920x1080, będzie to grafika wyświetlana na cały ekran. W przypadku telefonu który ma identyczne ratio jak dana grafika tj 16:9, właściwie nie ma znaczenia czy telefon ma rozdzielczość 1920x1080 czy 1280x720 wtedy wtedy wrzucamy grafikę do  drawable-xxhdpi i mamy z głowy(android tam zrobi resize tej grafiki itp). Natomiast co w wypadku gdy mamy telefon który ma rozdzielczość 2960x1440  (ratio 18,5:9)?  Wtedy ona nie wypełni całego ekranu

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach

    Pisałeś kiedyś aplikację mobilną? Bo mam lekkie wrażenie, że chyba póki co, to nie bardzo. 

    Ogólnie zalecałbym i tak resize tak wielkiej grafiki. Fajną i pomocną rzeczą jet Final android resizer, wrzucasz grafikę (najlepiej xxhdi) i on sam "wypluwa" Ci zresizerowane wersje tej grafiki do innych formatów (mdpi, xhdpi, xxxhdi, itp.), które później przerzucasz po prostu do odpowiednich folderów. 

    Poza tym, do tego co właśnie mówisz, komponujesz cały layout i ustawiasz grafikę w nim tak jak chcesz. Jak wrzucisz samą grafikę i pozostawisz ją samą sobie to faktycznie, może się zachowywać jak chce. 
    Przede wszystkim, gdy ustawiasz grafikę, to zalecałbym robienie to przez android::src="...", a nie przez android::background="...". Src powoduje zachowanie ratio obrazu, a background z koleju przeskalowuje obraz w celu dopasowania do rozmiaru ImageView. Poza tym, poczytaj o android:adjustViewBounds (to powinno rozwiązać np. z tym, że obrazek jest prostokątny a Imagevie kwadratowy). No i jeszcze android:scaleType="..." też ma kilka parametrów, które określają jak się ma zachować obrazek. To są podstawowe elementy, którymi możesz sobie "operować obrazem", żeby zachował się tak jak Ty tego chcesz. I jak go już sobie ustawisz, to się potem nie przejmujesz tym, na jakim wyświetlaczu z jakim ratio będzie on wyświetlany. 

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    44 minuty temu, Android Developer napisał:

    Pisałeś kiedyś aplikację mobilną? Bo mam lekkie wrażenie, że chyba póki co, to nie bardzo. 

    Ogólnie zalecałbym i tak resize tak wielkiej grafiki. Fajną i pomocną rzeczą jet Final android resizer, wrzucasz grafikę (najlepiej xxhdi) i on sam "wypluwa" Ci zresizerowane wersje tej grafiki do innych formatów (mdpi, xhdpi, xxxhdi, itp.), które później przerzucasz po prostu do odpowiednich folderów. 

    Poza tym, do tego co właśnie mówisz, komponujesz cały layout i ustawiasz grafikę w nim tak jak chcesz. Jak wrzucisz samą grafikę i pozostawisz ją samą sobie to faktycznie, może się zachowywać jak chce. 
    Przede wszystkim, gdy ustawiasz grafikę, to zalecałbym robienie to przez android::src="...", a nie przez android::background="...". Src powoduje zachowanie ratio obrazu, a background z koleju przeskalowuje obraz w celu dopasowania do rozmiaru ImageView. Poza tym, poczytaj o android:adjustViewBounds (to powinno rozwiązać np. z tym, że obrazek jest prostokątny a Imagevie kwadratowy). No i jeszcze android:scaleType="..." też ma kilka parametrów, które określają jak się ma zachować obrazek. To są podstawowe elementy, którymi możesz sobie "operować obrazem", żeby zachował się tak jak Ty tego chcesz. I jak go już sobie ustawisz, to się potem nie przejmujesz tym, na jakim wyświetlaczu z jakim ratio będzie on wyświetlany. 

    Jestem programistą androida i robię komercyjne aplikacje dla obiektów kulturalnych. Także o wszystkim o czym napisałeś wiem, natomiast drugi raz nie odniosłeś się do głównego problemu za to ciągle gadasz o formatach mdpi/xhdpi/xxxhdpi itp w przypadku których problem jest akurat trywialny, więc właściwie to ja powinienem zapytać czy robileś kiedykolwiek komercyjną aplikację. 

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach

    No offence kolego, nie chciałem Cię urazić. 
    W końcu chyba zrozumiałem o co Ci chodzi. Np. jak masz aplikację i chcesz z miniaturki wyświetlić obrazek w full screenie? Jeśli tak, no to, według mnie, zależy od podejścia i założeń i tego jak deweloper/klient zdecyduje się na wyświetlenie takiego obrazu. No bo idąc twoim tropem, jak masz obrazek panoramiczny to jak chcesz go wyświetlić we full screenie na telefonie z wyłączonym przełączaniem w tryb landscape? Chyba syzyfową pracą byłoby tworzenie do tego miliona resourców, layoutów itp. 

    Bo ja serio nie widzę sensu w  aż takim przejmowaniu się ratio/rozmiarem ekranu w kwestii grafik, które przeważnie są ikonami, miniaturkami, itp, bo z nimi raczej nie ma problemu. Jak dobrze ułożysz layout to wszystko będzie ładnie się wyświetlać na każdym wyświetlaczu. Jest to kwestia raczej specyficznych przypadków i problemów, które faktycznie czasem mogą wystąpić i wtedy faktycznie trzeba pogłówkować aby wyglądało to tak, jak było to zamierzone :) 

    Edytowane przez Android Developer

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    mmaciejow

    Mało kto dodał info, że robi się layouty dla bardziej "znanych" telefonów. Lepiej by się rozmawiało gdyby powstał przykład. Wszystko zależy od tego czy skalujemy grafikę czy nie. Grafikę powinno się skalować ponieważ może wyjść na niektórych ekranach dziwacznie. 

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach

    Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

    Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

    Zarejestruj nowe konto

    Załóż nowe konto. To bardzo proste!

    Zarejestruj się

    Zaloguj się

    Posiadasz już konto? Zaloguj się poniżej.

    Zaloguj się

    • Ostatnio przeglądający   0 użytkowników

      Brak zarejestrowanych użytkowników przeglądających tę stronę.

    x