Explorarea completărilor de biblioteci de asistență Android Design v28

Versiunea 28 a bibliotecii de asistență Android a fost anunțată recent - în cadrul versiunii alpha actuale există o colecție de componente noi interesante la care acum avem acces. În acest articol, vreau să arunc o privire asupra completărilor care au fost făcute bibliotecii de asistență sub formă de componente pentru vizualizarea materialelor.

Buton material

Material Button este un widget care poate fi utilizat pentru a afișa un buton de stil de material în interfața de utilizator a aplicațiilor. Această clasă se extinde din clasa AppCompatButton pe care probabil că o folosiți deja în proiectele dvs., dar ce face acest lucru diferit? Din această casetă, acest buton va fi conceput cu aspectul de natură materială, fără a fi necesar să-l personalizați singur folosind steagul stilului. Putem folosi clasa MaterialButton așa cum este, iar în viziunea noastră, acesta va avea deja aspectul și simțirea materialului după care urmează - vedeți-o ca o clasă de comoditate.

Putem adăuga acest buton în fișierul nostru de dispunere, astfel:

În mod implicit, această clasă va folosi culoarea de accent a temei dvs. pentru culoarea de fundal a butoanelor umplute împreună cu albul pentru culoarea textului pentru butoane. Dacă butonul nu este completat, atunci culoarea accentului din tema dvs. va fi utilizată pentru culoarea textului butonului, împreună cu un fundal transparent.

Dacă dorim să adăugăm un stil suplimentar la noi, atunci putem face acest lucru folosind o colecție de atribute din stilul MaterialButton.

  • app: pictogramă - Se folosește pentru a defini un desen care poate fi afișat la începutul butonului
  • app: iconTint - Folosit pentru a nuanța pictograma folosită din aplicație: atributul icon
  • app: iconTintMode - definește modul de utilizat pentru nuanța pictogramei
  • app: iconPadding - Padding care trebuie aplicat pe pictogramă în utilizare din aplicație: atribut icon
  • app: adicionalPaddingLeftForIcon - Definește căptușeala care se va aplica la stânga pictogramei folosită din aplicație: atribut icon
  • app: adicionalPaddingRightForIcon - Definește căptușeala care se va aplica la dreapta pictogramei în utilizare din aplicație: atribut icon
  • app: rippleColor - Culoarea care va fi utilizată pentru efectul de ondulare a butonului, această culoare va fi utilizată
  • app: backgroundTint - Se folosește pentru aplicarea unei nuanțe pe fundalul butonului. Dacă doriți să schimbați culoarea de fundal a butonului, utilizați acest atribut în loc de fundal pentru a evita ruperea stilului butonului
  • app: backgroundTintMode - Folosit pentru a defini modul care va fi utilizat pentru nuanța de fundal
  • aplicație: strokeColor - Culoarea care va fi utilizată pentru apăsarea butonului
  • aplicație: strokeWidth - Lățimea care va fi utilizată pentru cursa butonului
  • app: cornerRadius - Se folosește pentru a defini raza folosită pentru colțurile butonului

Chip

Componenta cip ne permite să afișăm o vedere a cipului în aspectul nostru. Acesta este, în esență, un text căruia i se oferă un fundal rotunjit - scopul acestora este afișarea unei forme de colectare textuală a utilizatorului care poate fi sau nu selectabil. De exemplu, acestea ar putea fi utilizate pentru a afișa o listă de sugestii selectabile utilizatorului, pe baza contextului actual din aplicația dvs.

Putem adăuga un cip la aspectul nostru ca atare, folosind atributul app: chipText pentru a seta textul care va fi afișat pe cip:

Există, de asemenea, o colecție de alte atribute care pot fi utilizate pentru a îmbunătăți stilul cipului:

  • aplicație: verificabilă - Se folosește pentru a declara dacă cipul poate fi comutat dacă este selectat / nu selectat. Dacă este dezactivat, verificarea se comportă la fel ca un buton
  • app: chipIcon - Folosit pentru a afișa o pictogramă în cip
  • app: closeIcon - Folosit pentru a afișa o pictogramă închisă în cip

De asemenea, putem seta unii ascultători pe instanțele noastre de cip, acestea pot fi utile pentru ascultarea interacțiunilor utilizatorilor noștri. Dacă cipul nostru este verificabil, este probabil să dorim să ascultăm când va fi modificată această stare de verificare. Putem face acest lucru folosind setul de ascultare setOnCheckedChangeListener:

butonul some_chip.setOnCheckedChangeListener {, bifat ->}

Același lucru se aplică atunci când dorim să ascultăm interacțiunea cu pictograma apropiată atunci când este în uz. Pentru aceasta putem utiliza funcția setOnCloseIconClickListener pentru a înregistra evenimente de interacțiune strânsă:

some_chip.setOnCloseIconClickListener {}

Chip Group

Dacă afișăm o colecție de cipuri utilizatorilor noștri, dorim să ne asigurăm că acestea sunt grupate corect în viziunea noastră. Pentru aceasta putem folosi componenta de vizualizare ChipGroup:

Dacă dorim să utilizăm ChipGroup, trebuie doar să înfășurați vizualizările noastre Chip într-o componentă părintească ChipGroup:



    

    

    // mai multe jetoane ...

În mod implicit, vizualizările dvs. Chip pot părea un pic înghesuite. Dacă da, puteți adăuga unele spațieri la vizualizările copilului folosind următoarele atribute pe grupul de cipuri în sine:

  • app: chipSpacing - Adaugă spațiu atât pe axa orizontală cât și pe cea verticală
  • app: chipSpacingHorizontal - Adaugă spațiu pe axa orizontală
  • app: chipSpacingVertical - Adaugă spațiu pe axa verticală

De asemenea, putem declara că vizualizările Chipului nostru vor fi afișate într-o singură linie în interiorul containerului nostru ChipGroup. Utilizarea aplicației: atribut singleLine:

Când faceți acest lucru, va trebui să înfășurați ChipGroup într-o vizualizare derulantă, precum HorizontalScrollView, astfel încât utilizatorii dvs. să poată parcurge jetoane afișate:



    

        

        // mai multe jetoane ...
    

Vizualizare card material

Este posibil ca în aplicațiile noastre să folosim la un moment dat componenta CardView. Biblioteca de asistență conține acum o componentă numită Vizualizarea fișierelor de material, care ne oferă o casă de implementare a cardview-ului cu design material.

Vizualizarea cardului poate fi adăugată la aspectul dvs. astfel:

    ... vizualizari ale copiilor ...

Puteți stila vizualizarea cardului folosind două dintre atributele care vin cu aceasta:

  • app: strokeColor - Culoarea care trebuie utilizată pentru cursa dată, aceasta trebuie setată pentru a afișa o lovitură
  • aplicație: strokeWidth - Lățimea care trebuie aplicată cursului vizualizării

În afară de aceste două atribute, puteți în continuare să vizualizați stilul cardview folosind atributele disponibile inițial, cum ar fi aplicația: cardBackgroundColor etc.

Bara de aplicații inferioară

Bara de aplicații din partea de jos este o componentă nouă care ne permite să afișăm o componentă asemănătoare cu bara de instrumente din partea de jos a machetei noastre. Aceasta ne permite să afișăm componente utilizatorului nostru într-o manieră care să le facă mai ușor să interacționeze decât ar putea avea o bară de instrumente standard.

Puteți adăuga BottomAppBar în fișierul de dispunere astfel:

Se pare că bara de aplicații din partea de jos trebuie să i se atribuie un meniu pentru ca acesta să fie afișat pe ecran. Acest lucru poate fi făcut în mod programatic astfel:

bottom_app_bar.replaceMenu (R.menu.main)

Când vine vorba de stilizarea barei de aplicații din partea de jos, puteți folosi mai multe atribute pentru a face acest lucru.

  • app: fabAttached - precizează dacă a fost atașat sau nu un FAB la bara de aplicații din partea de jos. Puteți atașa o fabulă folosind aplicația: layout_anchor pe componenta FAB pe care doriți să o atașați, folosind ID-ul barei de aplicații din partea de jos. Dacă este atașat un FAB, acesta va fi introdus în bara de aplicații de jos, altfel FAB va rămâne deasupra barei de aplicații din partea de jos.
  • app: fabAlignmentMode - Declarează poziția FAB care a fost atașată la bara de aplicații din partea de jos. Acesta poate fi fie un final:

sau centru:

  • app: fabCradleVerticalOffset - Declară compensarea verticală care trebuie utilizată pentru fabulul atașat. În mod implicit, este 0dp:

Totuși, setarea unei valori dp va permite ca FAB să se deplaseze în sus pe verticală:

  • app: backgroundTint - Folosit pentru aplicarea unei nuanțe pe fundalul vizualizării. Dacă doriți să setați culoarea de fundal a vizualizării, atunci aceasta ar trebui să fie utilizată peste atributul Android: background. Făcând acest lucru, se va asigura că vizionarea rămâne stabilă.

Concluzie

În opinia mea, sunt câteva adăugări clare la biblioteca de asistență - aștept cu nerăbdare să pot folosi componente tematice materiale chiar din cutie. De asemenea, sunt încântat să găsesc un caz de utilizare pentru care să poată fi utilizată bara de aplicații din partea de jos, dar sunt sigur că există ceva timp înainte ca versiunea bibliotecii de asistență să fie stabilă înainte de a face acest lucru. Ca de obicei, mi-ar plăcea să vă aud gândurile sau comentariile cu privire la aceste componente noi!