Piksele niezależne od gęstości (dp) i skalowalne piksele (sp) są niezbędne do tworzenia układów i prezentowania czcionek, które reagują jednolicie na szeroki zakres gęstości ekranu, klas rozmiarów, formatów i proporcji obrazu, które składają się na urządzenia z Androidem.
Wnioski
- Jeśli używasz siatki podstawowej, trzymaj się wymiarów 4 i 8.
- Zamiast pikseli używaj w specyfikacjach pikseli dp i sp.
- Eksportuj grafikę bitmapową (rastrową) do wszystkich zasobników.
- Projektuj z myślą o elastyczności, uwzględniając różne klasy rozmiarów, rozdzielczości i proporcje obrazu.
- Piksele niezależne od gęstości (dp): piksele niezależne od gęstości to elastyczne jednostki, które skalują się tak, aby mieć jednolite wymiary na każdym ekranie. Są one oparte na fizycznej gęstości ekranu. Te jednostki są względne w stosunku do ekranu o rozdzielczości 160 dpi (punktów na cal), na którym 1 dp jest w przybliżeniu równy 1 px.
- Skalowalne piksele (sp): skalowalne piksele pełnią tę samą funkcję co piksele dp, ale w przypadku czcionek. Wartość domyślna piksela sp jest taka sama jak wartość domyślna piksela dp. System Android oblicza rzeczywisty rozmiar czcionki, który ma być używany, na podstawie urządzenia i preferencji użytkownika ustawionych w ustawieniach urządzenia.
Podstawowa różnica między tymi jednostkami miary polega na tym, że skalowalne piksele zachowują ustawienia czcionki użytkownika. Użytkownicy, którzy mają większe ustawienia tekstu ze względu na ułatwienia dostępu, widzą rozmiary czcionek zgodne z ich preferencjami dotyczącymi rozmiaru tekstu. Dowiedz się, jak zmienić rozmiar czcionki w Compose.
Android używa tych jednostek do skalowania i tłumaczenia na różnych urządzeniach i rozdzielczościach.
Zasobniki gęstości
Ekrany o wysokiej gęstości mają więcej pikseli na cal niż ekrany o niskiej gęstości. W rezultacie elementy interfejsu o tych samych wymiarach w pikselach są większe na ekranach o niskiej gęstości, a mniejsze na ekranach o wysokiej gęstości. Dlatego nie należy deklarować wymiarów w pikselach.
Android grupuje zakresy gęstości ekranu w „zasobniki” i używa ich do dostarczania optymalnego zestawu zasobów na urządzenie. Najczęściej używane zasobniki gęstości
to mdpi, hdpi, xhdpi, xxhdpi i xxxhdpi (nodpi i
anydpi odnoszą się do zasobnika, który nie skaluje się w zależności od rozdzielczości urządzenia, zwykle
używanego w przypadku rysunków wektorowych). Każdy z nich odpowiada plikowi zasobów aplikacji.
Aby obliczyć dp:
dp = (szerokość w pikselach * 160) / gęstość ekranu
Siatka podstawowa
Tworzenie z użyciem siatki podstawowej pomaga zachować spójne odstępy i wyrównanie w interfejsie. Interfejs Androida używa siatki 8 dp do układu, komponentów i odstępów.
Mniejsze elementy, takie jak ikony, tekst i niektóre elementy w komponentach, najlepiej wyrównać do siatki 4 dp.
Siatki układu
Siatki są podstawą każdego układu. Weź pod uwagę hierarchię, ilość i nawet komunikat treści.
Siatka hierarchiczna
Siatka hierarchiczna jest tworzona z uwzględnieniem hierarchii lub ważności treści. Pomyśl o układzie gazety: spójny artykuł na pierwszej stronie zajmuje większość układu, a mniejsza kolumna wyświetla poprzednie artykuły.
Podczas dostosowywania do różnych rozmiarów ekranu układ hierarchiczny może zmieniać rozmiar, przepływ i wyświetlać komórki siatki.
Siatka modułowa
Siatka modułowa jest ustawiana w spójnych kolumnach i wierszach, tworząc prostokątny system siatki do wyrównywania treści. Siatki modułowe dobrze sprawdzają się w przypadku treści o podobnym znaczeniu i rozmiarze, np. galerii kart.
Elastyczna siatka modułowa może dodawać więcej komórek siatki, a treści w niej mogą być przyciągane lub zawijane do różnych komórek siatki. Komórki siatki mogą zachowywać spójność w różnych rozmiarach lub zmieniać rozmiar w zależności od potrzeb treści.
Siatka kolumn
Kolumny tworzą strukturę siatki, która zapewnia pionową definicję układu, dzieląc treść w obszarze treści. Treść jest umieszczana w obszarach ekranu, które zawierają kolumny. Wyrównaj do siatki podstawowej, aby wyrównać treść, ale zachowaj elastyczny rozmiar.
Więcej informacji o podstawach konfigurowania siatki kolumn i stosowania treści znajdziesz w artykule Podstawy układu. Siatka kolumn może dostosowywać się do różnych formatów, zmieniając rozmiary kolumn i liczbę kolumn w zależności od rozmiaru ekranu w określonych punktach, a jednocześnie umożliwiając skalowanie treści.
Klasy rozmiarów
Klasy rozmiarów okien to zestaw opinii na temat punktów przerwania widocznego obszaru, które pomagają projektować, tworzyć i testować elastyczne i adaptacyjne układy aplikacji. Android dzieli klasy rozmiarów okien na 3: kompaktowe, średnie i rozszerzone. Więcej informacji o klasach rozmiarów okien.
Format obrazu
Format obrazu to proporcja szerokości elementu do jego wysokości. Formaty obrazu są zapisywane jako szerokość:wysokość.
Aby zachować spójność układu, używaj spójnego formatu obrazu w przypadku elementów takich jak obrazy, powierzchnie i rozmiar ekranu.
W interfejsie zalecamy używanie tych formatów obrazu:
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3