MójDroid.pl

#7 Twórz aplikacje na Androida z Mojdroid.pl - Elementy interfejsu

2012-09-18
|
Damian P.

Co jakiś czas w naszym programie pojawiają się elementy, których nie zdążyłem omówić. Oczywiście mam tu na myśli przyciski, tekst oraz różne obrazki i layouty. Aby nie zostać w tyle i orientować się z tymi wszystkimi elementami, opiszę to wszystko w tym momencie.

1. RelativeLayout

Pierwszym elementem w layoucie XML z którym się spotkaliśmy był RelativeLayout. Jest to nic innego jak szablon, w którym poszczególne elementy (dzieci, children) mogą być opisane w relacjach względem siebie lub rodzica. Przykładowo, w łatwy sposób możemy ułożyć obok siebie dwa przyciski - pierwszy wystarczy umieścić na środku, a drugi na lewo od niego, ustawiając relację toRightOf (naPrawoOd). Layout ten został wprowadzony tak naprawdę po to, aby zlikwidować potrzebę tworzenia wielu LinearLayoutów w sobie. Czasami używając jednego RelativeLayoutu możemy uzyskać efekt identyczny lub lepszy jak przy użyciu samych LinearLayouów. Domyślnie każdy element jest tworzony w prawym lewym rogu, jeżeli nie posiada atrybutów pozycji (góra, dół, lewo, prawo, na lewo od i tak dalej).

2. LinearLayout

Podobnie jak RelativeLayout jest to ViewGroup, który w sobie gromadzi inne elementy. Różnica względem powyższego jest taka, że Linear każde dziecko (child) układa obok siebie, poziomo lub pionowo (tą opcją sterujemy przez atrybut android:orientation). W zależności od położenia, pojedynczy element będzie zajmował całą swoją szerokość lub wysokość, nawet jeżeli zajmuje mniejszy obszar, a w okół niego widzimy wolną przestrzeń. Bardzo użyteczną cechą LinearLayoutu jest możliwość podzielenia jego obszaru na równe części. Takie atrybuty zostały nazwane kolejno layout_weight, gdzie używany jest w elementach wewnątrz szablonu, oraz layout_weightsum, który jest wyznacznikiem podziału dla samego LinearLayoutu. Jako wartość przyjmuje oczywiście liczbę,  która wyznacza ilość równych sekcji. Przykład:
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/logonFormButtons"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="3">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TV1"
            android:layout_weight="2" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TV2"
            android:layout_weight="1" />
    </LinearLayout>
Powyższy szablon będzie podzielony na 3 części, z czego jeden tekstView będzie miał szerokość dwóch jednostek a drugi jednej. Ważne jest tutaj ustawienie szerokości na wartość zero, inaczej sztuczka nie zadziała!

3. ListView i GridView

Listy poznaliśmy już wcześniej, tutaj więcej o nich

4. Button

Najzwyklejszy w świecie przycisk. Zazwyczaj zawiera opis tego, co się stanie, gdy użytkownik wejdzie w interakcję z nim. Rozróżniamy trzy typy przycisków: tekstowy, z obrazem oraz z tekstem i obrazek. Niczym one się oczywiście nie różnią, poza sposobem opisu. W poprzedniej części poradnika poznaliście sposoby jak należy reagować na kliknięcie tego elementu. PS. Ciekawostka, przy tworzeniu przycisku w XMLu możemy zdefiniować funkcję, która będzie obsługiwała jego kliknięcie. Przykład:
<Button
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="@string/self_destruct"
     android:onClick="selfDestruct" />
I w Javie:
 public void selfDestruct(View view) {
     // Akcje
 }

5. EditText

Czyli pole do wpisywania tekstu. Podobnie jak z przyciskami, tak i tutaj rozróżniamy kilka mniejszych typów: pole dla hasła, dla maila, dla wpisywania numeru telefonów, z wieloma liniami... Tak naprawdę to pojedyncze atrybuty, ale warto pamiętać o tym, że to jeden typ. Oprócz tego pole to pozwala na zarządzanie tekstem, czyli jego wycinanie, wklejanie i tak dalej. Ciekawszych opcji ma wiele, ale o tym napiszę jeszcze nie teraz.

6. Checkbox

Są to pola, które pozwalają wybrać użytkownikowi kilka opcji na raz. Podobnie jak przyciski, możemy ustawić w XMLu atrybut onClicki obsłużyć jego zaznaczenie w jakiejś funkcji. Oczywiście posiada też specjalne Listenery, dzięki którym możemy reagować na zmiany stanu tego elementu.

7. Radio Button

Są to pola wyboru, podobnie jak Checkbox, ale służą to zaznaczenia jednego elementu z wielu możliwości. Zazwyczaj występują w grupie, nie pojedynczo, dlatego definiujemy je w elemencie RadioGroup.
<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <RadioButton android:id="@+id/radio_pirates"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/pirates"
        android:onClick="onRadioButtonClicked"/>
    <RadioButton android:id="@+id/radio_ninjas"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ninjas"
        android:onClick="onRadioButtonClicked"/>
</RadioGroup>

8. Toggle Button/Switch

Włącznik. Swoją obecnością zazwyczaj informuje, że można pewną część aplikacji odblokować lub zablokować. Przykładowo, taki element widzimy przy uruchamianiu WiFi czy Bluetooth. Swoją rolę wykonuje świetnie, bo jest łatwo rozpoznawalny, w przeciwieństwie do na przykład Buttonów. Tak wygląda ogólnodostępny ToggleButton: Natomiast Switch jest dostępny wyłącznie od Androida w wersji 4.0.

9. Spinner

Rozwijane menu z opcjami do wyboru, gdzie po wybraniu jednego elementu z wielu zaznaczony widzimy na samej górze. Przydatne do zmieniania prostych opcji, jak sortowanie listy.
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="planets_array">
        <item>Mercury</item>
        <item>Venus</item>
        <item>Earth</item>
        <item>Mars</item>
        <item>Jupiter</item>
        <item>Saturn</item>
        <item>Uranus</item>
        <item>Neptune</item>
    </string-array>
    <string-array name="planets_array_val">
        <item>1</item>
        <item>2</item>
        <item>3</item>
        <item>4</item>
        <item>5</item>
        <item>6</item>
        <item>7</item>
        <item>8</item>
    </string-array>
</resources>
Ciekawie wygląda uzupełnianie takiej listy. Z poziomu XML jest to nieco kłopotliwe, ale wykonalne. W takim przypadku wystarczy zdefiniować dwie tablice z menu i zapisać je go /values/arrays.xml, po czym do Spinnera należy dodać atrybuty android:entries oraz android:entryValues. Są to oczywiście wcześniej utworzone tablice, gdzie pierwsza jest widocznymi elementami, a druga wartościami do odczytania w kodzie. Oczywiście możemy również zawartość takiego menu opisać w javie.

10. Pickers

Kojarzycie wyskakujące dialogi z opcjami do wyboru? To właśnie są Pickery. Stosujemy je zazwyczaj w miejscach, gdzie wyświetlenie poszczególnych ustawień zajmuje dużo miejsca, a my nie chcemy deformować wyglądu. Standardowe Pickery służą do wyboru czasu, ale możemy również stworzyć własne (o tym również nie teraz). Występują one tylko jako osobne okienko, nigdy w samym layoucie. Same również dostosowują się do strefy użytkownika, więc w Polsce na przykład nie zauważymy opcji do wyboru AM/PM.

11. ActionBar

Element wprowadzony w Androidzie 3.0 Honeycomb, ale obecny również we wcześniejszych - zazwyczaj po własnych samoróbkach (po prezentacji 4.0 również  po użyciu support library). Jest to nic innego jak pasek, na którym znajdują się najważniejsze opcje do kontroli aplikacji. W zależności od aplikacji (i jej zachowania) zmienia się on, pokazując to co potrzebne w aktualnym momencie. Osobiście nie lubię oryginalnego rozwiązania, zdecydowanie preferuję rozszerzenie ActionBarSherlock do kontroli tego elementu. Dlaczego? Dla kompatybilności, obsługując ABS mamy pewność, że na każdym urządzeniu będzie on identyczny, co w samym support library może być kłopotliwe (a przynajmniej czasochłonne). Uzupełniać ten element możemy na kilka sposobów, ja zazwyczaj definiuję całość w Javie, właśnie przy użyciu ABS. Wewnątrz ActionBara możemy umieszczać każdy element, gdyż obsługuje on niestandardowe layouty. Zazwyczaj jednak jest to lista lub/i kilka przycisków.

12. Dialog

Wszystkie wyskakujące okienka to Dialogi. Wcześniej wspomniany Picker jest jednym z nich. Android 4.o wprowadził usprawnioną obsługę tego elementu, gdzie możemy już dowolnie formatować zawartość okna. Standardowo w dialogu widzimy listy wyboru, akcje do potwierdzenia\odrzucenia, wybór czasu i operacje do zakończenia. Jest to bardzo ciekawa część systemu i temu elementowi poświęcę osobny artykuł. Jest to dość ogólny opis, musiałem go stworzyć na potrzeby kolejnych części. W kolejnych częściach będę dokładniej omawiał każdy z elementów, tak aby poznać wszystkie możliwości Androida.