[Go mobile!] Niezależność rozdzielczości

Zanim stworzysz pierwszą aplikację z wykorzystaniem Ubuntu SDK, musisz przyswoić pewne elementy teoretyczne – w tym wpisie przybliżę temat niezależności rozdzielczości.

gomobile

O co w tym chodzi?

Ubuntu można już zainstalować na kilku grupach urządzeń m.in: telefonach, tabletach, laptopach czy komputerach stacjonarnych. Każda z tych grup charakteryzuje się inną rozdzielczością. Interfejs użytkownika tworzonych przez Ciebie aplikacji powinien być niezależny od urządzenia, na którym zostaną uruchomione. Przyjęte podejście łączy w sobie prostotę dla projektantów i programistów z „jednością” wizualną, jakością i użytecznością.

Jednostki pomiarowe

W celu zapewnienia niezależności rozdzielczości wprowadzono nową jednostkę pomiarową – grid unit, w skrócie gu. Wartość „1 gu” zależna jest od typu ekranu, na którym wyświetlany jest interfejs użytkownika i przeliczana jest na piksele. Liczba pikseli została dobrana tak, by zachować skalę wyświetlanych elementów, czyli uwzględniając odległość użytkownika od ekranu (z innej odległości obserwujemy wyświetlacz w telefonie niż w tablecie) oraz gęstość upakowania pikseli (czyli rozdzielczość). Wartość gu przyjmuje zawsze całkowitą liczbę pikseli. Przykładowe przeliczenia:

Urządzenie Przelicznik
Większość laptopów 1 gu = 8 px
Laptopy z ekranami Retina 1 gu = 16 px
Telefony z ekranem o przekątnej 4 cale w rozdzielczości HD (około 720×1280 pikseli) 1 gu = 18 px
Tablety z ekranem o przekątnej 10 cale w rozdzielczości HD (około 720×1280 pikseli) 1 gu = 10 px

Grid unit definiuje wizualny rytm Ubuntu (Twoje oczy nie kierują się w jedno miejsce i zostają w nim) i powinny być stosowane do wszystkich pomiarów: rozmiarów elementów, marginesów, odstępów.

Przykład

import Ubuntu.Components 0.1

Item {
    width: units.gu(2)
    height: units.gu(5)
}

W sytuacjach, gdy potrzebujesz wartości mniejszej od 1 gu np. 3 pikseli, skorzystaj z jednostki dp (density independent pixel). 1 dp zazwyczaj przelicza się na 1 piksel w przypadku laptopów i telefonów oraz tabletów o niskiej rozdzielczości ekranu.

Przykład

import Ubuntu.Components 0.1

Rectangle {
    height: units.dp(1)
}

Bitmapy

Grafika wektorowa, czcionki oraz programowo rysowane elementy są zazwyczaj skalowane prawidłowo. Z drugiej strony, bitmapy wymagają zwykle więcej uwagi. Najlepszym rozwiązaniem jest stworzenie bitmapy w jak największej rozdzielczości. Dzięki temu system uniknie konieczności zwiększania wymiarów bitmapy – ograniczy się jedynie do zmniejszania.

Przykład. Jeśli docelowy rozmiar bitmapy to 10 gu * 10 gu, a urządzeniem docelowym jest smartfon (ekran 4″ HD – 1 gu = 18px) oraz tablet (ekran 10″, HD – 1 gu = 10px), wystarczy przygotować bitmapę o wymiarach 180 x 180 pikseli, aby być spokojnym o jej jakość na obu urządzeniach.

Czcionki

Z punktu widzenia spójności interfejsu jest bardzo ważne, aby przy ustalaniu rozmiarów czcionek nie stosować wielkości takich jak piksele czy punkty, a zdecydować się na rozmiary oferowane przez środowisko:

  • x-large,
  • large,
  • medium,
  • small,
  • x-small,

Przykład

import Ubuntu.Components 0.1

Label {
    fontSize: "small"
}

Rozmiar czcionki zostanie przeliczony według poniższej tabeli.

Rozmiar czcionki Komputer stacjonarny Smartfon z ekranem 4″ HD Tablet z ekranem 10″ HD
x-large 34 px 76 px 42 px
large 20 px 45 px 25 px
medium 14 px 31 px 18 px
small 12 px 27 px 15 px
x-small 10 px 22 px 12 px
Jeżeli powyższy artykuł nie rozwiązał lub rozwiązał częściowo Twój problem, dodaj swój komentarz opisujący, w którym miejscu napotkałeś trudności.
Mile widziane komentarze z uwagami lub informacjami o rozwiązaniu problemu.
  • Dius

    Witam.
    Mam taki dziwny/mały problem z hibernacją. Powiedzmy hibernuję ubuntu. Przychodzę za kilka godzin , włączam i jest ok, ale… jak wyłącze listwę i wrócę do domu to bootuje od początku poprzez gruba. Jakieś sugestie?
    Mam ubuntu 12.04 LTS , płytę asus’a dwa rdzenie 4bg ramu grafika na pokładzie 4gb wymiany .
    ps. piszę u was bo wydajecie osobami kompetentnymi, nie to co na innych forach typu ubuntu.pl gdzie się czeka na odp. 4 lata i w koncu mod przybiega i cie wyzywa :D mało ważne.
    Dzięki z góry :)

    • Ostry

      Jeśli zaśmiecasz wątki, tak jak tutaj to nic dziwnego, że wyzywają.

      • DIus

        OFFTOPIC FTW ! typowy troll.

    • http://www.facebook.com/qnebra Łukasz Grzesik

      Między innymi z tego powodu domyślnie hibernacja jest ukryta. Wychodzi na to, że twój komputer jest usypiany, a nie hibernowany.

    • M

      Na tym polega hibernacja – wszystkie informacje i procesy zapisywane są na dysku twardym zamiast pamięci ram, więc komputer może je przechować bez jakiegokolwiek zasilania (jak to jest w przypadku uśpienia). Jest to część linuxa, więc jądro musi się „podnieść” zanim dojdzie do wczytania tych danych.

      Pozdrawiam specjalistów nade mną.

  • Pingback: Ubuntu - pomoc | [Go mobile!] Pozycjonowanie elementów z wykorzystaniem kotwic (anchors) i marginesów (margins)()