Maciej Węglarczyk: Wielowymiarowy świat layoutów

2016-04-19

Wielowymiarowy świat layoutów

• To ja.

• 4,5 roku w Ganymede / GameDesire

• Od początku w mobilach (Android, iOS)

• Poprzez ulubione biblioteki Qt zainteresowanie problemem „dobrego” layoutu

Maciej Węglarczyk

• Wstęp

• Zarysowanie problemu

• Część teoretyczna rozwiązania

• Część praktyczna rozwiązania

• Podsumowanie

• Pytania

Agenda

PROBLEM

• Od 320 x 240…

• … po 3840 x 2160

• A pewno i wkrótce większe

Rozdzielczości

Źródło: http://androidmaterial.blogspot.com

• 16:9 • 16:10 • 21:9 • 4:3 • 5:4 • 5:3 • 8:5 • 17:9 • …

Proporcje ekranów

Źródło: https://en.wikipedia.org

• Telefony

• Phablety?

• Tablety

• Desktopy

Rozmiary fizyczne ekranów

Źródło: http://www.labbrand.com

• Od ~120 PPI…

• … po 806 PPI (Xperia Z5 Premium)

Gęstości ekranów (PPI)

Źródło: https://blog.oneplus.net

Gęstość ekranu [PPI = Pixels Per Inch] to

𝜌𝑒 = 𝑑𝑝

𝑑𝑓

,

gdzie 𝑑𝑝to długość przekątnej ekranu w pikselach policzonej wg wzoru Pitagorasa:

𝑑𝑝 = 𝑑𝑤2 + 𝑑ℎ

2,

gdzie 𝑑𝑤 i 𝑑𝑤 to długości boku ekranu w pikselach, a 𝑑𝑓 to długość przekątnej ekranu w calach.

Wzór je łączący

Jak zaprojektować aplikację / grę, aby „dobrze” wyglądała na urządzeniach z ekranami o różnych

rozdzielczościach, przekątnych, proporcjach i gęstościach?

Problem

• Referencyjna rozdzielczość z wybranymi proporcjami

• Skalowanie do dopasowania

Proste rozwiązanie #1

Źródło: http://v-play.net


• Plusy • Tylko jeden projekt graficzny

• Prosty projekt graficzny

• Banalna i szybka implementacja

• Minusy • Zmienne proporcje ekranu rozciągają grafiki nieproporcjonalnie

• Różne wielkości fizyczne przycisków na różnej wielkości urządzeniach

• Grafika słabej jakości na urządzeniach z wyższą gęstością ekranu (PPI) lub problemy z pamięcią na słabszych


• Zasada „Bezpiecznego prostokąta”

• Skalowanie do dopasowania + dodatkowe obszary


Źródło: http://v-play.net


• Plusy • Nadal tylko jeden projekt graficzny

• Dość prosty projekt graficzny

• Prosta i dość szybka implementacja

• Zmienne proporcje ekranu nie rozciągają grafik

• Minusy • Paski po bokach na ekranach z innymi proporcjami

• Brak gwarancji, że elementy będą tuż przy krawędzi

• Różne wielkości fizyczne przycisków na różnej wielkości urządzeniach

• Grafika słabej jakości na urządzeniach z wyższą gęstością ekranu (PPI) lub problemy z pamięcią na słabszych


• Zachowując wielkości fizyczne przycisków

• Bez pasków po bokach i rozciągania na ekranach o różnych proporcjach

• Z grafikami dostosowanymi do gęstości danego ekranu

A jakby tak trochę ładniej?

TEORIA

• Rozdzielczość operująca na wielkościach fizycznych

• Większa rozdzielczość = większy ekran

• Niezależna od gęstości ekranu (PPI)

Rozdzielczość wirtualna

• Określa pewną wielkość fizyczną, stałą pomiędzy urządzeniami danej kategorii

• Czasem zwany „pikselem logicznym”

• W Androidzie nazywany DP lub DIP (Density Independent Pixel)

• W iOSie – Punkt (Point)

Piksel wirtualny

1𝑝𝑖𝑘𝑠𝑒𝑙 𝑤𝑖𝑟𝑡𝑢𝑎𝑙𝑛𝑦 = 1𝑝𝑖𝑘𝑠𝑒𝑙 𝑓𝑖𝑧𝑦𝑐𝑧𝑛𝑦 ∙

𝜌𝑒

𝑘,

gdzie 𝑘 określa stałą normę gęstości dla danej kategorii urządzeń (np. – urz. mobilne / komputer / telewizor / wyświetlacz).

Dla urz. mobilnych 𝑘 wynosi ~160PPI, dla komputerów przyjmuje się ~96 PPI.

Piksel wirtualny

96𝑝𝑝𝑖 ∙ 1𝑚 = 160𝑝𝑝𝑖 ∙ 0.6𝑚

Kąt widzenia i odległość

Źródło: https://blogs.msdn.microsoft.com

• Skalowanie czcionek odbywa się osobno

• Wielkość czcionek powinna być wyrażana w punktach

• Punkty z definicji są wielkością fizyczną, a więc niezależną od gęstości ekranu

1𝑝𝑡 = 1

72″ ≈ 0.353mm

Czcionki

PRAKTYKA

• 6 wielkości fizycznych (2 kategorie) • iPhone 1-4 + iPod 1-4

• iPhone 5/5S/5C + iPod 5,

• iPhone 6/6S,

• iPhone 6 Plus / 6S Plus

• iPad

• iPad Pro

• Aktualnie już 3 kategorie gęstości ekranu • Non-retina, retina, retina HD

Jak to robi iOS

• Wszystkie wartości w layoutach i w kodzie są w punktach (wirtualnych pikselach)

• W XIBach są dostępne tzw. constraints, które pozwalają kotwiczyć i rozciągać się elementom

• Jest wparcie dla 3 wersji grafik dla każdej gęstości

• Jest możliwość zaprojektowania osobnego layoutu dla telefonu i tabletu (size classes)

• Jest wsparcie dla grafik „9-patch”

Jak to robi iOS

• Dawniej – projekt pixel-perfect retina iPhone i iPad • + skalowanie „w dół” grafik przy eksporcie dla urz. non-retina

• Dziś • albo powyższe + iPhone 6 + iPhone 6 Plus + iPad Pro (jeśli wszystkie

wspierane) i nadl wszystkie pixel-perfect

• albo per size-class – nadal 2, ale już nie pixel-perfect

• Albo jakaś dziwna hybryda powyższych

Jak to robi grafik iOS

• Od (prawie) początku przygotowany na dużą fragmentację

• Ogrom wielkości fizycznych (4 kategorie) • small - co najmniej 426dp x 320dp

• normal - co najmniej 470dp x 320dp

• large - co najmniej 640dp x 480dp

• xlarge- co najmniej 960dp x 720dp

Jak to robi Android

• Wiele kategorii gęstości ekranu • ldpi ~ 120 PPI

• mdpi ~ 160 PPI

• tvdpi ~ 213 PPI

• hdpi ~ 240 PPI

• xhdpi ~ 320 PPI

• xxhdpi ~ 480 PPI

• xxxhdpi ~ 640 PPI

• …

Jak to robi Android

• Kategorie – przykład: Sony Xperia Z • rozdzielczość 1920 x 1080

• gęstość ekranu 441 PPI ~ 480 PPI


𝜌𝑒

𝑘


480 PPI

160 PPI

1𝑝𝑖𝑘𝑠𝑒𝑙 𝑤𝑖𝑟𝑡𝑢𝑎𝑙𝑛𝑦 = 3𝑝𝑖𝑘𝑠𝑒𝑙𝑒 𝑓𝑖𝑧𝑦𝑐𝑧𝑛𝑒

1920/3 x 1080/3 = 640 x 360 = normal

Jak to robi Android

• Wartości w layoutach mogą być w dowolnych jednostkach

• Wartości w kodzie są domyślnie w pikselach

• W layoutach jest możliwe kotwiczenie i rozciąganie się elementów

• Jest wparcie dla wersji grafik dla wielu gęstości

• Jest możliwość zaprojektowania osobnego layoutu dla każdej kategorii wielkości

• Jest wsparcie dla grafik „9-patch”

Jak to robi Android

• Projekt per wspierana kategoria wielkości (w najwyższej wspieranej gęstości)

Jak to robi grafik Android

Źródło: http://developer.android.com

Przykład:


• Projekty mogą być pixel-perfect dla wspieranych gęstości, dla innych będą skalowane

• Kotwice i rozciąganie bardzo ważne

• Duuużo wycinania


• iOSowe urządzenia pasują do androidowych kategorii wielkości fizycznych urządzeń

• Przykład: iPhone 6 • rozdzielczość 1334 x 750

• gęstość ekranu 326 PPI ~ 320 PPI (xhdpi)


320 PPI

160 PPI

1𝑝𝑖𝑘𝑠𝑒𝑙 𝑤𝑖𝑟𝑡𝑢𝑎𝑙𝑛𝑦 = 2𝑝𝑖𝑘𝑠𝑒𝑙𝑒 𝑓𝑖𝑧𝑦𝑐𝑧𝑛𝑒

1334/2 x 750/1 = 667 x 375 = normal

Jak to połączyć

• Kategorie gęstości ekranów iOS są podzbiorem androidowych odpowiedników

• Non-retina: 163 PPI ~ 160 PPI = mdpi (x1)

• Retina: 326 PPI ~ 320 PPI = xhdpi (x2)

• Retina HD: ~460 PPI ~ 480 PPI = xxhdpi (x3)

Jak to połączyć

• Można więc posiadać jeden zestaw projektów graficznych pod oba systemy

Jak to połączyć

PODSUMOWANIE

• Kilka kategorii wielkości ekranu • + mechanizm wczytywania odpowiednich layoutów

• Kilka kategorii gęstości • + mechanizm wczytywania odpowiednich wersji grafik

• Używanie wszędzie tylko i wyłącznie jednostek wirtualnych • Poza fontami, te powinny być w punktach

• Używanie grafik „9-patch” • One też powinny być w wielu wersjach!

„Dobry” layouting

• Dobre projekty graficzne • Projekt per kategoria wielkości

• Projekt w najwyższej wspieranej gęstości

• Dobre rozmiary elementów (podzielność itp.)

• Zaprojektowane kotwiczenie

• Zaprojektowane rozciąganie

• Dystrybucja wielu wersji aplikacji z różnymi wersjami grafik

„Dobry” layouting

• Teoretycznie możliwe… • Ustawiając wszystkim grafikom wielkości w pikselach

wirtualnych

• Korzystając z grafik „9-patch”

• Używając tylko rozmiarów czcionek w punktach

• Obsługując wszystkie możliwe gęstości ekranu

• W praktyce trudno osiągalne • Zwłaszcza ze względu na ostatni podpunkt powyżej

Pixel-perfect i skalowanie

• Jeden layout to raczej niemożliwe, ale

• Jeden system layoutingu powinien wystarczyć na obie platformy

• Dobrze znać trochę teorii, pomaga czasem się odnaleźć w tych wszystkich skalowaniach

• Bardzo ważne, aby system layoutingu wybrać na początku projektu!

1 layout by wszystkimi rządzić?

• Liczba wspieranych kategorii wielkości fizycznej • Proponowane: 2-3, najlepiej wg. androidowych

• Liczba wspieranych kategorii gęstości • Proponowane: 2-3

• Orientacje urządzeń • Wedle woli

• Kwestie dot. kotwiczenia obiektów

Wybory na początku

DZIĘKUJĘ!

2016-04-19

Maciej Węglarczyk Senior Software Engineer

[email protected]

?

Maciej Węglarczyk: Wielowymiarowy świat layoutów

Mobile

Transcript of Maciej Węglarczyk: Wielowymiarowy świat layoutów