Strašne komponente arhitekture koje koriste Kotlin - ikone aplikacija koje su prilagodljive

Prozor za konfiguracijsku ikonu u Android studiju

Svi ste već čuli za Kotlin, Dagger 2, komponente Android arhitekture, Retrofit 2, ikone Adaptive i mnoge druge fantastične značajke i napredak koji se događaju u Androidu. Nedavno je Google pokrenuo i pregled za Android P Developer. Čitao sam dosta dugo o tim vrućim temama i pokušao ih koristiti i u svojim aplikacijama. Dakle, ovdje je moj prvi pokušaj da naučim nešto novo i podijelim svoje znanje sa zajednicom.
Napisat ću seriju u kojoj se prvenstveno fokusiram i demonstriram prednosti ovih gore spomenutih tehnoloških skupova razvijajući jednostavnu Androidovu aplikaciju na bazi Kotlina, u kojoj možemo pretraživati ​​GitHub korisnike pomoću GitHub-ovog pretraživačkog API-ja.

Osjećati se uzbuđeno? Samo skoči dalje. Bit će to zabavna vožnja.

Sadržaj

  1. Ikone aplikacija koje su prilagodljive
  2. Ubrizgavanje ovisnosti pomoću bodeža 2
  3. Napravite sobu
  4. Nastavit će dodavati više bodova u budućim blogovima ove serije

Ikone aplikacija koje su prilagodljive

Prošlogodišnji Google I / O'17, Google je predstavio adaptivne ikone pokretača u Android Oreo (API razini 26) operativnog sustava. Novi, elegantan i elegantan način dizajniranja logotipa bilo koje aplikacije. Pomoću ovog novog formata, ikona pokretača naše aplikacije može se prikazivati ​​u različitim oblicima na različitim OEM proizvođačima, što znači da se na jednom uređaju može prilagoditi ikona na ikoni u obliku kružnog oblika, a na drugom uređaju u obliku iverice.

Dakle, oblik ikone pokretača naše aplikacije može varirati od:

Prilagodljiva ikona u obliku krugaPrilagodljiva ikona kvadratnog oblikaPrilagodljiva ikona okruglastog oblikaPrilagodljiva ikona u obliku kvadrata

ovisno o zadanoj maski koju pruža OEM podržani na pametnom telefonu, a koji sustav koristi za prikazivanje svih prilagodljivih ikona u istom obliku dostupnih na vašem uređaju.

Osnove

Najvažnije komponente adaptivne ikone su prednji i pozadinski slojevi. Da bismo stvorili prilagodljivu ikonu, moramo odvojiti ikonu pokretača u dva gore spomenuta dijela (prednji i pozadinski sloj).

Dimenzije ikona bacača bile su veličine 48 x 48 dp u verziji za Android 7.1 i starijim verzijama. No, prema službenoj dokumentaciji o Googleovoj ikoni Adaptive, aplikacije trebaju slijediti određeni skup smjernica za stvaranje oba sloja adaptivne ikone, tj .:

  • I prednji i pozadinski sloj trebaju biti veličine 108 x 108 dp (pri čemu pozadinski sloj mora biti neproziran, a prednji sloj može imati prozirnost).
Veličina ikone pokretača (Izvor)
  • Ikona lansera trebala bi biti unutar maskirajućeg, tj. 72 x 72 dp.
OEM maskirna animacija (Izvor)
  • Sa svake strane postoji dodatni prostor od 18 dp, koji zadržava OEM-ove za izvođenje različitih vrsta vizualnih efekata poput paralakse, pulsiranja ili mnogih drugih učinaka.
Vizualni efekti (izvor)

Oh! Imam još jednu stvar koju moram reći, slojevi prednjeg i pozadinskog sloja mogu biti u .svg ili .png formatu. Dijelit ću vezu u odjeljku s referencama na ovom blogu, odakle sam naučio kako stvoriti prednji sloj ikone pokretača.

Pristup

Postoje dva pristupa za stvaranje ikone Adaptive, tj.

  1. Upotreba značajke Image Asset u samom Android studiju (jednostavna i jednostavna).
  2. Sami stvarate XML datoteku tipa.

Pogledat ćemo prvi pristup na ovom blogu. No, prije nego što započnemo, potrebno je voditi računa o stvaranju prilagodljive ikone.

Vaša aplikacija trebala bi imati targetdkversion od 26 i više.

Prvi pristup

To je lakši pristup samo slijedeći korake:

  1. Desnom tipkom miša kliknite res Res folder i odaberite Novo> Opcija slike. Izgledat će ovako:

2. Sada nakon koraka 1, vidjet ćemo prozor za konfiguraciju slike slike kao što je ovaj:

Dostupno je nekoliko opcija kao što svi možemo vidjeti u ovom prozoru za konfiguraciju. U daljnjim ćemo koracima pogledati opcije potrebne za stvaranje ikone Adaptive.

3. U ovom koraku postoje određene opcije koje ćemo ostaviti takve kakve jesu, a to su:

  • Ostavit ćemo opciju Vrsta ikone jer je odabrana prema zadanim ikonama Pokretača (Adaptive and Legacy).
  • Naziv ikone pokretača napisan je kao ic_launcher, ime možete promijeniti prema Vašim potrebama.
  • U ovom su prozoru za konfiguraciju dostupne dvije preklopne tipke koje su Prikaži sigurnu zonu (za prebacivanje vidljivosti sigurne zone u prozoru za pregled ikona pokretača) i Prikaži rešetku (za prebacivanje vidljivosti oblika ključnih linija što pomaže u podešavanju proporcije ikone) ,
  • U prozoru za konfiguraciju dostupne su tri kartice pod nazivom Prednji sloj, Pozadinski sloj i Legacy. Potražit ćemo ih u sljedećim koracima.

4. Nakon što slijedi Korak 3, krenut ćemo naprijed kako bismo dodali datoteku background.svg ili background.png. Napravio sam svoju background.png datoteku dimenzije 432 x 432 px pomoću GIMP v2.8, izgleda ovako:

background.png (432 x 432 px)

Samo davanje kraćeg odjeljka Pozadinski sloj: Ima polja poput:

  • Naziv: postavite naziv pozadinskog sloja prema vašem zahtjevu.
  • Vrsta imovine: Odaberite vrstu slike dok koristimo .svg ili .png datoteku za pozadinski sloj.
  • Put: odaberite odgovarajući put vaše pozadinske datoteke.

Nakon dodavanja datoteke pozadine u pozadinski sloj u prozoru za konfiguraciju slike, vidjet ćemo ove promjene:

Ikona pokretača nakon odabira pozadinske slike

5. Nakon koraka 4 odabrat ćemo karticu Sloj prednjeg plana i dodati našu datoteku foreground.svg ili foreground.png koja je opet iste dimenzije kao i naša pozadinska datoteka. Napravio sam svoju prvu datoteku koristeći GIMP v2.8, slijedeći gore navedene smjernice u ovom članku. Također ću podijeliti vezu u odjeljku o izvorima u nastavku o tome kako stvoriti jednostavan logotip vrste teksta s dugom sjenom, u međuvremenu logotip izgleda ovako:

foreground.png (432 x 432 px)

Baš kao što smo odabrali ime i vrstu imovine u pozadinskom sloju, to ćemo učiniti isto i za prednji sloj. Nakon odabira putanje datoteke prednjeg plana do prednjeg sloja u prozoru za konfiguraciju slike, vidjet ćemo ove promjene:

Ikona pokretača nakon odabira slike prednjeg plana

6. Ovaj korak bit će nam drugi posljednji korak, odabrat ćemo naslijeđenu karticu i tu imamo tri mogućnosti:

Legacy icon i ostale mogućnosti ikona

Na ovoj će se kartici generirati tri vrste dodatnih ikona, tj. Legacy Icon, okrugla ikona i ikona Google Play Store. Za svaku vrstu ikone imamo mogućnosti da ili ne. Tako ćemo generirati svaku ikonu za našu aplikaciju i pritisnuti Dalje.

7. Nakon što slijedite sve korake, Android Studio generirat će sve izlazne datoteke u mapi mipmap i razdvojiti sve datoteke dpi mudro. Pogledajmo ovaj izlazni prozor:

Prozor pregleda izlazne datoteke

Kao što vidimo, postoje dvije XML datoteke pokretačke ikone, jedna za normalnu ikonu i druga za okrugle ikone, koje imaju oznake i specificiraju prednje i pozadinske crteže odvojeno u mipmap- mapa anydpi-v26. Nakon provjere svih mapa i datoteka, konačno ćemo kliknuti Finish i Voila! Naša ikona za prilagodbu je spremna.

Da vidimo samo čari naše prilagodljive ikone:

Ikona prilagodbe aplikacije GPSearch

To je sve o adaptivnoj ikoni. Izvorni kod možete pronaći ovdje:

U drugom dijelu ove serije objasnit ću kako funkcionira ubrizgavanje zavisnosti pomoću bodeža i postupiti ga integrirati u ovu aplikaciju. Ostanite u toku ...

Resursi

Ovo su resursi koje sam slijedio da bih implementirao ikonu adaptacije. Svi također možete pogledati ove resurse.

  1. Dizajn adaptivne ikone Nick Butcher
  2. Prilagodljive ikone i još mnogo toga - StylingAndroid
  3. Za testiranje Adaptive Icon
  4. Kako napraviti ravnu dugu sjenu u GIMP-u

Nadamo se da će ovaj blog pomoći u stvaranju fenomenalnih i ugodnih ikona za prilagodbu za vašu aplikaciju. Ako imate neke prijedloge za implementaciju adaptivnih ikona, javite mi u odjeljku za komentare.

Hvala na čitanju. Također, možete ako želite i uživate čitati ovaj članak, onda samo .

Slijedite me na Twitteru: