Anul trecut, Google a introdus materialul de design și a devenit clar că mișcarea și animația ar fi două dintre cele mai atrăgătoare caracteristici ale aplicațiilor Android moderne. Dar Google nu a oferit dezvoltatorilor o soluție ușoară pentru a le integra în aplicații. Ca rezultat, multe biblioteci au fost dezvoltate pentru a rezolva problema integrării.
Totuși, pe parcursul acestui an Google I / O, Google a introdus Biblioteca de suport Android Design pentru a facilita adoptarea Material Design. Acest lucru permite dezvoltatorilor să se concentreze asupra caracteristicilor care fac ca aplicațiile lor să fie unice.
1. Regiunile
În acest tutorial, vă vom arăta cum să implementați tehnicile de defilare prezentate în specificația Material Design Google. Înainte de a începe, trebuie să vă familiarizați cu regiunile scrollabile disponibile într-o aplicație Android. În următoarea imagine, puteți vedea că există patru regiuni.
Bara de stare
Aici apar notificările și se afișează starea diferitelor caracteristici ale dispozitivului.
Bara de instrumente
Bara de instrumente a fost cunoscută anterior drept bara de acțiune. Acum este o vedere mai personalizabilă cu aceleași funcționalități.
Fila / Bara de căutare
Această regiune opțională este utilizată pentru a afișa filele care clasifică conținutul aplicației dvs. Puteți citi mai multe despre utilizarea filelor și despre modalitățile diferite de a le afișa în specificația Design material Google. Când este potrivit, îl puteți folosi și în navigarea laterală a Google.
Spațiu flexibil
Aici puteți afișa imagini sau bare de aplicații extinse.
În ceea ce privește tehnicile de defilare, este bara de instrumente și bara de filă / căutare care răspund la derularea conținutului aplicației dvs..
Configurare 2. Proiect
Pentru a continua, ar trebui să utilizați cea mai recentă versiune de Android Studio. Puteți să-l obțineți de pe site-ul Android Developer. Pentru a încerca aceste tehnici de derulare, vă recomand să creați un nou proiect (cu un nivel minim de API de 15), deoarece aspectul aplicației dvs. se va schimba în mod semnificativ.
Am oferit un proiect de pornire, pe care îl puteți descărca de la GitHub. Puteți utiliza proiectul de pornire ca punct de pornire și puteți utiliza tehnicile de defilare în propriile aplicații. Să adăugăm mai întâi următoarele dependențe la proiectul dvs. build.gradle fișier în dosarul aplicației:
Cu prima dependență, beneficiați de Biblioteca de suport Android Design, care include noile clase de care avem nevoie pentru acest tutorial.
Cu a doua dependență, veți obține cea mai recentă versiune de RecyclerView. Versiunea menționată în articolul oficial despre crearea listelor nu va fi utilă de data aceasta.
Apoi, veți avea nevoie de date fictive pentru a încerca aceste tehnici și pentru a le popula RecyclerView. Le puteți implementa singuri sau copiați implementarea din InitialActivity clasă în proiectul inițial.
3. Tehnica derulării 1
Această tehnică ascunde regiunea barei de instrumente când conținutul aplicației dvs. este derulat. Puteți vedea tehnica în acțiune în următorul videoclip.
Pentru acest design de aspect, vă puteți gândi la ceva de genul:
Problema cu acest aspect este că trebuie să gestionați singur evenimentele, dar va fi nedureroasă dacă profitați de noile clase. Să o modificăm după cum urmează:
În acest aspect nou, puteți vedea că:
RelativeLayout se înlocuiește cu a CoordinatorLayout
Bara de instrumente este înfășurat într-o AppBarLayout
Bara de instrumente și RecyclerView a primit câteva atribute suplimentare
Care sunt aceste clase noi?
CoordinatorLayout
Acest aspect este un container nou și un încărcător supraîncărcat FrameLayout care oferă un nivel suplimentar de control asupra evenimentelor de atingere dintre vizionările copilului.
AppBarLayout
Acest aspect este un alt container nou, conceput special pentru a implementa multe din caracteristicile conceptului de design al materialelor. Rețineți că dacă îl utilizați în altul ViewGroup, cea mai mare parte a funcționalității sale nu va funcționa.
Cheia acestei tehnici de derulare și cele mai multe alte tehnici de defilare pe care le vom discuta este CoordinatorLayout clasă. Această clasă specială poate recepționa evenimente și poate difuza evenimente în viziunea copilului, pentru a le răspunde în mod corespunzător. Acesta este conceput pentru a fi utilizat ca vizualizare a containerului rădăcină.
Pentru a permite această tehnică, app: layout_behavior atributul indică ce vizualizare va declanșa evenimentele din Bara de instrumente. În acest caz, asta este RecyclerView.
app: layout_scrollFlags atributul Bara de instrumente indică modul în care trebuie să răspundă.
app: layout_scrollFlags = „scroll | enterAlways“
app: layout_scrollFlags atributul poate avea patru valori posibile, care pot fi combinate pentru a crea efectul dorit:
sul
Acest steag ar trebui să fie setat pentru toate vizualizările care trebuie scoase în afara ecranului. Vizionările care nu utilizează acest steag rămân fixate în partea de sus a ecranului.
enterAlways
Acest steguleț asigură că orice derulare în jos va determina această vizualizare să devină vizibilă, permițând întoarcere rapidă model.
enterAlwaysCollapsed
Atunci când o vizualizare a declarat a minHeight și utilizați acest steag, vizualizarea va fi introdusă numai la înălțimea minimă (restrânsă), extinsă doar la înălțimea completă atunci când vizualizarea derulării a ajuns la vârf.
exitUntilCollapsed
Acest steag face ca vizualizarea să se deruleze de pe ecran până când se prăbușește minHeight este atins) înainte de a ieși.
Acum puteți rula proiectul sau apăsați Control + R, și a vedea această tehnică în acțiune.
4. Tehnica derulării 2
Această tehnică derulează bara de instrumente în afara ecranului în timp ce regiunea barelor de tab-uri rămâne ancorată în partea de sus. Puteți vedea această tehnică în acțiune în următorul videoclip.
Pentru această tehnică, voi reutiliza structura din tehnica anterioară și o voi adăuga TabLayout Vedere lângă Bara de instrumente, în interiorul AppBarLayout.
TabLayout vizualizare oferă un aspect orizontal pentru afișarea filelor. Puteți adăuga orice număr de file utilizând filă nouă și setați modul de comportament utilizând funcția setTabMode. Să începem prin popularea filelor.
Prin schimbarea valorii app: layout_scrollFlags atributul și adăugarea și eliminarea acestuia din Bara de instrumente și TabLayout, puteți obține animații ca cele folosite în:
Magazin Google Play unde bara de instrumente se ascunde, iar bara de file rămâne vizibilă.
pătrat unde bara filă se derulează în afara ecranului în timp ce bara de instrumente rămâne în partea de sus.
Reda muzică în cazul în care atât bara de instrumente, cât și bara de filete defilați în afara ecranului.
Uitați-vă la următoarele videoclipuri pentru exemple ale acestei tehnici de defilare.
Puteți rula proiectul dvs. și puteți vedea această tehnică de defilare în acțiune.
5. Tehnica derulării 3
Pentru această tehnică de defilare, voi folosi regiunea spațială flexibilă pe care am menționat-o la începutul acestui tutorial. Fac asta pentru a micșora înălțimea inițială a AppBarLayout deoarece conținutul se derulează. Înălțimea AppBarLayout crește la înălțimea inițială în timp ce conținutul este derulat. Puteți vedea această tehnică în acțiune în următorul videoclip.
Pentru această tehnică de derulare, voi folosi următoarea structură:
Cu siguranta arata ca o multime de cod, asa ca haideti sa-l rupem. În acest aspect, am făcut următoarele modificări:
Bara de instrumente este înfășurat într-o CollapsingToolBarLayout și ambele elemente sunt introduse în AppBarLayout.
app: layout_scrollFlags atributul este mutat din Bara de instrumente la CollapsingToolBarLayout, deoarece acest container este acum responsabil pentru a răspunde evenimentelor de defilare.
Un nou atribut, app: layout_collapseMode, a fost adăugat la Bara de instrumente. Acest atribut asigură că Bara de instrumente rămâne fixată în partea de sus a ecranului.
AppBarLayout are o înălțime inițială fixă de 192dp.
A FloatingActionButton a fost adăugat la aspectul de mai jos RecyclerView.
Pentru ce sunt aceste clase noi?
CollapsingToolBarLayout
Aceasta este o vizualizare nouă, concepută special pentru ambalarea Bara de instrumente și implementați o bară de aplicații care se prăbușește. Atunci când utilizați CollapsingToolBarLayout , trebuie să acordați o atenție deosebită următoarelor atribute:
app: contentScrim
Acest atribut specifică culoarea care trebuie afișată când este complet restrânsă.
Aceste atribute specifică marginile titlului extins. Ele sunt utile dacă intenționați să utilizați setDisplayHomeAsUpEnabled în activitatea dvs. și umpleți noile spații create în jurul titlului.
FloatingActionButton
Butonul de acțiune plutitoare este o componentă importantă a aplicațiilor de design material. Acum puteți include butoane de acțiune plutitoare în aspectul dvs. cu doar câteva rânduri de cod. Puteți utiliza funcția app: fabSize să alegeți dintre două dimensiuni diferite, standard (56dp) și mini (40dp). Standard este dimensiunea implicită.
Efectul de disparitie se realizeaza automat prin ancorarea butonului de actiune plutitoare la AppBarLayout folosind app: layout_anchor atribut. De asemenea, puteți specifica poziția relativă la această ancoră utilizând butonul app: layout_anchorGravity atribut.
Înainte de a executa proiectul, trebuie să precizăm în activitate că CollapsingToolBarLayout va afișa titlul în loc de Bara de instrumente. Uitați-vă la următorul fragment de cod pentru clarificare.
Rulați proiectul pentru a vedea cea de-a treia tehnică de defilare în acțiune.
6. Tehnica derulării 4
Această tehnică de defilare utilizează extensia extinsă AppBarLayout, prezentate în tehnica anterioară, pentru a afișa o imagine. Puteți vedea această tehnică în următorul videoclip.
Pentru această tehnică, voi reutiliza structura anterioară și o voi modifica ușor:
În acest aspect, am făcut următoarele modificări:
Android: fundal atributul a fost eliminat din AppBarLayout. Deoarece ImageView va umple acest spațiu, nu este nevoie de o culoare de fundal.
app: expandedTitleMarginStart și app: expandedTitleMarginEnd atributele au fost eliminate, deoarece nu le folosim setDisplayHomeAsUpEnabled în cadrul activității.
Un ImageView a fost adăugat inainte deBara de instrumente. Acest lucru este important pentru a evita ca AppBarLayout afișează o parte a imaginii în locul culorii primare atunci când este restrânsă.
S-ar putea să fi observat și faptul că ImageView are app: layout_collapseMode atribut. Valoarea atributului este setată la papalaxă pentru a implementa derularea paralaxelor. În plus, puteți adăuga și app: layout_collapseParallaxMultiplier atribut pentru a seta un multiplicator.
Acestea sunt toate modificările pe care trebuie să le faceți pentru a face ca această tehnică de defilare să funcționeze fără probleme în aplicația dvs. Rulați proiectul pentru a vedea această tehnică de defilare în acțiune.
7. Tehnica derulării 5
Pentru această tehnică de defilare, spațiul flexibil este suprapus de conținutul aplicației și este derulat off-screen atunci când conținutul este derulat. Puteți vedea această tehnică în acțiune în următorul videoclip.
Pentru această tehnică, puteți reutiliza structura din tehnica anterioară, cu câteva modificări minore.
Pentru acest aspect:
ImageView si FloatingActionButton în interiorul CollapsingToolbarLayout au fost eliminate. Această tehnică nu necesită o imagine.
În CollapsingToolbarLayout, app: contentScrim atributul a fost înlocuit cu Android: fundal atribut. Facem acest lucru, deoarece culoarea de fundal trebuie să se potrivească Bara de instrumente culoarea de fundal frumos atunci când dispare.
Android: fundal atributul a fost adăugat la Bara de instrumente.
app: behavior_overlapTop atributul a fost adăugat la RecyclerView. Acesta este cel mai important atribut pentru această tehnică de defilare, deoarece acest atribut specifică cantitatea de suprapunere pe care ar trebui să o aibă vizualizarea cu AppBarLayout. Pentru ca acest atribut să aibă efect, ar trebui adăugat la aceeași vizualizare care are app: layout_behavior atribut.
Dacă încercați să utilizați această tehnică de defilare cu aceste modificări, atunci aspectul rezultat nu va avea un titlu în Bara de instrumente. Pentru a rezolva acest lucru, puteți crea un TextView și adăugați-l la Bara de instrumente programatică.
TextView text = nou TextView (acest); text.setText (R.string.title_activity_technique5); text.setTextAppearance (aceasta, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse); toolbar.addView (text);
Concluzie
Rețineți că nu aveți nevoie să implementați fiecare dintre aceste tehnici în aplicația dvs. Unele vor fi mai utile pentru designul dvs. decât altele. Acum că știți cum să implementați fiecare, puteți alege și experimenta cu ele.
Sper că ați găsit acest tutorial util. Nu uitați să le împărtășiți dacă v-ați plăcut. Puteți lăsa orice comentarii și întrebări de mai jos.
Share
Accentsconagua
