[Go mobile!] Pozycjonowanie elementów z wykorzystaniem kotwic (anchors) i marginesów (margins)

Ubuntu Touch

W tym momencie naszej wspólnej przygody z Ubuntu SDK powinieneś mieć zainstalowane niezbędne biblioteki oraz narzędzia (Qt Creator), a także posiadać podstawową wiedzę na temat jednostek metrycznych aplikacji wykorzystujących Ubuntu SDK. Jeśli coś przeoczyłeś, przewiń stronę, aby w akapicie „Artykuły z serii Go mobile!” znaleźć odnośniki do odpowiednich wpisów na naszym blogu.

W tym artykule poruszę temat pozycjonowania elementów z wykorzystaniem kotwic, ang. anchors. Jest to kwestia niezwykle ważna, ponieważ nieestetyczne czy nieintuicyjne rozmieszczenie obiektów w Twojej aplikacji może bardzo szybko zniechęcić użytkownika.

Na potrzeby tego artykułu utwórz prosty projekt: File → New File or Project → Applications → Qt Quick 1 UI → Choose…. Nazwa oraz miejsce zapisu pozostawiam do wyboru Tobie – nie jest to istotne. W pliku *.qml z projektem usuń cały kod i wklej poniższy:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    id: root

    width: units.gu(40)
    height: units.gu(10)

    Button {
        id: button
        text: "Ubuntu-pomoc.org"

        width: units.gu(21)
    }
}

Wartości podświetlonych linii nie powinny Cię już dziwić. Wykonanie tego kodu (Ctrl + R) spowoduje wyświetlenie okna z przyciskiem znajdującym się w lewym górnym narożniku.

Kotwice

Kotwice (kotwy) pozwalają obiektowi na umieszczenie go w sąsiedztwie lub wewnątrz innego obiektu, przez przymocowanie jednego lub więcej punktów (brzegu) do odpowiedniego punktu (brzegu) drugiego obiektu. Położenie kotwic pozostanie niezmienne, nawet w przypadku zmiany rozmiarów obiektów – pozwala to na tworzenie dynamicznych interfejsów użytkownika.

Lewy górny narożnik jest domyślnym odniesieniem dla elementów znajdujących się wewnątrz jakiegoś kontenera – w naszym przykładzie elementem jest przycisk (Button), a kontenerem okno (MainView).

Położenie kotwic

W celu zmiany jego położenia możemy wykorzystać kotwice. Każdy z elementów interfejsu posiada 6 kotwic: lewą, prawą, górną, dolną, środek w pionie oraz środek w poziomie. Położenie kotwic oraz ich oryginalne nazwy ilustruje obrazek obok.

Pozycję kotwic określamy poprzez dodanie parametru anchors do elementu, którego położenie chcemy zmienić. Poniżej przykładowa implementacja dla elementu Button z naszego kodu:

    Button {
        id: button
        text: "Ubuntu-pomoc.org"

        width: units.gu(21)

        anchors {
            right: parent.right
            verticalCenter: parent.verticalCenter;
        }
    }

Wartość right: parent.right oznacza, że prawa kotwica elementu ma zostać przypięta do prawej kotwicy wskazanego obiektu – w tym przypadku parent (określa rodzica, czyli element o identyfikatorze root). To samo dotyczy kotwicy verticalCenter.

Zauważ, że w przypadku zmiany rozmiaru okna, położenie przycisku jest cały czas takie samo!

Kotwice można wykorzystać również do tego, aby „rozciągnąć” element w pionie lub poziomie:

    Button {
        id: button
        text: "Ubuntu-pomoc.org"

        anchors {
            left: parent.left
            right: parent.right
        }
    }

Obiekt Button zostanie przymocowany zarówno do lewej jak i prawej kotwicy obiektu MainView.

Marginesy

Samo stosowanie kotwic sprawi, że elementy będą do siebie przylegać – ilustrują to zamieszczone wyżej obrazy. Aby temu zapobiec możemy zdefiniować marginesy, które określą odstęp między parami kotwic.

    Button {
        id: button
        text: "Ubuntu-pomoc.org"

        anchors {
            left: parent.left
            right: parent.right
            leftMargin: units.gu(2)
            rightMargin: units.gu(3)
        }
    }

Efektem będzie odsunięcie lewej kotwicy obiektu Button od lewej kotwicy elementu MainView o wartość 2 gu, a prawej kotwicy obiektu Button od prawej kotwicy elementu MainView o wartość 3 gu.

Wartości marginesów można ustalić jedynie dla zdefiniowanych kotwic!

We wszystkich powyższych przykładach zademonstrowałem metody ułożenia jednego obiektu w drugim. Należy pamiętać, że kotwice i marginesy można wykorzystać również w przypadku rozmieszczania elementów obok siebie.

Artykuły z serii Go mobile!

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.
  • Radek

    Jestem na początku wkleiłem kod wciskam ctrl + r i nie wyskakuje okienko tylko poniżej, ze chyba jakiś błąd jest
    :-1: error: Unknown module(s) in QT: declarative

    • Radek

      Rozwiązałem problem na początku wybrałem Qt Quick 1 Application zamiast Qt Quick 1 UI.
      Ale po uruchomieniu aplikacji pojawia się okienko o szarym tle i żadnego nie ma napisu ubutnu-pomoc.org
      Link do print scr http://imageshack.us/photo/my-images/855/zrzutekranuz20130323230.png/

      • http://www.ubuntu-pomoc.org/ Łukasz Schmidtke

        Cieszę się, że wybrałeś przygodę z Ubuntu SDK. Na pewno zainstalowałeś biblioteki (pierwszy wpis z serii)? Zauważ, że w logu, po zamknięciu okna, zwracany jest komunikat – Button is not a type.

        • Radek

          Tak zainstalowałem, wkleiłem całą komendę do terminalu, która była w pierwszym wpisie odnośnie SDK

          • http://www.ubuntu-pomoc.org/ Łukasz Schmidtke

            Spróbuj zmienić obiekt Button na np. Label i odpal projekt.

            • Radek

              Zmieniłem i nic dalej to samo, nie wiem czemu tak jest, a szkoda bo chciałem już dalszą część robić

              • http://www.ubuntu-pomoc.org/ Łukasz Schmidtke

                A pokaż co zwraca konsola w Qt Editorze.

              • Radek
              • http://www.ubuntu-pomoc.org/ Łukasz Schmidtke

                Proponuję dokładnie przeinstalować biblioteki i środowisko. Innego pomysłu nie mam.

              • Radek

                Z racji tego że ubuntu mam od kilku tygodni jest jakaś konkretna komenda co odinstaluje mi całość ?

              • http://www.ubuntu-pomoc.org/ Łukasz Schmidtke

                Analogicznie do instalacji, tylko „install” zamień na „install –reinstall”

              • Radek

                Przeinstalowałem i to samo. Chyba jednak zakończę przygodę z Ubuntu SDK jestem ciekaw jak u innych to wygląda.

              • Radek

                a nie ma żadnego innego programu ? Jakiś odpowiednik?

              • pop129

                tak samo mam jak Ty Radek wszystko ladnie pieknie sie kompiluje a pojawia sie ten pasek tak jak u Ciebie tylko jak rozszerze okno to przycisk jest ale gdzies daleko ;D

              • Marcin

                mi też takie okno wywala tylko że ja mam inny błąd :(

            • Radek

              Zmieniłem i nadal to samo nawet jak odpalam przez konsolę, a szkoda bo chciałem już dalej robić z wpisu

  • Marcin

    mi jakiś dziwny błąd wywala „QOpenGLShader::link: „Vertex shader(s) linked, fragment shader(s) linked.” Jak miałem starą rozbitą wersje bez tego ubuntu SDK to mi wszystko dobrze chodziło ale musiałem zrobić reinstal systemu a tej starej wersji instalacji nie pamiętam :(

  • http://www.ubuntu-pomoc.org/ Łukasz Schmidtke
    • Radek
      • http://www.ubuntu-pomoc.org/ Łukasz Schmidtke

        Niezły bałagan. Winy upatrywałbym w samym środowisku – w obu przykładach kod napisany jest prawidłowo. Niestety nie jestem w stanie doradzić co dokładniej może być nie tak. Na waszym miejscu stworzyłbym projekt z samym oknem, a następnie stopniowo dodawał kolejny kod i zobaczył co powoduje błędy.

        • Marcin

          Mam tak samo jak na screenie powyżej

          • Radek

            Myślę, że poczekam jak to będzie wyglądało na Ubuntu 13.04
            Bo jeszcze nie bardzo orientuje się w tym SDK więc nie wiem jak bym miał prawidłowo dodawać kod by był prawidłowy