Week 10

ListView, row layout, custom adapter

Oznamy

Mr. Iľko - The State of the Art

  • Program na zisťovanie počasia na základe zadania.
  • Pomocou explicitných zámerov vieme prechádzať medzi aktivitami a pomocou implicitných zámerov vieme spúšťať doplnkovú funkcionalitu.
  • Údaje z externej služby sme sťahovali pomocou inštancie triedy HttpURLConnection.
  • S výsledkom, ktorý sme dostali vo forme JSON objektu sme spracovali pomocou tried JSONObject a JSONArray.

5 Day Forecast

  • (slide) Aj keď naša appka začína byť použiteľná, nemôžeme zaspať na vavrínoch. Server openweathermap.org ponúka aj možnosť 5 dňovej predpovede počasia pre danú oblasť/mesto. Pokúsime sa ju teda integrovať aj do našej aplikácie.

  • Opäť sa bude jednať o formát JSON, aj keď aktuálne budú výsledky uložené v zozname.

ListView

  • (slide) Zoznam vytvoríme pomocou elementu ListView

  • (slide) údaje sú so zoznamom prepojené pomocou adaptéru. An adapter manages the data model and adapts it to the individual entries in the widget.

  • Začneme teda tým, že si vytvoríme novú aktivitu s názvom ListActivity a umiestnime do nej element <ListView>.

  • Keďže zatiaľ nemáme vyriešený prechod z jednej aktivity do druhej, môžeme na tento účel využiť Activity Manager.

Creating Fake Data

Adapter Initialization

  • V Android-e existuje niekoľko typov adaptérov, ktoré sú podtriedou triedy Adapter. Dnes si vystačíme s triedou ArrayAdapter, kde prvky budú práve v poli.

  • (slide) Konštruktor triedy ArrayAdapter si vyžaduje tieto parametre:
    • kontext aplikácie
    • návrh/rozloženie jednej položky
    • zoznam prvkov
  • Samotná implementácia bude vyzerať nasledovne:

  • Ako rozloženie položky použijeme preddefinované rozloženie s názvom android.R.layout.simple_list_item_1. Tento typ je reprezentovaný jedným reťazcom. Ukážka takéhoto rozloženia sa nachádza na tomto slajde.

Prepojenie ListView-u s adaptérom

Overenie

Custom Layout of List Item

  • Aktuálne rozloženie položky zoznamu nie je veľmi sexy. Pokúsime sa teda vytvoriť rozloženie, ktoré nebude reprezentované len jedným elementom typu TextView, ale obohatíme ho ako o obrázok, tak aj rozdelíme jednotlivé jeho položky, ktoré zobrazíme osobitne. Výsledné rozloženie bude vyzerať tak, ako je zobrazené na tomto slajde.

  • Spôsob definície rozloženia položky zoznamu sa nebude nijako líšiť od rozloženia samotnej aktivity. Opäť vytvoríme nový súbor s rozložením (layout), ktorý si pripravíme podľa obrazu nášho ;)

  • Vytvoríme teda nový súbor row.xml, ktorý bude reprezentovať rozloženíe jednej položky zoznamu a bude obsahovať tieto elementy:
    • ImageView weather_icon - ikona reprezentujúca počasie
    • TextView day - deň
    • TextView weather_description - opis počasia
    • TextView max_temp - maximálna teplota dňa
    • TextView min_temp - minimálna teplota dňa
  • Samotný kód rozloženia bude nasledovný:

  • (slide) Ak ho budeme chcieť použiť s našim ArrayAdapter-om, tak musíme okrem nového rozloženia špecifikovať ešte aj to, ktorý TextView bude používať na zobrazenie samotných textových info. Ak tak neurobíme (ako sme neurobili ani posledne), automaticky bude použitý TextView s názvom list_item_forecast_textview, ktorý v našom rozložení nie je.

  • Aktualizácia fragmentu kódu adaptéra v triede aktivity ListActivity bude teda vyzerať nasledovne:

  • Po spustení aplikácie bude výsledná aktivita vyzerať nasledovne:

    Obr. 2: ListView s vlastným rozložením riadku
    Obr. 2: ListView s vlastným rozložením riadku
  • Týmto však zabezpečíme len to, že využijeme len jednu časť celého rozloženia položky zoznamu. Ako však zabezpečíme aj zobrazenie ikony počasia? Ako oddelíme jednotlivé položky počasia a zobrazíme ich osobitne a každú naštýlujeme ináč? Aby sme toto správanie docielili, budeme si musieť vytvoriť vlastný adaptér.

Custom adapter

ForecastAdapter extends ArrayAdapter

getView() method

Naplnenie položky zoznamu údajmi o predpovedi

Conclusion

  • Aplikácia začína byť použiteľná. Má však stále jeden obrovský hendikep a síce - údaje potrebujeme stiahnuť zakaždým, keď sa aplikácia spustí. Nabudúce sa pozrieme na to, ako zabezpečiť trvalé uchovávanie dát pomocou SQL databázy a ošetríme tiež kliknutie na položku zoznamu.

Conclusion

Additional Resources