Componente de arhitectură extraordinare folosind Kotlin - pictograme pentru aplicații adaptive

Fereastra de configurare a pictogramelor adaptive în Android Studio

Toți trebuie să fi auzit deja despre Kotlin, Dagger 2, Componente de arhitectură Android, Retrofit 2, icoane adaptive și multe alte funcții și avansări minunate care se întâmplă în Android. Recent, Google a lansat și previzualizarea Android P Developer. Citesc multe despre aceste subiecte fierbinți de ceva vreme și am încercat să le folosesc și în aplicațiile mele. Iată, așadar, prima mea încercare de a învăța ceva nou și de a-mi împărtăși cunoștințele în comunitatea în sine.
Voi scrie o serie în care mă concentrez și demonstrez în totalitate beneficiile acestor stive tehnice menționate mai sus, prin dezvoltarea unei aplicații simple bazate pe Kotlin, în care să putem căuta utilizatori GitHub folosind API-ul de căutare GitHub.

Te simți emoționat? Doar hop. Va fi o plimbare distractivă.

Conţinut

  1. Pictograme pentru aplicații adaptive
  2. Injectarea dependențelor folosind Dagger 2
  3. Realizarea unor camere
  4. Va continua adăugând mai multe puncte pe blogurile viitoare ale acestei serii

Pictograme pentru aplicații adaptive

În Google I / O17 de anul trecut, Google a introdus icoane de lansare adaptive în sistemul de operare Android Oreo (nivel API 26). Un mod nou, elegant și elegant de a proiecta sigla oricărei aplicații. Folosind acest nou format, pictograma lansatorului aplicației noastre poate fi afișată într-o varietate de forme pe diferite OEM-uri, înseamnă că o pictogramă adaptivă poate afișa o pictogramă în formă circulară pe un dispozitiv și o pictogramă în formă de squaricle pe un alt dispozitiv.

Deci, forma pictogramei de lansare a aplicației noastre poate varia de la:

Pictograma adaptivă în formă de cercPictogramă adaptivă în formă de pătratPictogramă adaptivă în formă de pătrat rotunjităPictogramă adaptativă în formă de scuaricle

în funcție de masca implicită furnizată de OEM-ul acceptat pe smartphone, care este folosit de sistem pentru a reda toate pictogramele adaptive în aceeași formă disponibile pe dispozitiv.

Elementele de bază

Cele mai importante componente ale pictogramei adaptive sunt primele planuri și straturile de fundal. Pentru a crea o pictogramă adaptivă, trebuie să separăm pictograma lansatorului în două părți menționate mai sus (strat de prim plan și strat de fundal).

Dimensiunile pictogramelor lansatorului au dimensiunea de 48 x 48 dp în versiunea Android 7.1 și anterioară. Dar, în conformitate cu documentația oficială de pe pictograma Adaptive de către Google, aplicațiile ar trebui să urmeze un set specific de linii directoare pentru a crea ambele straturi ale pictogramei adaptive, adică:

  • Atât straturile de prim plan cât și cele de fundal trebuie să aibă dimensiunea de 108 x 108 dp (în care stratul de fundal trebuie să fie opac, iar stratul de prim plan poate avea transparență).
Dimensiunea pictogramei lansatorului (Sursa)
  • Pictograma lansatorului trebuie să se afle în interiorul mascării, adică 72 x 72 CP.
Animatie de mascare OEM (Sursa)
  • Există un spațiu suplimentar de 18 CP din fiecare parte, păstrat pentru ca OEM-urile să efectueze diferite tipuri de efecte vizuale, cum ar fi paralaxul, pulsul sau multe alte efecte.
Efecte vizuale (sursă)

Oh! Mai trebuie să spun, straturile de prim plan și de fundal pot fi de format .svg sau .png. Voi partaja un link în secțiunea de referințe a acestui blog, de unde am învățat cum să creez stratul prim-plan al pictogramei lansatorului.

Abordare

Există două abordări pentru a crea pictograma Adaptive, adică.

  1. Utilizarea funcției Image Asset în Android Studio în sine (una simplă și destul de simplă).
  2. Crearea unui fișier XML de tip .

Vom analiza prima abordare din acest blog. Dar înainte de a începe, există o condiție prealabilă de care trebuie să aveți grijă pentru a crea icoana adaptivă.

Aplicația dvs. ar trebui să aibă conversia de ținte ca 26 și mai sus.

Prima abordare

Este o abordare mai ușoară, doar urmând pași:

  1. Faceți clic dreapta pe folderul res și selectați Noua> opțiune Image Asset. Va arăta astfel:

2. Acum, după pasul 1, vom putea vedea o fereastră de configurare a imaginilor de acest tip:

Există mai multe opțiuni disponibile, așa cum putem vedea cu toții în această fereastră de configurare. Vom analiza opțiunile necesare pentru a crea o pictogramă Adaptive în pași suplimentari.

3. În acest pas, există anumite opțiuni pe care le vom lăsa așa cum este, care sunt:

  • Vom lăsa opțiunea Tip pictogramă, deoarece este selectată în mod implicit icoane Launcher (Adaptive și Legacy).
  • Numele pictogramei lansatorului este scris ca ic_launcher, puteți schimba numele în funcție de cerința dvs.
  • Există două butoane de comutare disponibile în această fereastră de configurare care sunt Show Safe Zone (Pentru a comuta vizibilitatea zonei sigure în fereastra de previzualizare a pictogramei lansatorului) și Show Grid (Pentru a comuta vizibilitatea formelor cheie care ajută la setarea proporției pictogramei coerente) .
  • În fereastra de configurare sunt disponibile trei file denumite strat de prim plan, strat de fundal și moștenire. Ne vom uita spre ei în următorii pași.

4. După parcurgerea pasului 3, vom avansa pentru a adăuga fișierul nostru background.svg sau background.png. Am făcut fișierul meu background.png cu dimensiunea 432 x 432 px folosind GIMP v2.8, arată astfel:

background.png (432 x 432 px)

Dând doar o scurtă secțiune a stratului de fundal: are câmpuri precum:

  • Nume: Setați numele stratului de fundal în funcție de cerința dvs.
  • Tip activ: Selectați tipul de imagine pe măsură ce folosim fișierul .svg sau .png pentru stratul de fundal.
  • Calea: selectați calea corespunzătoare a fișierului dvs. de fundal.

După adăugarea fișierului de fundal la stratul de fundal din fereastra de configurare a imaginii, vom vedea modificările astfel:

Pictograma Lansator după selectarea imaginii de fundal

5. După pasul 4, vom selecta fila Strat de prim plan și vom adăuga fișierul nostru foreground.svg sau foreground.png care are din nou aceleași dimensiuni ca și fișierul nostru de fundal. Am creat fișierul meu prim-plan folosind GIMP v2.8 însuși urmând îndrumările menționate mai sus în acest articol. De asemenea, voi împărtăși un link în secțiunea resurse de mai jos despre cum puteți crea un logo de tip text simplu, cu o umbră lungă, între timp logo-ul arată astfel:

prim plan.png (432 x 432 px)

La fel cum am selectat numele și tipul de activ în stratul de fundal, vom face același lucru și pentru stratul prim-plan. Așadar, după ce selectăm calea fișierului prim-plan către stratul prim-plan în fereastra de configurare a imaginii, vom vedea modificările astfel:

Pictograma Lansator după selectarea imaginii prim-plan

6. Acest pas va fi al doilea ultim pas, vom selecta fila moștenire și avem trei opțiuni:

Pictograma moștenire și alte opțiuni pentru pictograme

Această filă va genera trei tipuri de pictograme suplimentare, adică Icoana moștenire, pictograma rotundă și pictograma magazinului Google Play. Avem opțiuni da sau nu pentru fiecare tip de pictogramă. Așadar, vom genera fiecare pictogramă pentru aplicația noastră și vom apăsa Următorul.

7. După ce urmați toți pașii, Android Studio va genera toate fișierele de ieșire din folderul mipmap și va separa toate fișierele dpi înțelepte. Să aruncăm o privire la această fereastră de ieșire:

Fereastra de prezentare generală a fișierului de ieșire

După cum putem vedea, există două fișiere XML cu pictograma lansatorului, unul pentru pictograma normală și altul pentru pictograma rotundă, care au etichete și specifică desenele de fundal și desenele de fundal separat într-un mipmap- folderul anydpi-v26. Așadar, după verificarea tuturor dosarelor și a fișierelor, vom face în cele din urmă clic pe Finish și Voila! Pictograma noastră adaptivă este gata.

Să vedem doar magia icoanei noastre adaptive:

Pictograma Adaptive GSearch App

Este vorba despre pictograma adaptivă. Puteți găsi codul sursă aici:

În a doua parte a acestei serii, voi explica cum funcționează dependența de injecție folosind Dagger și procesul de integrare a acesteia în această aplicație. Rămâneți aproape…

Resurse

Acestea sunt resursele pe care le-am urmat pentru a implementa pictograma adaptivă. Cu toții puteți arunca o privire și asupra acestor resurse.

  1. Proiectarea icoanei adaptive de Nick Butcher
  2. Icoane adaptive și multe altele - de StylingAndroid
  3. Pentru testarea pictogramei adaptive
  4. Cum să creezi o umbră lungă în GIMP

Sperăm că acest blog vă va ajuta la crearea de icoane minunate și adaptive pentru aplicația dvs. Dacă aveți câteva sugestii pentru implementarea pictogramelor adaptive, vă rugăm să mă anunțați în secțiunea de comentarii.

Mulțumesc pentru citit. De asemenea, puteți Dacă doriți și vă place să citiți acest articol, atunci just.

Urmărește-mă pe Twitter: