Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

Spersonalizowany pionowy i poziomy interfejs w aplikacji na Androida

Zmorą wielu projektantów interfejsów jest z pewnością notoryczny brak miejsca. Ekrany telefonów nie są przecież tak wielkie jak te od komputerów stacjonarnych, laptopów czy też tabletów. Do tego dochodzi również drugi kłopot, bowiem co mianowicie zrobić w przypadku obrócenia przez użytkownika telefonu i zmianie orientacji wyświetlania?Zostawienie mnóstwo niewykorzystanego miejsca, nie prezentuje się zbyt fajnie, a nienaturalne rozciągnięte elementy ciasno ułożone w pionowym widoku mogą zepsuć całą estetykę aplikacji. Pewnym rozwiązaniem tego problemu może więc być osobny spersonalizowany widok dla orientacji poziomej i pionowej. Przyjrzyjmy się więc jak osiągnąć taki efekt w systemie Android.

Fot: JD Hancock, CC BY 2.0.

Fot: JD Hancock, CC BY 2.0.

Dodawanie spersonalizowanego poziomego layoutu w Android Studio

Aby dodać poziomy layout w Android studio należy otworzyć plik z domyślnym layoutem, który chcemy mieć osobno spersonalizowany dla poziomego widoku, a następnie w prawym górym roku kliknąć ikonę telefonu i z rozwiniętego menu wybrać opcję „Create Landscape Variation„:

android-studio-create-lanspace-view

Jak widać utworzyły nam się teraz dwa te same pliki activity_main.xml z tym, że jeden ma dodaną informację iż jest to widok poziomy (ang. land).

android-studio-landspace-view-explorer

Jak to wygląda w strukturze projektu?

Przechodząc do katalogu res (nazwaAplikacji/app/src/main/res) możemy teraz ujrzeć dwa foldery layout oraz layout-land:

lanspace-view-folder

Jak widać oba przechowują pliki o tych samych nazwach z tym, że katalog layout jest odpowiedzialny za wersję layoutu dla orientacji pionowej, a layout-land dla orientacji poziomej:

landspace-view-fileTeraz kiedy uruchomimy aplikację i obrócimy ekran poziomo, ujrzymy inny układ interfejsu niż ten który był wyświetlany kiedy telefon znajdował się w pionowej pozycji.

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

, , , , , , , ,

Dodaj komentarz

Komentarze (1)

  • Frank pisze:

    Ostatnio interesowalem sie programowaniem na androida i chcialem stworzyc interfejs , poczatkowo swoje informacje pobieralem z kursu z eduweb.pl , szukalem sposobu jak stworzyc interfejs i wpadlem na ta strone ktora pomogla mi rozwiazac problem dzieki .

Odpowiedz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Pin It on Pinterest