Gradientti piirrettävissä Androidissa – Luo Gradientti taustat

Olemme nähneet Gradientin värejä monilla verkkosivustoilla taustoina, joita käytetään App-logoissa, kuten alla olevassa Instagram-logossa, App-taustassa, painikkeissa, edistymispalkissa jne. Gradientti tekee minkä tahansa sovelluksen käyttöliittymästä, oli se sitten mobiilisovellus tai verkkosivusto, kauniimman ja eloisamman. Monet kehittäjät käyttävät gradienttia sovelluksissaan ja verkkosivustoissaan, jotta ne näyttäisivät houkuttelevammilta. Tässä opetusohjelmassa opettelemme siis asettamaan gradienttitaustan Android-sovelluksemme toimintaan.

Mikä on gradientti?

Wikipedian mukaan:

Tietokonegrafiikassa värigradientti määrittää sijainnista riippuvaisten värien alueen, jota käytetään yleensä alueen täyttämiseen. Esimerkiksi monet ikkunanhallintaohjelmat sallivat näytön taustan määrittämisen gradienttina. Värigradientin tuottamat värit vaihtelevat jatkuvasti sijainnin mukaan, mikä tuottaa tasaisia värisiirtymiä.

Värigradientti tunnetaan myös nimellä väriramppi tai väriprogressio. Määritettäessä värejä joukolle arvoja, gradientti on jatkuva värikartta, eräänlainen värisuunnitelma.

Lisätään siis yksinkertainen gradientti Android-sovellukseemme.

Vaihe 1: Luo uusi projekti

1. Avaa Android Studio Napsauta ”Aloita uusi Android Studio -projekti” (Opi, miten Android Studio asetetaan ja luodaan ensimmäinen Android-projekti)

2. Valitse ”Empty Activity” (Tyhjä aktiviteetti) projektimalli-ikkunasta ja napsauta Next (Seuraava) painiketta

3. Syötä sovelluksen nimi, Package name (paketin nimi), save location (tallennuspaikka), language (Java/Kotlin, käytämme Javaa tässä tutoriaalissa) ja minimum SDK (käytämme API 19:ää: Android 4.4 (KitKat))

4. Seuraavaksi klikkaa Finish-painiketta, kun olet täyttänyt edellä mainitut tiedot

5. Nyt odota, että projekti lopettaa rakentamisen.

Vaihe 2: Gradienttivärin luominen

Luodaksemme gradienttivärin meidän on luotava .xml-tiedosto drawable-kansioon. Mene siis app -> res -> drawable ja klikkaa hiiren oikealla painikkeella drawable -> New -> Drawable Resource File ja luo gradient_drawable.xml-tiedosto.

Koodi gradient_drawable.xml-tiedosto näkyy alla:

Kuten yllä olevasta koodista näkyy, käytämme gradient-tunnistetta sekä annamme android:startColor-, android:centerColor– ja android:endColor-attribuutteja määritelläksemme gradientissa käytettävän värin. Tutustutaan siis gradientin piirtokohteessa käytettävissä oleviin attribuutteihin.

XML-attribuutit Gradientin piirtokohteelle

Seuraavassa on <gradient>-piirtokohteen attribuutit:

Attribuutit	Kuvaus
android:startColor	Gradientin aloitusväri. Värin arvo voi olla missä tahansa muodossa ”#rgb”, ”#argb”, ”#rrggbb”, ”#aarrggbb”
android:endColor	Gradientin loppuväri Värin arvo voi olla jokin seuraavista: ”#rgb”, ”#argb”, ”#rrggbb”, ”#aarrggbb” forms
android:centerColor	Gradientin keskiväri. Se voi olla valinnainen, mutta voit käyttää sitä halutessasi Värin arvo voi olla jokin seuraavista: ”#rgb”, ”#argb”, ”#rrggbb”, ”#aarrgggbb” forms
android:centerX	X kaltevuuden keskipisteen sijainti muodon sisällä murto-osana leveydestä 0.5 on oletusarvo
android:centerY	Y-sijainti kaltevuuden keskipisteen sijainti muodon sisällä korkeuden murto-osana 0.5 on oletusarvo
android:angle	Gradientin kulma ja sitä käytetään vain lineaarisen gradientin kanssa Sen on oltava 45:n kerrannainen alueella
android:type	Sitä käytetään gradientin tyypin asettamiseen ja oletusarvo on lineaarinen . ja sitä on 3 tyyppiä lineaarinen radiaalinen sweep
android:gradientRadius	Sitä käytetään gradientin säteen asettamiseen. Sitä käytetään vain säteittäisen gradientin kanssa.

Vaihe 3: Muokkaa activity_main.xml-tiedostoa

Avaa nyt activity_main.xml-tiedosto ja poista oletuskoodi ja vaihda asetteluksi RelativeLayout ja aseta sen taustaksi gradientin tausta alla olevan kuvan mukaisesti:

android:background = "@drawable/gradient_background"

Tämän avulla meidän activity_main.xml on valmis ja koko koodi näyttää seuraavalta:

Ja edellä esitetyn tulostus näkyy alla:

Voitamme myös lisätä gradientin Android-sovelluksemme eri näkymiin ja asetteluihin. Käsitellään muutamia muita Android-sovelluksen komponentteja, joissa voimme käyttää gradienttitaustoja.

Gradienttitausta painikkeella:

Tässä käytämme gradienttitaustaa painikkeessa:

Yllä olevan koodin tulos on:

Gradienttitausta TextView:lla:

Tässä käytämme gradienttitaustaa TextView:lle:

Yllä olevan koodin tuloste on:

Gradienttitausta ImageView:lla:

Tässä käytämme Gradient-taustaa ImageView:lle:

Ylläolevan koodin tulos on:

Gradient-tausta SeekBarilla:

Tässä käytämme gradienttitaustaa SeekBar:

Ylläolevan koodin tuloste on:

Johtopäätös: