2. Android – podstawy

 w Android  Tagi android / podstawy przez (zaktualizowany 7 dni temu)

W tej części poznamy:

Interfejs

Interfejs(UI) to wszystko to, co użytkownik widzi i może wejść w interakcję. Niezmiernie skomplikowaną sprawą jest stworzenie uniwersalnego UI dla wszystkich istniejących urządzeń: telefony, tablety, TV, smartwatch, ekrany samochodowe, komputery i wiele innych. Poza różnorodnością rozdzielczości wielu urządzeń musimy się zmierzyć jeszcze w możliwością pracy tych urządzeń w 2 formach wyświetlania zawartości: pionowym i poziomym.

 

View

Widok (View), czyli podstawowy element naszej aplikacji, to nic innego jak kontener, który przechowuje widoczne dla nas elementy. Jest to podstawowa struktura, która mieści w sobie elementy potomne, jest klasą napisaną w Javie i dziedziczącą po klasie Object. Więcej na ten temat możesz przeczytać tutaj.

Musisz mieć świadomość, że to co widzisz na ekranie nie jest płaską konstrukcją jak namalowany obrazek, to są raczej budowle z klocków np. Lego. Poszczególne elementy widoku są poustawiane na sobie, obok siebie, mogą być rozdzielane określoną przestrzenią i tak z 1 widocznego elementu otrzymujemy wiele klocków, które go budują.

Elementy składające się na konkretny „kafelek” mają swoje nazwy i tak:

  • tekst wyświetlany to TextView
  • obrazek to ImageView
  • przycisk to Button
  • LinearLayout
  • RelativeLayout

Wyżej wymienione elementy możemy podejrzeć na swoim telefonie używając opcji programistycznych i wybierając „Pokazywanie granic układu”. Zobaczymy wtedy granice wszystkich elementów składających się na konkretny widok.

Nazwy elementów przedstawione powyżej są tak naprawdę nazwami klas języka Java, które funkcjonują dla Androida w klasie View, dziedziczą po klasie Object. Przykładowa lista ze strony dokumentacji, która jest jedynie kroplą w morzu dostępnych klas:https://developer.android.com/reference/android/view/View

Visualizer

Na początkowym etapie nauki będziemy korzystali z narzędzia Visualizer. To prosta aplikacja, która w locie pokazuje nam zmiany jakie wprowadzamy w kodzie.

Miejmy na uwadze, że nie będzie ona w stanie obsłużyć wszystkich opcji dostępnych dla języka XML, ma ona dostęp tylko do podstawowych poleceń.

Na dole ekranu są widoczne przyciski:

available images – który zawiera dostępne grafiki do testowania

cheat sheet – lista dostępnych widoków dla Android

XML

Jak wspomniałam w poprzednim wpisie, UI tworzy się przy pomocy XML, czyli rozszerzalnego języka znaczników. Jest on niezależny od platformy i służy do prostego reprezentowania danych. W języku tym dane mają format tekstowy i są możliwe do odczytu dla ludzi i maszyn. W tym języku sami definiujemy elementy, nie jesteśmy niczym ograniczeni, nie ma odgórnie określonych nazw tagów.

Na tym etapie będziesz potrzebował podstawowej wiedzy nt kodowania w XMLu (proponuję następujący kurs). Poniżej przypomnienie jedynie podstawowych zasad.

Prolog

Pierwszy wiersz naszego kodu powinien zawierać linijkę zwaną „prologiem”, która zawiera podstawowe informacje o wersji języka i kodowaniu znaków, mogą się w niej również znaleźć informacje opisujące dany dokument bardziej szczegółowo:

<?xml version="1.0" encoding="UTF-8"?>

Tagi

W języku XML kodujemy za pomocą tagów, czyli konkretnych poleceń zawartych w nawiasach ostrych <>. Każdy tag powinien mieć następującą budowę:

<to_jest_tag_otwierający>treść do wyświetlenia</to_jest_tag_zamykający>

lub jeżeli nie ma treści

<to_jest_tag_samozamykający atrybut="blablabla"/>

Wewnątrz tagów umieszczamy również atrybuty, tak samo jak w HTMLu.

Struktura drzewiasta

Poprawnie skonstruowany dokument XML posiada jeden główny element, zwany „root”, wewnątrz którego można zagnieżdżać kolejne elementy.

Poniżej widać strukturę drzewiastą HTML, w podobny sposób można przedstawić strukturę dokumentu XML

Drzewo dokumentu

<!– komentarz –>

nie będzie widoczny na stronie, widoczny tylko w kodzie źródłowym

<!-- Ten tekst
zostanie zignorowany
przez przeglądarkę -->

O czym należy pamiętać!

  1. Zawsze zamykamy tagi.
  2. Używamy wcięć.
  3. Dokument powinien posiadać 1 główny root.
  4. XML nie tworzy graficznego UI jedynie reprezentuje jego strukturę odwołując się do nazw klas Javy. Te klasy funkcjonują w przestrzeni nazw dedykowanej dla Androida.

Przykładowy plik XML

<?xml version="1.0" encoding="UTF-8"?>
<news>
    <article date=”2021-09-01”>
        <tytul>Rozpoczęcie roku szkolnego</tytul>
        <autor>Jan Kowalski</autor> 
    </article> 
    <article> 
        <!-- tutaj można wpisać dodatkową treść --> 
    </article>
    <opis status=”szkic”/>
</news>

Zadanie

Stwórz plik XML przechowujący katalog twoich ulubionych książek. Uzupełnij go o min. 5 pozycji. Elementy, które powinny się znaleźć to: „prolog”, tytuł, autor, ilość stron, rodzaj oprawy i krótka recenzja.