W tej lekcji
Warto przeczytać
- Projektowanie aplikacji na wiele ekranów (ang.)
- Dodawanie zasobów (ang.)
- Tworzenie ikon — poradnik (ang.)
Z perspektywy programowania dla systemu Android, ekrany można podzielić wg dwóch kategorii: rozmiaru oraz gęstości. Podczas pisania aplikacji należy wziąć pod uwagę, że będzie ona instalowana na urządzeniach, których ekrany będą różne względem obydwu wymienionych parametrów. Warto zatem uwzględnić kilka alternatywnych zasobów, dzięki którym aplikacja będzie dobrze wyglądać na ekranach o różnych rozmiarach i gęstościach. Wyróżnia się:
- cztery ogólne rozmiary: mały (small), normalny (normal), duży (large), bardzo duży (xlarge).
- cztery gęstości: niską (ldpi), średnią (mdpi), wysoką (hdpi), bardzo wysoką (xhdpi).
Układy i bitmapy zadeklarowane dla różnych ekranów należy umieścić w osobnych katalogach — podobnie jak robiliśmy to z zasobami łańcuchowymi dla różnych języków.
Miej także na uwadze, że orientacja (pozioma [landscape] i pionowa [portrait]) uznawana jest za rodzaj rozmiaru ekranu. W wielu przypadkach należy zatem dostosować układ aplikacji, aby korzystanie z programu było zawsze jak najwygodniejsze dla użytkownika.
Tworzenie różnych układów aplikacji
Aby umożliwić użytkownikom korzystanie z aplikacji w optymalny sposób na ekranach o różnych przekątnych, dla każdego docelowego rozmiaru powinieneś utworzyć plik XML z układem aplikacji. Następnie każdy z plików musisz umieścić w odpowiednim katalogu zasobów, którego nazwa będzie zawierać przyrostek -rozmiar_ekranu
. Przykładowo układ dla dużych ekranów należy zapisać w katalogu res/layout-large/.
Oto przykład projektu, w którym obok domyślnego układu zawarto wersję alternatywną dla dużych ekranów:
MyProject/ res/ layout/ main.xml layout-large/ main.xml
Nazwy plików układu muszą być takie same; zmienia się jedynie ich treść, tak, by korzystanie z aplikacji na ekranie danej wielkości było możliwie najwygodniejsze.
Odwołanie do pliku z układem tworzy się w tradycyjny sposób:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
System załaduje plik układu z odpowiedniego katalogu w zależności od rozmiaru ekranu urządzenia, na którym uruchamiana jest aplikacja. Więcej informacji na temat tego, jak system Android dokonuje selekcji odpowiednich zasobów znajdziesz w poradniku Dodawanie zasobów.
Oto inny przykład przedstawiający projekt zawierający dodatkowy układ w orientacji poziomej:
MyProject/ res/ layout/ main.xml layout-land/ main.xml
Domyślnie plik layout/main.xml zoptymalizowany jest pod kątem układu pionowego.
Jeśli chcesz, aby także na urządzeniach o dużych ekranach system korzystał z osobnego układu dla orientacji poziomej, musisz zastosować zarówno kwalifikator large
jak i land
:
MyProject/ res/ layout/ # ust. domyślne (orient. pionowa) main.xml layout-land/ # orientacja pozioma main.xml layout-large/ # duży ekran (orient. pionowa) main.xml layout-large-land/ # duży ekran, orient. pozioma main.xml
Tworzenie różnych bitmap
Zawsze powinieneś tworzyć zasoby, które będą odpowiednio skalowane pod kątem czterech ogólnie wytyczonych gęstości ekranów: niskiej, średniej, wysokiej i bardzo wysokiej. Dzięki temu na wszystkich ekranach twoja aplikacja będzie cechować się dobrym wyglądem i funkcjonalnością.
Na początek skorzystaj z surowego pliku w formacie wektorowym i wygeneruj obrazy dla każdej gęstości zgodnie z poniższą skalą:
- xhdpi: 2.0
- hdpi: 1.5
- mdpi: 1.0 (punkt odniesienia)
- ldpi: 0.75
Jeśli zatem dla urządzeń o bardzo wysokiej gęstości ekranu wygenerujesz obraz o wymiarach 200×200, to dla wysokiej rozdzielczości powinien mieć on wymiary 150×150, dla średniej 100×100, zaś dla niskiej 75×75 pikseli.
Utworzone obrazy umieść następnie w odpowiednim katalogu typu drawable:
MyProject/ res/ drawable-xhdpi/ awesomeimage.png drawable-hdpi/ awesomeimage.png drawable-mdpi/ awesomeimage.png drawable-ldpi/ awesomeimage.png
Za każdym razem, gdy będziesz odnosić się do obrazu awesomeimage znajdującego się w którymś z katalogów z plikami typu drawable, system wybierze bitmapę odpowiednią dla danej gęstości ekranu.