Projektowanie mobilnego interfejsu GUI w Android Studio
Zacznijmy budowanie aplikacji Secret Messages przy użyciu Android Studio. Po otwarciu Android Studio program może poprosić o zainstalowanie aktualizacji, co zazwyczaj jest zalecane. Wprawdzie aktualizacje pociągają za sobą pewne ryzyko, ponieważ mogą nieco zmienić wygląd i działanie programu, np. przemieścić ikony lub elementy menu, lecz zawierają również ważne
poprawki bezpieczeństwa oraz najnowsze funkcje systemu Android.
W środowisku Android Studio mogą być otwarte inne projekty, nad którymi ostatnio pracowaliśmy, w naszym przypadku aplikacja Hi-Lo. Zamykamy projekt, wybierając opcje File -> Close Project. Aby zacząć budowanie nowej aplikacji Secret Messages, wybieramy opcje File -> New Project z Android Studio lub na ekranie powitalnym klikamy opcję Start a new Android Studio project (Uruchom nowy projekt Android Studio).
Nowemu projektowi nadajemy nazwę SecretMessages, zapisujemy go w preferowanej lokalizacji i klikamy przycisk Next.
Na ekranie Target Android Devices wybieramy API 16: Android 4.1 (Jelly Bean) w opcji minimalnego SDK dla urządzeń Phone and Tablet, jak w przypadku aplikacji Hi-Lo, a następnie klikamy przycisk Next. Na ekranie Add an Activity (Dodaj aktywność) wybieramy aktywność Basic Activity i klikamy przycisk Next. Na ekranie Customize the Activity (Dostosuj aktywność)
zachowujemy wszystkie domyślne nazwy i klikamy przycisk Finish.
Proces otwierania i konfigurowania nowego projektu może chwilę zająć. Po jego zakończeniu dwukrotnie klikamy plik content_main.xml w app -> res -> layout w panelu Project Explorer po lewej stronie. Być może trzeba będzie zamknąć wyskakujące okno z informacją o przycisku FAB (Floating Action Button), do którego jeszcze powrócimy.
Powinniśmy uzyskać ekran podobny do przedstawionego na rysunku 8.2 (jeśli podgląd GUI nie jest widoczny, należy kliknąć kartę Design).
Rysunek 8.2. Początkowy widok aplikacji w Android Studio
Projektowanie mobilnego interfejsu GUI
Po skonfigurowaniu nowego projektu zacznijmy projektowanie układu aplikacji. Najpierw usuwamy tekst „Hello World!” przedstawiony w widoku projektu, klikając go, a następnie naciskając klawisz delete. Później, jak w przypadku poprzedniej aplikacji, dodajemy układ RelativeLayout służący do przechowywania elementów GUI. W tym celu w sekcji Layouts panelu Palette
wybieramy RelativeLayout i przeciągamy go na obszar panelu Preview lub elementu ConstraintLayout w panelu Component Tree.
Następnie umieszczamy tytuł w górnej części aplikacji, wybierając widżet TextView z sekcji Widgets (lub Text) w oknie Palette. Umieszczamy widżet TextView na środku górnej części ekranu i zmieniamy treść tytułu na np. My Secret Messages App, a następnie we właściwości textAppearance w panelu Properties wybieramy Material.Large, jak pokazano na rysunku 8.3.
Rysunek 8.3. Umieszczanie dużego tytułu tekstowego na środku aplikacji i dostosowanie jego treści
W panelu Properties rozwijamy textAppearance, aby znaleźć właściwość stylu tekstu textStyle i klikamy przycisk wyboru bold, aby jeszcze bardziej wyróżnić tekst tytułu.
A teraz dodajmy pole tekstowe EditText, w którym użytkownik będzie wpisywał wiadomość wejściową. W panelu Palette, w sekcji Text wybieramy Multiline Text. Powiększamy widok podglądu i umieszczamy pole tekstowe około 30 dp pod tytułem. Zmieniamy tekst na Secret messages are so cool, aren’t they (Sekretne wiadomości są super, nieprawdaż)?, jak pokazano na
rysunku 8.4. Sekwencja ucieczki spowoduje dodanie znaków nowego wiersza, które nie pojawiają się na ekranie, ale reprezentują nowy wiersz, jaki otrzymujemy po kliknięciu klawisza enter. Umieszczenie tekstu w wielu wierszach sygnalizuje użytkownikowi, że on także może wpisywać dłuższe wiadomości.
Rysunek 8.4. Dodajemy pole Multiline Text do wpisywania wiadomości wejściowej, używając sekwencji ucieczki , aby rozmieścić tekst w kilku wierszach
Możemy również ograniczyć liczbę wyświetlanych jednocześnie wierszy tekstu. W tym celu właściwości lines pola Multiline Text w panelu Properties możemy przypisać np. wartość 4. Aby zobaczyć wielowierszową wiadomość na wszystkich urządzeniach, zaznaczamy pole wyboru textMultiLine na liście rozwijanej właściwości inputType.
Na koniec przypisujemy wartość txtIn właściwości id wejściowego pola tekstowego, aby ułatwić odwoływanie się do niego w kodzie oraz jednocześnie zachować spójność nazw z komputerową wersją aplikacji z interfejsem GUI. Teraz przeciągamy lewą i prawą granicę pola tekstowego, aby rozszerzyć je na całą szerokość aplikacji, jak pokazano na rysunku 8.5.
Rysunek 8.5. Zmieniamy właściwość id wejściowego pola tekstowego na txtIn, aby móc użyć go w kodzie
W środkowej części aplikacji Secret Messages umieścimy cztery komponenty: SeekBar umożliwiający użytkownikowi przesuwanie suwaka w celu znalezienia klucza, etykietę, pole tekstowe do wyświetlania sekretnego klucza oraz przycisk Encode/Decode. Pasek SeekBar będzie pełnił podobną funkcję jak komponent JSlider w komputerowej wersji aplikacji. Nie należy zbytnio przejmować się rozmieszczeniem nowo dodawanych komponentów, ich położenie można poprawić później.
Zaczynamy od znalezienia widżetu SeekBar (paska postępu z suwakiem) w sekcji Widgets w panelu Palette. Umieszczamy go w bezpiecznej odległości (około 30 dp) pod wielowierszowym polem tekstowym, blisko lewego brzegu, jak pokazano na rysunku 8.6. Możemy własnoręcznie ustawić górny margines w panelu Properties, klikając opcję View all properties (Wyświetl wszystkie właściwości) (strzałki w lewo i prawo w górnej części panelu Properties). W sekcji Layout_Margin, we właściwości górnego marginesu layout_margin- Top, wpisujemy 30dp.
Rysunek 8.6. SeekBar będzie pełnił funkcję podobną do suwaka w komputerowej wersji aplikacji z interfejsem GUI, umożliwiając użytkownikowi przechodzenie po różnych wartościach klucza
Następnie obok widżetu SeekBar umieszczamy widżet TextView, który będzie pełnił funkcję etykiety pola tekstowego do wpisywania wartości sekretnego klucza. W oknie Properties właściwości textAppearance przypisujemy wartość Material.Medium, natomiast wartości text wartość Key:.
Następnie dodajemy pole tekstowe Number do wpisywania sekretnego klucza i środkujemy je w poziomie, przypisując właściwości text wartość 13 lub inną domyślną wartość klucza. Modyfikujemy szerokość pola tekstowego, aby bez problemu pomieścić liczbę, przypisując właściwości width (w View all properties) wartość wynoszącą około 40dp, a następnie właściwości id przypisujemy wartość txtKey.
Po umieszczeniu pola tekstowego txtKey powinniśmy mieć możliwość przeciągnięcia etykiety Key: w taki sposób, aby znajdowała się ona tuż obok niego. Powinna również być możliwość rozciągnięcia paska SeekBar tak, aby wypełnić lukę, jak pokazano na rysunku 8.7. Prace nad środkową częścią układu kończymy, dodając przycisk Encode/
Decode. Wybieramy Button z sekcji Widgets w panelu Palette i umieszczamy przycisk przy prawym marginesie obok pola tekstowego. Zmieniamy wartość właściwości text na Encode/Decode.
Na zakończenie tworzymy pole tekstowe dla wiadomości wyjściowej, kopiując pole tekstowe txtIn i wklejając je pod środkowym rzędem widżetów. Usuwamy tekst z pola tekstowego, rozciągamy je do szerokości okna aplikacji i zmieniamy jego nazwę, przypisując właściwości id wartość txtOut.
Rysunek 8.7. Po umieszczeniu pola tekstowego txtKey dostosowujemy położenie etykiety Key: i rozciągamy SeekBar
I to już koniec – gotowy układ GUI przedstawiono na rysunku 8.8.
Rysunek 8.8. Gotowy układ aplikacji mobilnej Secret Messages
Przed kontynuowaniem pracy warto się upewnić, że wejściowe pole tekstowe ma identyfikator txtIn, wyjściowe pole tekstowe – txtOut, a środkowe pole tekstowe sekretnego klucza – txtKey. Wszystkie te komponenty muszą mieć dokładnie takie nazwy, aby kod przygotowywany w kolejnej części rozdziału działał prawidłowo.
Materiał opracowany na podstawie: Java, to takie proste Praktyczne wprowadzenie do programowania, Bryson Payne, wyd. WN PWN, 2018 r.
