Budowanie układu GUI w widoku projektu

Aplikacje na Androida oddzielają układ GUI od kodu aplikacji (aktywności), w związku z tym ta aplikacja będzie nieco różnić się od aplikacji komputerowej utworzonej w rozdziale 3. Układ nie jest opisany w języku Java, lecz w języku XML (eXtensible Markup Language). Na szczęście, pomimo tej różnicy, nadal możemy projektować widok GUI, przeciągając komponenty z palety przypominającej edytor WindowBuilder w programie Eclipse. Główna różnica polega na tym, że komponenty w Android Studio noszą nazwy powiązane ze środowiskiem aplikacji mobilnych.

Podobnie jak edytor WindowBuilder, Android Studio ma dwie karty: jedną dla widoku projektu i drugą dla kodu źródłowego. Klikamy kartę Design (Projekt) w lewym dolnym rogu głównego okna zawierającego plik content_main.xml. Zobaczymy widok projektu przedstawiony na rysunku 4.8.

Rysunek 4.8. Android Studio oferuje widok projektu przypominający edytor WindowBuilder w środowisku Eclipse

Rysunek 4.8 przedstawia cztery obszary widoku projektu, z których będziemy najczęściej korzystać: panel Project Explorer 1., panel Palette 2., panel Preview (Podgląd) 3. oraz panel Properties (Właściwości) 4.. W centralnej części panelu Preview widzimy etykietę, w terminologii Android nazywaną TextView, z tekstem Hello World!. Klikamy tę etykietę i naciskamy klawisz delete (lub klikamy ją prawym przyciskiem myszy i wybieramy z menu opcję Delete (Usuń)), aby usunąć etykietę z panelu Preview. Następnie
klikamy opcję Layouts w panelu Palette, wybieramy komponent RelativeLayout i przeciągamy go albo na obszar panelu Preview, albo nad element ConstraintLayout w panelu Component Tree (Drzewo komponentów), znajdującym się tuż pod panelem Palette (patrz rys. 4.8). Budowanie GUI naszej aplikacji rozpoczynamy od pustego układu RelativeLayout.

W panelu Palette w sekcji Widget (lub Text) znajdujemy komponent TextView. Ten komponent w systemie Android przypomina komponent JLabel w zestawie narzędzi Swing; a widżetami (ang. widgets) nazywamy większość komponentów GUI w systemie Android. Do rozmieszczania komponentów GUI w podglądzie projektu będziemy używać techniki przeciągania i upuszczania.

Klikamy widżet TextView i przeciągamy go na białe tło aplikacji w symulowanym telefonie na Android, umieszczając etykietę blisko górnego brzegu, aby mogła ona pełnić funkcję tytułu aplikacji.

Po upuszczeniu etykiety TextView w panelu Properties (w zależności od wersji Android Studio opcja ta może również nosić nazwę Attributes) po prawej stronie pojawią się różne opcje. Jeśli panel ten nie jest wyświetlony, należy kliknąć zakładkę Properties w prawym górnym rogu karty Design, aby rozwinąć panel Properties. Znajdujemy właściwość text dodanego przed chwilą widżetu TextView. Zmieniamy tekst na „Dr. Payne’s Guessing Game”, a właściwości wyglądu tekstu textAppearance przypisujemy wartość Large (Duży). Następnie przeciągamy widżet TextView tak, aby wyśrodkować go w górnej części ekranu, jak pokazano na rysunku 4.9. Szare przerywane linie pomagają w rozmieszczaniu komponentów.

Aby dodać etykietę zachęcającą użytkownika do wpisania liczby od 1 do 100, umieszczamy kolejny widżet TextView w podglądzie projektu, nieco poniżej tytułu. Po prawej stronie panelu Properties zmieniamy wartość właściwości textAppearance na Medium. Następnie, w polu właściwości text dla tego widżetu TextView, wpisujemy Enter a number between 1 and 100 (Wpisz liczbę od
1 do 100):.

Teraz dodamy pole tekstowe, w systemie Android nazywane EditText, w którym użytkownik będzie wpisywał próby odgadnięcia liczby. Pola tekstowe znajdują się tuż pod sekcją Widgets w panelu Palette. W systemie Android istnieje wiele rodzajów pól tekstowych i każde z nich działa inaczej, a ich wybór zależy od potrzeb aplikacji. Na przykład Plain Text (Zwykły tekst) to proste
pole tekstowe, Password (Hasło) ukrywa wpisywane znaki, Phone prezentuje klawiaturę numeryczną i formatuje dane wejściowe do postaci numeru telefonu, natomiast E-mail przedstawia zmodyfikowaną klawiaturę z symbolem @.

Rysunek 4.9. Rozmieszczanie widżetów/komponentów GUI w Android Studio wygląda bardzo podobnie jak w programie Eclipse

Wybieramy pole tekstowe Number (Liczba), aby użytkownik mógł wpisać wybraną liczbę przy użyciu klawiatury liczbowej na swoim ekranie. Umieszczamy to pole tuż pod poprzednią etykietą. Następnie umieszczamy widżet przycisku Button w równej odległości pod polem tekstowym i zmieniamy wartość jego właściwości text na "Guess (Zgadnij)!". Na zakończenie umieszczamy kolejny widżet TextView pod przyciskiem, zmieniając wartość jego właściwości text na "Enter a number, then click Guess (Wpisz liczbę, a następnie kliknij przycisk Guess!".

Jeśli mamy problemy z umieszczeniem widżetu w odpowiedniej odległości pod przyciskiem, ponieważ znajdujemy się zbyt blisko pionowego środka ekranu, możemy dostosować jego położenie za pomocą właściwości Layout_Margin (Marginesy układu) w panelu Properties. Aby ją zobaczyć, czasami trzeba kliknąć przycisk View all properties (Wyświetl wszystkie właściwości), a potem szarą strzałkę obok właściwości Layout_Margin, aby rozwinąć właściwości marginesów. Następnie należy znaleźć właściwość layout_margin top (górny margines układu) i zmienić jej wartość na 30dp. Gotowy układ GUI powinien wyglądać podobnie jak na rysunku 4.10.

Rysunek 4.10. Gotowy układ GUI naszej aplikacji Android w widoku projektu

Zanim zajmiemy się zmienianiem nazw komponentów GUI, wprowadzimy jeszcze jedną zmianę. Przypiszemy wartość 75dp właściwości width (Szerokość) pola tekstowego Number, w którym użytkownik będzie wpisywać typowaną liczbę. W tym celu w panelu Properties klikamy przycisk View all properties (ikonę ze strzałkami w prawo i w lewo). Domyślnie pole tekstowe było zbyt szerokie jak na potrzeby gry, która oczekuje jedynie liczb z przedziału od 1 do 100. Dlatego zmniejszyliśmy jego szerokość. Po dokonaniu tej małej zmiany czas zacząć nazywanie komponentów GUI, aby ułatwić identyfikowanie ich w kodzie Java.

 Materiał opracowany na podstawie: Java, to takie proste Praktyczne wprowadzenie do programowania, Bryson Payne, wyd. WN PWN, 2018 r.