2016-03-24 40 views
7

tl; dr Jak mogę przekonwertować pomiary pikseli na jednym urządzeniu do pomiarów pikseli na innym?Jak zweryfikować (cyfrowy) rozwój pikseli w systemie Android?

Zaprojektowałem aplikację na Androida z wszystkimi ekranami o wymiarach 720 x 1280 pikseli. Zakładam, że jest to 2.0 xhdpi, co oznacza wymiary cyfrowe w pikselach 360x640 dp.

W QA znalazłem kilka niespójności na moim Nexusie 5x, zrobiłem zrzuty ekranu i wciągnąłem je do Photoshopa, aby potwierdzić/zmierzyć błędy. Nexus 5x ma rozdzielczość 1080x1920 pikseli, ale ma rozdzielczość 2,6 xxhdpi i konwertuje go na 411x731 dp.

Czy nie tylko prosta skala zawiodła?

To nie jest takie proste, jak zrzucanie zrzutu ekranu Nexusa (1080 szerokości) do Photoshopa i skalowanie ich do szerokości 720, prawda? To nie uwzględnia gęstości pikseli.

Powiedział inny sposób. Jeśli kwadrat ma 100px (50dp) na moim wzorze @ 2x, jak duże powinno być to na zrzucie Nexusa?

Pomocne linki

+2

Ach, ból tych rzeczy. Powodzenia. –

Odpowiedz

9

Istnieje wiele pytań/myśli w swoim poście.

Aby rozpocząć:

Jak przekonwertować pomiarów pikseli na jednym urządzeniu do piksela pomiarów na inny?

I:

Mam zaprojektowany aplikację na Androida ze wszystkimi ekranami o wymiarach 720x1280 px.

mam zamiar założyć, to znaczy, że zrobiłeś kilka cyfrowych obrazów/dokumentów UX w 720x1280 a teraz buduje się obrazy Kod/ładowanie dla aplikacji i nie napotkasz problemy, ponieważ różne urządzenia zachowują się w sposób nieoczekiwany sposób? Popraw mnie, jeśli jest to niedokładne.

Projektowanie dla systemu Android, a także ogólnie dla urządzeń mobilnych, to przynajmniej do pewnego stopnia zadawanie sobie tego, co użytkownik ma doświadczyć, i jak tego dokonać w ramach zasad dotyczących budowania interfejsu.

Google states że gdy mamy do czynienia z wieloma urządzeniami należy dążyć do „niezależności gęstości”:

Aplikacja osiąga „niezależność gęstości”, kiedy to zachowuje wielkości fizycznej (od użytkownika punktu widzenia) z interfejs użytkownika elementy wyświetlane na ekranach o różnych gęstościach.

Obrazek poniżej przedstawia "zły" projekt (nie uwzględnia dp)

enter image description here

Obrazek poniżej przedstawia dobry "gęstość niezależnego" wzorem:

enter image description here

http://developer.android.com/guide/practices/screens_support.html#density-independence

Innymi słowy, biorąc pod uwagę niezależność od gęstości przy projektowaniu i budowaniu aplikacji, użytkownik powinien widzieć obrazy i/lub widoki w spójny sposób na różnych urządzeniach. Sprawdzanie obrazów i widoków na różnych urządzeniach nie powinno być wykonywane w Photoshopie lub podobnym, powinno się to odbywać w emulatorze dostępnym w Android Studio i/lub na wielu fizycznych urządzeniach z różnymi wersjami systemu operacyjnego i/lub rozmiarami ekranu (ponieważ są one dostępne dla ciebie).

Inną rzeczą, aby pamiętać:

enter image description here

Pytałeś:

powiedział inny sposób. Jeśli kwadrat ma 100px (50dp) w moim wzorze @ 2x, jak duże powinno być oczekiwanie, że będzie na zrzucie Nexusa?

enter image description here

Przejdź do Google Device Metrics stronie:

enter image description here

Kliknij na Nexus 5X i spojrzeć na informacje o urządzeniu z panelu slide-in:

enter image description here

Accor ding do tej informacji, Google Nexus 5x jest 424px/w czyli 424dpi

Użyj równanie px = 50dp * (dpi/160)

px = 132,5

To cenne również dać prawdziwy -life przykład obliczania rozmiarów pikseli i dp podczas korzystania z określonego urządzenia i mam nadzieję, że pomoże ci to w następnym kroku odpowiedzieć na powyższe pytanie w przyszłości.

Załóżmy, że mamy kilka zdjęć, które chcemy "idealnie" dopasować do urządzenia, gdy urządzenie znajduje się w orientacji pionowej. Tak:

enter image description here

I powiedzmy, nasze urządzenie jest Nexus 5. Jak widać na powyższym przykładzie, istnieje 7 identyczne obrazy obok siebie, od lewej do prawej strony ekranu .Dzięki poniższym przykładzie, powinieneś być w stanie dowiedzieć się, „jak duży [pan] należy się spodziewać [zdjęcia], aby być” w różnych okolicznościach:

  1. Wiemy Nexus 5 jest urządzeniem xxhdpi bo wyglądało to w Google’s Device Metrics:

enter image description here

  1. Zacznijmy robi matematyki przez co stanowi dopełnienie. Zakładam, że masz dopełnienie domyślnie - to sprawdzić w swojej Wartości/dimens.xml się upewnić:

enter image description here

To 32DP musimy uwzględnić.

3. Następnie wiemy szerokość Nexus 5 jest 360dp lub 1080px, więc niech dowiedzieć się szerokość jednego z naszych siedmiu obrazów:

Zróbmy decyzję, że jedziemy do zaimportuj nasz obraz z uwzględnieniem gęstości wejścia xxdpi.

360dp (pełne) - 32DP (wyściółka) = 328dp (pozostały do ​​7 zdjęć)

328dp/7 = 46.9dp (ok)

Chodźmy do androidpixels, gorąco polecam stronę konwersji, a sprawdź co to znaczy w pikselach - w tym przypadku jest to 140,7px.

enter image description here

  1. Tworzenie wersji PNG naszego wizerunku, który jest 140.7px i zaimportować go jako xxhdpi (będziemy importować go w tym samym dp podpisu jako urządzenie).

Ponieważ Adobe Illustrator i Adobe Photoshop nie zezwalają na rozmiary dziesiętne, można przejść do 140, a różnica w odstępach w Android Studio. Matematyka sugeruje, że jeśli istnieje 6 przerw między tymi 7 obrazami, a straciliśmy 0,7 piksela na obraz, to 6 * 0,7 pik = 4,2 piksela, co być może musimy gdzieś wyjaśnić.

  1. Po zaimportowaniu obrazów w Final Android Resizer, zaleca się do zmiany rozmiaru zdjęć - lub po prostu zaimportować je do odpowiedniego folderu rozciągliwej - jest jeden końcowy etap: zaktualizować content_main.xml z poprawną obraz, i upewnij się, że robią to dla wszystkich elementów siedem ImageView:

enter image description here

to jest to, co powinno ostatecznie wyglądać następująco:

enter image description here

Powtórz te kroki z rozmiarem danego urządzenia.

Nie jest to jedyny sposób, aby to zrobić. Możesz użyć katalogów układu, aby wskazać konkretne wymiary urządzenia i wpłynąć na widoki w nich zawarte.Zobacz inne stanowisko zrobiłem o tym:

Differences between scaling images with dpi as opposed to dp