Mam pełny ekran PNG, który chcę wyświetlać na ekranie powitalnym. Tylko jeden błąd istnieje, a ja nie mam pojęcia jaki rozmiar, aby umieścić w każdej rozciągliwej folderu ( ldpi
, mdpi
, hdpi
, i xhdpi
). Moja aplikacja powinna działać dobrze i pięknie na wszystkich telefonach i tabletach. Jakie rozmiary (w pikselach) powinienem utworzyć, aby powitanie wyświetlało się ładnie na wszystkich ekranach?
214
Odpowiedzi:
Zrzeczenie się
Ta odpowiedź pochodzi z 2013 roku i jest bardzo nieaktualna. W systemie Android 3.2 istnieje teraz 6 grup gęstości ekranu. Ta odpowiedź zostanie zaktualizowana, gdy tylko będę mogła, ale bez ETA. Informacje na temat wszystkich gęstości w tej chwili znajdują się w oficjalnej dokumentacji (chociaż jak zwykle trudno jest znaleźć informacje o określonych rozmiarach pikseli).
Oto wersja tl / dr
Utwórz 4 obrazy, po jednym dla każdej gęstości ekranu:
Przeczytaj wprowadzenie do obrazu 9-patch w Android Developer Guide
Dzięki temu Android wybierze odpowiedni plik dla gęstości obrazu urządzenia, a następnie rozciągnie obraz zgodnie ze standardem 9 łatek.
koniec tl; dr. Pełny post z wyprzedzeniem
Odpowiadam w odniesieniu do aspektu projektowego pytania. Nie jestem programistą, więc nie będę w stanie dostarczyć kodu do implementacji wielu dostarczonych rozwiązań. Niestety, moim zamiarem jest pomoc projektantom, którzy są tak samo zagubieni, jak ja, kiedy pomogłem opracować moją pierwszą aplikację na Androida.
Pasuje do wszystkich rozmiarów
Dzięki systemowi Android firmy mogą opracowywać telefony komórkowe i stoły o niemal dowolnej wielkości, z niemal dowolną rozdzielczością. Z tego powodu nie ma „odpowiedniego rozmiaru obrazu” dla ekranu powitalnego, ponieważ nie ma ustalonych rozdzielczości ekranu. Stanowi to problem dla osób, które chcą wdrożyć ekran powitalny.
Czy Twoi użytkownicy naprawdę chcą zobaczyć ekran powitalny?
(Na marginesie, ekrany powitalne są nieco zniechęcone wśród facetów zajmujących się użytecznością. Twierdzi się, że użytkownik już wie, którą aplikację nacisnął, a znakowanie obrazu za pomocą ekranu powitalnego nie jest konieczne, ponieważ zakłóca to tylko wrażenia użytkownika z „reklama”. Powinna być jednak używana w aplikacjach, które wymagają pewnego ładowania podczas inicjalizacji (5s +), w tym w grach itp., aby użytkownik nie utknął, zastanawiając się, czy aplikacja uległa awarii, czy nie.
Gęstość ekranu; 4 klasy
Biorąc pod uwagę tak wiele różnych rozdzielczości ekranu w telefonach na rynku, Google wdrożyło kilka alternatyw i sprytnych rozwiązań, które mogą pomóc. Pierwszą rzeczą, którą musisz wiedzieć, jest to, że Android dzieli WSZYSTKIE ekrany na 4 różne gęstości ekranu:
To, co musisz wiedzieć (jeśli jesteś projektantem), to fakt, że Android zasadniczo wybiera spośród 4 obrazów do wyświetlenia, w zależności od urządzenia. Musisz w zasadzie zaprojektować 4 różne obrazy (chociaż można opracować więcej dla różnych formatów, takich jak tryb panoramiczny, tryb portretowy / krajobrazowy itp.).
Mając to na uwadze, wiedz o tym: chyba że zaprojektujesz ekran dla każdej rozdzielczości używanej w Androidzie, obraz zostanie rozciągnięty do rozmiaru ekranu. I chyba, że twój obraz jest w zasadzie gradientem lub rozmyciem, otrzymasz niepożądane zniekształcenie podczas rozciągania. Masz więc zasadniczo dwie opcje: utwórz obraz dla każdej kombinacji rozmiaru / gęstości ekranu lub utwórz cztery obrazy z 9 łatkami.
Najtrudniejszym rozwiązaniem jest zaprojektowanie innego ekranu powitalnego dla każdej rozdzielczości. Możesz zacząć od wykonania rozdzielczości w tabeli na końcu tej strony (jest ich więcej. Przykład: 960 x 720 nie jest tam wymieniony). Zakładając, że masz na obrazie małe szczegóły, takie jak mały tekst, musisz zaprojektować więcej niż jeden ekran dla każdej rozdzielczości. Na przykład obraz 480 x 800 wyświetlany na średnim ekranie może wyglądać dobrze, ale na mniejszym ekranie (o wyższej gęstości / dpi) logo może stać się zbyt małe lub niektóre teksty mogą być nieczytelne.
Obraz 9 łatek
Drugim rozwiązaniem jest utworzenie obrazu z 9 łatami . Zasadniczo jest to 1-pikselowa przezroczysta ramka wokół obrazu, a rysując czarne piksele w górnym i lewym obszarze tej ramki, możesz określić, które części obrazu będą mogły się rozciągać. Nie będę wchodził w szczegóły działania 9-płatkowych obrazów, ale w skrócie piksele, które wyrównują się do oznaczeń w górnym i lewym obszarze, to piksele, które zostaną powtórzone w celu rozciągnięcia obrazu.
Kilka podstawowych zasad
Możesz więc umieścić 1 kropkę po obu stronach logo (w górnej ramce) i 1 kropkę powyżej i poniżej (na lewej ramce), a te oznaczone rzędy i kolumny będą jedynymi pikselami do rozciągnięcia.
Przykład
Oto obraz z 9 łatkami, 102x102px (końcowy rozmiar 100x100, do celów aplikacji):
Oto powiększenie o 200% tego samego obrazu:
Zwróć uwagę na znaczniki 1px u góry i po lewej, które mówią, które wiersze / kolumny będą się rozwijać.
Oto jak wyglądałby ten obraz w rozmiarze 100 x 100 w aplikacji:
A oto, co by chciał, gdyby został rozszerzony do 460 x 140:
Jeszcze jedna rzecz do rozważenia. Te obrazy mogą wyglądać dobrze na ekranie monitora i na większości telefonów komórkowych, ale jeśli urządzenie ma bardzo wysoką gęstość obrazu (dpi), obraz wyglądałby zbyt mały. Prawdopodobnie wciąż czytelny, ale na tablecie o rozdzielczości 1920x1200 obraz wyglądałby jak bardzo mały kwadrat na środku. Więc jakie jest rozwiązanie? Zaprojektuj 4 różne obrazy programu uruchamiającego z 9 łatkami, każdy dla innego zestawu gęstości. Aby mieć pewność, że nie wystąpi kurczenie, należy zaprojektować w najniższej wspólnej rozdzielczości dla każdej kategorii gęstości. Zmniejszanie jest tutaj niepożądane, ponieważ 9-łatka uwzględnia tylko rozciąganie, więc w procesie zmniejszania mały tekst i inne elementy mogą stracić czytelność.
Oto lista najmniejszych, najczęstszych rozdzielczości dla każdej kategorii gęstości:
Tak więc zaprojektuj cztery ekrany powitalne w powyższych rozdzielczościach, rozwiń obrazy, umieszczając przezroczyste obramowanie 1px wokół płótna i zaznacz, które rzędy / kolumny będą rozciągliwe. Należy pamiętać, że te obrazy będą używane dla DOWOLNEGO urządzenia w kategorii gęstości, więc obraz ldpi (240 x 320) może zostać rozciągnięty do 1024 x 600 na bardzo dużym tablecie o małej gęstości obrazu (~ 120 dpi). Dlatego 9-łata jest najlepszym rozwiązaniem do rozciągania, o ile nie chcesz zdjęcia lub skomplikowanej grafiki na ekranie powitalnym (pamiętaj o tych ograniczeniach podczas tworzenia projektu).
Ponownie, jedynym sposobem, aby to rozciąganie nie miało miejsca, jest zaprojektowanie jednego ekranu dla każdej rozdzielczości (lub jednego dla każdej kombinacji rozdzielczość-gęstość, jeśli chcesz uniknąć zbyt małych / dużych obrazów na urządzeniach o wysokiej / niskiej gęstości) lub obraz nie powinien się rozciągać, a kolor tła pojawia się wszędzie tam, gdzie nastąpi rozciąganie (pamiętaj również, że określony kolor renderowany przez silnik Android prawdopodobnie będzie wyglądał inaczej niż ten sam konkretny kolor renderowany przez Photoshop, ze względu na profile kolorów).
Mam nadzieję, że to miało jakiś sens. Powodzenia!
źródło
TRYB PORTRETOWY
MDPI wynosi 320 x 480 pikseli = 320 x 480 pikseli (1x)
LDPI wynosi 0,75 x MDPI = 240 x 360 pikseli
HDPI wynosi 1,5 x MDPI = 480 x 720 pikseli
XHDPI to 2 x MDPI = 640x960px
XXHDPI wynosi 3 x MDPI = 960 x 1440 pikseli
XXXHDPI wynosi 4 x MDPI = 1280x1920px
TRYB KRAJOBRAZU
MDPI to 480x320 dp = 480x320px (1x)
LDPI wynosi 0,75 x MDPI = 360 x 240 pikseli
HDPI wynosi 1,5 x MDPI = 720 x 480 pikseli
XHDPI wynosi 2 x MDPI = 960 x 640 pikseli
XXHDPI wynosi 3 x MDPI = 1440 x 960 pikseli
XXXHDPI to 4 x MDPI = 1920x1280px
EDYTOWAĆ:
Sugerowałbym użyć Lottie do ekranu powitalnego, jeśli czytasz to w 2019+
źródło
PORTRET
LDPI: 200 x 320 pikseli
MDPI: 320 x 480 pikseli
HDPI: 480 x 800 pikseli
XHDPI: 720px1280px
KRAJOBRAZ
LDPI: 320 x 200 pikseli
MDPI: 480 x 320 pikseli
HDPI: 800 x 480 pikseli
XHDPI: 1280 x 720 pikseli
źródło
Poszukałem najlepszej i najprostszej odpowiedzi, aby utworzyć obraz 9-łatkowy. Teraz utworzenie 9 łatek jest najłatwiejszym zadaniem.
Z https://romannurik.github.io/AndroidAssetStudio/index.html możesz zrobić obraz 9-łatkowy dla wszystkich rozdzielczości - XHDPI, HDPI, MDPI, LDPI za pomocą jednego kliknięcia.
źródło
Korzystanie z PNG nie jest tak dobrym pomysłem. W rzeczywistości jest to kosztowne, jeśli chodzi o wydajność. Możesz używać rysowalnych plików XML, na przykład tła Facebooka .
Pomoże Ci to wygładzić i przyspieszyć wydajność, a do logo użyj łatek .9.
źródło
źródło
Jakiś czas temu utworzyłem plik programu Excel z obsługiwanymi wymiarami
Mam nadzieję, że będzie to pomocne dla kogoś
Szczerze mówiąc, zgubiłem pomysł, ale odnosi się on do innej funkcji ekranu jako do rozmiaru (nie tylko gęstości)
https://developer.android.com/guide/practices/screens_support.html
Poinformuj mnie, jeśli wystąpią jakieś błędy
Link1: Dimensions.xlsx
Link2: Dimensions.xlsx
źródło
W moim przypadku użyłem listy rysowalnej w style.xml. Z rysowalną listą warstw potrzebujesz tylko jednego png dla wszystkich rozmiarów ekranu.
i flash_screen.xml w folderze z możliwością rysowania.
„background_noizi” to plik png w folderze, który można wyciągnąć. Mam nadzieję, że to pomoże.
źródło
** Jeśli szukasz szczegółów ekranu dla wszelkiego rodzaju głównych urządzeń **
przejdź do material.io
źródło
Edytowane rozwiązanie, które sprawi, że Twój SplashScreen będzie wyglądał świetnie na wszystkich interfejsach API, w tym API21 do API23
Jeśli celujesz tylko w interfejsy API 24+, możesz po prostu zmniejszyć wektor do rysowania bezpośrednio w jego pliku xml w następujący sposób:
w powyższym kodzie przeskalowuję rysunek, który narysowałem na płótnie o wymiarach 640 x 640, aby uzyskać rozmiar 240 x 240. potem po prostu włożyłem go do mojego ekranu powitalnego z możliwością rysowania i działa świetnie:
mój kod w rzeczywistości rysuje tylko trójkąt na zdjęciu na dole, ale tutaj widzisz, co możesz dzięki temu osiągnąć. Rozdzielczość jest w końcu świetna, w przeciwieństwie do pikselowanych krawędzi, które uzyskiwałem, używając bitmapy. więc używajcie wektora do rysowania za wszelką cenę (istnieje strona o nazwie vectr, którą kiedyś stworzyłem, bez konieczności pobierania specjalistycznego oprogramowania).
EDYCJA, aby działała również na API21-22-23
Chociaż powyższe rozwiązanie działa na urządzeniach z API24 +, naprawdę rozczarowałem się po zainstalowaniu mojej aplikacji na urządzeniu z API22. Zauważyłem, że ekran powitalny ponownie próbował wypełnić cały widok i wyglądał jak gówno. Po oderwaniu brwi przez pół dnia, w końcu brutalnie wymusiłem rozwiązanie dzięki sile woli.
musisz utworzyć drugi plik o nazwie dokładnie takiej jak ekran powitalny xml (powiedzmy splash_screen.xml) i umieścić go w 2 folderach o nazwach drawable-v22 i drawable-v21, które utworzysz w folderze res / (aby je zobaczyć musisz zmienić widok projektu z Androida na Project). Służy to temu, aby telefon przekierował do plików umieszczonych w tych folderach, ilekroć dane urządzenie uruchamia interfejs API odpowiadający sufiksowi -vXX w folderze, który można wyciągnąć, patrz ten link . umieść następujący kod na liście warstw pliku splash_screen.xml, który tworzysz w tych folderach:
Z jakiegoś powodu dla tych interfejsów API musisz zawinąć swoją mapę do rysowania w mapę bitową, aby działała i odrzut końcowy wynik wyglądał tak samo. Problem polega na tym, że musisz użyć podejścia z dodatkowymi folderami, które można wyciągać, ponieważ druga wersja pliku splash_screen.xml spowoduje, że ekran powitalny nie będzie w ogóle wyświetlany na urządzeniach z interfejsami API wyższymi niż 23. Może być również konieczne umieszczenie pierwsza wersja pliku splash_screen.xml do drawable-v24 jako domyślny system Android dla najbliższego folderu drawable-vXX, jaki może znaleźć dla zasobów. mam nadzieję że to pomoże
źródło
Na podstawie tej odpowiedzi od Lucasa Cerro obliczyłem wymiary przy użyciu współczynników w dokumentach Androida , używając linii bazowej w odpowiedzi. Mam nadzieję, że pomoże to komuś innemu wejść do tego postu!
źródło