3. diel - Neobjavujte koleso, použite grádl

V minulej lekcii, LinearLayout a jednoduchá kalkulačka pre Android v Kotlin , sme sa naučili používať LinearLayout. Programovali ste v inom jazyku či si hovoríte, že nemá zmysel stále dokola vynájsť koleso? Tak to ste tu dnes správne. Ukážeme si totiž, ako sa vyhnúť programovanie rovnakých vecí stále dokola.

Grádl

Kotlín / Java má oficiálnu podporu balíčkovacieho nástroje grádl. Možno si spomeniete, že v minulých lekciách sme museli počkať, než sa nám projekt "zosynchronizo­vali". To bol práve balíčkovací nástroj grádl, ktorý sťahoval knižnice potrebné k zapnutiu Android aplikácie.

Je dôležité povedať, že grádl nie je iba balíčkovací nástroj, ale dajú sa v ňom volať aj automatizované akcie, napr. Generovanie kódu, spúšťanie unit testov pri každom buildu pod.

Najskôr si ukážeme, ako knižnice do svojho projektu vôbec dostať. Ďalej si v dnešnom tutoriálu predstavíme aj niekoľko knižníc, ktoré by ste do začiatku mali poznať.

Inštalácia

Poďme si teda založiť nový projekt, Android štúdio nám pri jeho založení všetko pripraví. Na účely článku projekt nazvu SampleGradleProject.

Teraz je vhodná chvíľa si položiť otázku, ako to, že nám grádl funguje, keď sme nestiahli žiadny balíčkovací nástroj? Otvorme si zložku projektu v "prieskumníkovi súborov".

Na odpoveď našej otázky nám postačí zložka gradle/, kde je uložený .jar súbor, reprezentujúci "celý" grádl. Keďže samotný grádl je veľmi malý, nemusí nám vadiť, že sa nám vytvára v každom projekte znova. Asi nemusím vysvetľovať, že je príjemnejšie a rýchlejšie mať takto balíčkovací systém bez nutnosti sťahovania a mnohokrát "komplikovaného" inštalovanie.

Pridávanie knižníc

Poďme späť do Android Studia a otvoríme súbor build.gradle nášho modulu. Knižnice, ktoré chceme v našej aplikácii využívať, budeme primárne písať do bloku `Dependencies:

Občas budeme musieť upraviť build.gradle v roote projektu (to je druhý grádl súbor). Tu budeme definovať repozitára, z ktorých sa potrebné knižnice majú sťahovať.

Poďme teda pridať knižnicu a následne ju použiť v ukážkovom projekte. My použijeme knižnicu MPAndroidChart, ktorá slúži na vytváranie grafov. Vytvoríme si triviálne aplikáciu, ktorá nám vykreslí koláčový graf. V grafe zobrazíme počet programátorov v určitom vekovom rozmedzí. Naše dáta budú vyzerať nasledovne:

• Pod 24 rokov - 16,854 programátorov
• 25 - 34 rokov - 31,770 programátorov
• Nad 35 rokov - 15,950 programátorov

Pre náš príklad používam štatistiku od Stack Overflow.

Začnime tým, že upravíme blok repositories v roote projekte, kam pridáme repozitár maven. Príslušný blok kódu bude teraz vyzerať takto:

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

Tým grádl hovoríme, že knižnica, ktorú budeme sťahovať, je uložená na tejto adrese. Ďalej pridáme samotnú knižnicu do bloku dependencies (to je druhý súbor build.gradle v module). Náš blok dependecies bude teda vyzerať nejako takto:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0-alpha'
}

Po tom, čo sme vykonali obe akcie, je potreba projekt "synchronizovať". To vykonáme tlačidlom "Sync Now" v pravom hornom rohu:

Máme všetko čo potrebujeme, poďme teda konečne začať písať kód. Najskôr si upravme našu aktivitu. Pretože zatiaľ vieme používať iba LinearLayout, prepíšeme ConstraintLayout nejako takto:

<?xml version="1.0" encoding="utf-8"?>
<android.widget.LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                             xmlns:tools="http://schemas.android.com/tools"
                             tools:context=".MainActivity"
                             android:layout_width="match_parent"
                             android:layout_height="match_parent"
                             android:orientation="horizontal"
                             android:gravity="center">

    <!-- Zde za okamžik vložíme náš graf -->

</android.widget.LinearLayout>

Ďalej potrebujeme pridať koláčový graf. To docielime pridaním nasledujúceho kódu na miesto komentáre v predchádzajúcej ukážke:

<com.github.mikephil.charting.charts.PieChart
            android:id="@+id/chart"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

Ďalej potrebujeme graf vyplniť dátami. Poďme teda do MainActivity.kt a pomocou metódy findViewById() graf vyberieme. Graf bude typu PieChart. Metóda onCreate() teda bude vyzerať nejako takto:

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val chart = findViewById<PieChart>(R.id.chart)

Tiež si musíme pripraviť dáta, ktoré budeme chcieť zobraziť:

val entries = listOf(
    PieEntry(16854f, "Pod 24 let"),
    PieEntry(31770f, "25 - 34 let"),
    PieEntry(15950f, "Nad 35 let")
)

Ďalej budeme musieť vytvoriť titulok, nastaviť farby, veľkosť písma a vo finále odovzdať tieto informácie grafu. To urobíme nasledujúcim kódom:

val dataSet = PieDataSet(entries, "Věkové rozmezí programátorů za rok 2018")

dataSet.colors = ColorTemplate.MATERIAL_COLORS.toList() //Barvy pozadí
dataSet.valueTextSize = 18f //Velikost písma

chart.data = PieData(dataSet)
chart.description.text = "" //Popisek chceme prázdný, není jaký použít

Celá naša metóda onCreate() vyzerá teda nejako takto:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val chart = findViewById<PieChart>(R.id.chart)


    val entries = listOf(
        PieEntry(16854f, "Pod 24 let"),
        PieEntry(31770f, "25 - 34 let"),
        PieEntry(15950f, "Nad 35 let")
    )

    val dataSet = PieDataSet(entries, "Věkové rozmezí programátorů za rok 2018")

    dataSet.colors = ColorTemplate.MATERIAL_COLORS.toList()
    dataSet.valueTextSize = 18f

    chart.data = PieData(dataSet)
    chart.description.text = ""
}

Poďme skúsiť či funguje všetko ako sme chceli:

Pokiaľ pri kompilácii projektu narazíte na chybu: More than one file was found with OS independent path 'META-INF/proguard/androidx-annotations.pro', pridajte do bloku android v grádl kód nižšie. Ide o známy problém so súčasnou verziou. viac informácií

// Temporary fix
packagingOptions {
    exclude 'META-INF/proguard/androidx-annotations.pro'
}

Vidíme, že všetko funguje ako má.

V jednej z ďalších lekcií grádl využijeme, až si budeme ukazovať, ako získať dáta z internetu (vo formáte JSON) a ako tento formát spracovať. Oboje vie aj sám Kotlin, ale pomocou knižníc nám to pôjde oveľa ľahšie. Dá sa povedať, že sa stali takým nepísaným štandardom.

V budúcej lekcii, Aplikácie zápisník v Kotlin - RelativeLayout a RecyclerView , sa pozrieme na navigáciu a začneme tým pracovať na zápisníku príjmu a výdavkov

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.