Share
Ce veți creaEchipa de design material de la Google definește pur și simplu funcționalitatea filelor din Android după cum urmează:
Tab-urile facilitează explorarea și comutarea între vizualizări diferite.
În această postare veți afla cum să afișați filele utilizând TabLayout și ViewPager API-ul. În acest tutorial practic, vom acoperi următoarele:
Accentsconagua
TabLayout și ViewPager componente. Un exemplu de proiect pentru acest tutorial poate fi găsit pe replica noastră GitHub, pentru a putea urmări cu ușurință.
Pentru a putea urma acest tutorial, veți avea nevoie de:
De asemenea, puteți afla toate intrările și ieșirile din limba Kotlin în seria mea Kotlin From Scratch.
Conform documentației oficiale Android pe TabLayout, se spune:
TabLayoutoferă un aspect orizontal pentru afișarea filelor.
TabLayout componenta este una dintre componentele introduse ca parte a artefactelor de design material. În plus, este inclusă și în biblioteca de suport pentru proiectare. În a TabLayout, când o filă este selectată sau apăsată, o altă pagină (sau fragment) este afișată utilizatorului.
TabLayout componenta poate avea funcțiile de tab-uri afișate într-unul din două moduri: fix și scrollabil. Dacă filele sunt fixate, toate filele vor fi afișate simultan pe ecran.
Imaginea de mai jos este cea mai recentă aplicație WhatsApp Android (din această scriere), care folosește a TabLayout cu o configurație a modului fix.
În filele derulante, dacă numărul filelor devine prea lat pentru ecran, utilizatorul poate glisa spre stânga sau spre dreapta pentru a vedea mai multe file.
Iată un exemplu de a TabLayout cu modul tabular derulant - prezentat în cea mai recentă versiune a aplicației News & Weather Android de la Google.
În plus, informațiile afișate pe o filă pot fi text, o pictogramă sau o combinație de text și de o pictogramă. De exemplu, cea mai recentă aplicație Twitter pentru Android utilizează pictograme în locul textului în fiecare filă.
În secțiunile următoare, ne vom arunca cu capul în codarea unei aplicații simple care face uz TabLayout cu ViewPager. Să mergem!
Designul nu este doar ceea ce arată și simte. Designul este modul în care funcționează. - Steve Jobs
Activați Android Studio 3 și creați un nou proiect (îl puteți numi TabLayoutDemo) cu o activitate goală numită Activitate principala.
Vom crea o TabLayout cu doar trei file. Când este selectată fiecare dintre file, aceasta afișează un alt fragment sau o pagină Android. Deci, să creați acum cele trei fragmente Android pentru fiecare dintre file. Vom începe cu prima clasă de fragmente și ar trebui să urmăriți un proces similar pentru celelalte două clase de fragmente-FragmentTwo.kt și FragmentThree.kt.
Aici e al meu FragmentOne.kt:
importați android.os.Bundle import android.support.v4.app.Fragment de import android.view.LayoutInflater import șiroid.view.Video import și class.ViewGroup FragmentOne: Fragment () override distracție onCreateView (inflater: LayoutInflater ?, container: ViewGroup ?, savedInstanceState: Bundle?): Vezi? = inflater!) inflamați (R.layout.fragment_one, container, false) obiect companion fun newInstance (): FragmentOne = FragmentOne ()
Aici este și mine R.layout.fragment_one:
Pentru a începe să utilizați TabLayout și ViewPager în proiectul dvs., asigurați-vă că importați suportul de proiectare și, de asemenea, artefactul de asistență Android - adăugați-le astfel la modulele dvs. build.gradle fișier pentru a le importa.
dependencies implementation 'com.android.support:design:26.1.0' implementare 'com.android.support:support-v4:26.1.0'
De asemenea, vizitați-vă res / aspect / activlty_main.xml fișier pentru a include atât TabLayout widget și ViewPager vedere.
Aici am creat un simplu TabLayout cu id tab_layout. În a noastră TabLayout XML widget, puteți vedea că am inclus anumite atribute - cum ar fi app: tabMode a fi fix Si deasemenea app: tabGravity a fi completati. app: tabGravity proprietatea este utilizată pentru a configura modul în care vor fi afișate elementele filelor pentru a ocupa spațiul disponibil. Am stabilit asta completati, care va distribui elementele în mod egal pe toată lățimea TabLayout. Rețineți că acest lucru va fi mai vizibil în afișajele mai largi, cum ar fi tabletele.
Am inclus, de asemenea, un atribut stil personalizat (@ Stil / CustomTabLayout) în a noastră TabLayout widget.
Începem să ne personalizăm TabLayout prin setarea valorilor atributelor care urmează să fie aplicate pe TabLayout. Iată detaliile pentru unele dintre atributele aplicate:
tabIndicatorColor: setarea culorii indicatorului filă pentru fila selectată curent. Acest lucru poate fi programat de asemenea prin apelare setSelectedTabIndicatorColor () pe o TabLayout instanță. tabIndicatorHeight: setează înălțimea indicatorului filă pentru fila selectată în prezent. Aceasta poate fi programată și prin apelarea setSelectedTabIndicatorHeight () pe o TabLayout instanță. tabSelectedTextColor: setează culorile textului pentru diferitele stări (normale, selectate) utilizate pentru file. Echivalentul acestui atribut în Java este setTabTextColors (). Imediat după crearea noastră TabLayout widget în XML, următoarea vizualizare a fost a ViewPager. Documentația oficială spune următoarele despre ViewPager:
Layout manager care permite utilizatorului să se răstoarne la stânga și la dreapta prin paginile de date ...
Trebuie să creați o subclasă în SampleAdapter.kt care extinde FragmentPagerAdapter. Această clasă este responsabilă pentru gestionarea diferitelor fragmente care vor fi afișate pe file.
importand android.support.v4.app.Fragment de import android.support.v4.app.FragmentManager de import android.support.v4.app.FragmentPagerAdapter clasa SampleAdapter (fm: FragmentManager): FragmentPagerAdapter (fm) override distracție getItem (poziție: Int ): Fragment? = () - - - () 0 -> "Tab 1 Articol" 1 -> "Tab 2 Articol" 2 -> "Tab 3 Articol"
Aici eliminăm trei metode din clasa parentală: getItem (), getCount (), și getPageTitle (). Iată explicațiile pentru metodele:
getItem (): returnează a Fragment pentru o anumită poziție în cadrul ViewPager. getCount (): Indică câte pagini vor fi în ViewPager. getPageTitle (): această metodă este numită de ViewPager pentru a obține un șir de titlu pentru a descrie fila specificată.De exemplu, dacă fila selectată este prima filă cu titlu "Tab 1 element", A FragmentOne pagina va fi afișată imediat utilizatorului.
Apoi, vom iniția instanțe ale noastre TabLayout, ViewPager, și SampleAdapter. Inițializarea se va întâmpla în interior onCreate () în MainActivity.kt.
import android.os.Bundle import android.support.design.widget.TabLayout import șiroid.support.v4.view.ViewPager import android.support.v7.app.AppCompatActivity import șiroid.support.v7.widget.Toolbar class MainActivity: AppCompatActivity () (suprascris fun onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) initToolbar () val tabLayout: TabLayout = findViewById (R.id.tab_layout) val viewPager: R.id.view_pager) val adapter = SampleAdapter (supportFragmentManager) viewPager.adapter = adaptor tabLayout.setupWithViewPager (viewPager) tabLayout.addOnTabSelectedListener (obiect: TabLayout.OnTabSelectedListener override fun onTabSelected (tab: TabLayout.Tab) override fun onTabUnselected tab: TabLayout.Tab) suprascrie distracție onTabReselected (tab: TabLayout.Tab) private fun initToolbar () val toolbar: Toolbar = findViewById (r.toolbar) setSupportActionBar (toolbar) supportActionBar !! title = "TabLa yout Demo "
Avem referiri la noi TabLayout și ViewPager din R.layout.activity_main și le-a inițializat. Am creat și o instanță a noastră SampleAdapter-trecând un exemplu de FragmentManager ca argument. Trebuie să furnizăm opiniile noastre ViewPager, așa că am sunat setAdapter () și a trecut în adaptorul nostru creat. În cele din urmă, am sunat setupWithViewPager () pe un exemplu de TabLayout pentru a face ceva de lucru:
Atunci când utilizatorul se fixează pe o filă, modifică paginile în ViewPager și arată pagina cerută (sau Fragment). De asemenea, prin deplasarea între pagini se actualizează fila selectată. Cu alte cuvinte, această metodă ne ajută să avem grijă de schimbarea stării scroll și de clicurile pe file.
onTabSelectedListener () este folosit pentru a include un ascultător care va fi invocat atunci când se schimbă selecția filelor. Am inlocuit urmatoarele apeluri:
onTabSelected (): declanșat când o filă intră în starea selectată.onTabUnselected (): invocată atunci când o filă iese din starea selectată.onTabReselected (): invocată când o filă care este deja selectată este aleasă din nou de utilizator.Rețineți că putem seta, de asemenea, modul tab-ul în mod programat - în loc de prin intermediul layout-ului folosind XML setTabMode () pe un exemplu de TabLayout. Transmitem modul (fix sau scrollabil) la această metodă ca argument. De exemplu, putem trece TabLayout.MODE_FIXED pentru un mod fix - sau TabLayout.MODE_SCROLLABLE pentru un mod scrollabil.
tabLayout.tabMode = TabLayout.MODE_FIXED tabLayout.tabMode = TabLayout.MODE_SCROLLABLE
Rețineți că, dacă doriți să creați în mod explicit filele în loc să utilizați metoda de ajutor setUpWithViewPager (), puteți folosi în schimb filă nouă() pe o TabLayout instanță.
fi tabLayout.addTab (tabLayout.newTab (). setText ("Albume")) tabLayout.addTab (tabLayout.newTab () setText ("Songs" (tabLayout.newTab (). setText ( "Artiștii")) Rețineți, de asemenea, că am putea să creăm în mod explicit filele prin intermediul XML în loc de programare.
În cele din urmă, puteți rula aplicația!
Încercați să interacționați cu aplicația prin deplasarea spre stânga sau spre dreapta și atingerea filelor.
Instrucțiunile oficiale privind designul materialelor din filele de mai jos arată următoarele despre filele derulante:
Taburile derulante afișează un subset de file în orice moment dat. Ele pot conține etichete de file mai lungi și un număr mai mare de file decât filele fixate. Taburile derulante sunt cel mai bine utilizate pentru navigarea contextelor în interfețele de atingere atunci când utilizatorii nu au nevoie să compare direct etichetele filelor.
Să vedem cum se creează file cu configurație de mod scrollabil. Am făcut titlul pentru fiecare dintre file mai mult decât înainte. Iată rezultatul în modul fix:
Puteți vedea asta TabLayout a folosit mai multe linii pentru a afișa fiecare dintre titlurile filelor. În unele situații, chiar va trunchia titlurile! Acest lucru creează o experiență nefavorabilă pentru utilizatori, deci dacă titlurile filelor trebuie să fie foarte lungi, trebuie să luați în considerare utilizarea modului scrollabil. Rețineți, de asemenea, că dacă doriți să aveți mai mult de patru file, este recomandat să faceți modul tabular derulant.
Să schimbăm app: tabMode proprietate de la fix la derulabil.
app: tabMode = "derulabil" />
Rețineți că, de asemenea, puteți seta modul tabular programat, după cum sa discutat mai devreme.
Acum, aruncăm o privire asupra modului în care înlocuiți textul cu tab-uri cu pictograme.
class MainActivity: AppCompatActivity () suprascrie fun onCreate (savedInstanceState: Bundle?) // ... tabLayout.setupWithViewPager (viewPager) tabLayout.getTabAt (0) !!. setIcon (android.R.drawable.ic_dialog_email) tabLayout.getTabAt (1 ) setIcon (android.R.drawable.ic_dialog_info) tabLayout.getTabAt (2) !!. setIcon (android.R.drawable.ic_dialog_alert) // ... // ...
Aici am sunat getTabAt () pe un exemplu de TabLayout. Apelarea acestei metode va returna fila la indexul specificat. Apoi, sunăm setIcon (). Apelarea acestei metode va seta pictograma afișată în această filă.
De asemenea, am setat modul de file pentru a fi fixat.
Încă mai suprascrie getPageTitle () în interiorul SampleAdapter.
(fm) // ... suprascrie distracție getPageTitle (poziție: Int): CharSequence = când (poziție) 0 -> "TAB 1" 1 -> "TAB 2" TAB 3 "altceva ->" " // ...
Iată rezultatul:
Acum, dacă doriți doar pictogramele, pur și simplu nu suprascrieți getPageTitle ().
În loc să scrieți atât de multe coduri doar pentru a crea o interfață tabelară sau o activitate de la zero, aplicația Android Studio 3.0 are câteva șabloane de cod pre-existente (disponibile în Java și Kotlin) pentru a vă ajuta să vă lansați proiectul. Un astfel de șablon poate fi utilizat pentru a crea o activitate cu tab-uri.
Vă vom arăta cum să utilizați această caracteristică la îndemână în Android Studio 3.
Pentru un nou proiect, lansați Android Studio 3.
Introduceți numele aplicației și faceți clic pe Următor → buton.
Puteți lăsa setările implicite așa cum sunt în Direcționați dispozitive Android dialog. Apasă pe Următor → butonul din nou.
În Adăuga o activitate pentru mobil dialog, derulați în jos și selectați Activitatea cu file. Apasă pe Următor → după aceea.
În ultimul dialog, derulați în jos până la Stilul de navigare drop-down și selectați Tab-uri de bare de acțiune (cu ViewPager). În cele din urmă, faceți clic pe finalizarea pentru a accepta toate configurațiile.
Android Studio ne-a ajutat acum să creăm un proiect cu o activitate tabulară. Foarte cool!
Vă recomandăm cu tărie să explorați codul generat.
Într-un deja existent proiect Android Studio, pentru a utiliza acest șablon, mergeți pur și simplu la Fișier> Activitate> Activitate cu file. Și urmați pașii asemănători descriși anterior.
Șabloanele care sunt incluse în Android Studio sunt potrivite pentru layout-uri simple și pentru realizarea de aplicații de bază, dar dacă doriți să vă lansați aplicația chiar mai departe, puteți lua în considerare unele dintre șabloanele de aplicații disponibile de la Envato Market.
Sunt un economizor de timp uriaș pentru dezvoltatorii cu experiență, ajutându-i să-și taie slogul de a crea o aplicație de la zero și să-și concentreze talentele în schimb pe părțile unice și personalizate ale creării unei noi aplicații.
În acest tutorial, ați învățat cum să creați o interfață cu file în Android utilizând TabLayout și ViewPager API de la zero. De asemenea, am explorat cum să utilizați cu ușurință și rapid șabloanele Android Studio pentru a crea o interfață cu file.
Vă recomandăm să consultați instrucțiunile oficiale de proiectare pentru tab-uri pentru a afla mai multe despre cum să creați și să utilizați corect fișiere în Android.
Pentru a afla mai multe despre codificarea pentru Android, consultați câteva dintre celelalte cursuri și tutoriale de aici, pe Envato Tuts+!
