Modul de interfață pentru utilizator Android vizionarea pe orizontală

Poate că ați văzut unele dintre noile caracteristici ale interfeței de utilizator disponibile ca parte a pachetului de compatibilitate Android. O astfel de caracteristică, paginarea cu vizualizare orizontală, permite ca stânga și dreapta să fie ușor de încărcat pentru a încărca diferite ecrane (pagini), controlate de o singură activitate. Această caracteristică a fost prezentată în mai multe aplicații de profil înalt, cum ar fi aplicația Android Market și clientul Google+ pentru Android.

Există o serie de clase în pachetul de compatibilitate Android care poate fi folosit pentru implementarea comportamentului orizontal de derulare a paginilor în pachetele Android. Controlul ViewPager (android.support.v4.view.ViewPager) oferă comportamentul orizontal de derulare. Poate fi folosit în cadrul planșelor mult mai mult ca o galerie sau alt control de interfață cu utilizatorul adaptabil. Clasa PagerAdapter (android.support.v4.view.PagerAdapter) este utilizată pentru a defini datele afișate de controlul ViewPager. Astăzi vom examina un exemplu simplu de utilizare a acestor clase pentru a furniza un comportament rapid.


Pasul 0: Începeți

Oferim codul sursă complet pentru aplicația de probă discutată în acest tutorial. Puteți descărca codul sursă de probă pe care îl furnizăm pentru examinare.


Pasul 1: Utilizați pachetul de compatibilitate

Vizualizarea paginilor orizontale se bazează pe API-uri disponibile numai cu pachetul de compatibilitate Android v4, Revizia 3; aceste API-uri nu sunt disponibile în versiunea SDK standard Android. Prin urmare, va trebui să adăugați pachetul de compatibilitate Android pentru proiectul dvs. Android pentru a accesa API-urile corespunzătoare.

Pentru a adăuga pachetul de compatibilitate Android la proiectul Eclipse Android, faceți clic dreapta pe proiect în Project Explorer. Alegeți Instrumente Android, Adăugați Bibliotecă de compatibilitate. Veți vedea acum fișierul android-support-v4.jar în folderul de proiecte Biblioteci Referință. Aceasta înseamnă că ați adăugat cu succes pachetul în proiectul dvs. și îl puteți începe să îl utilizați.


Pasul 2: Definiți un ViewPager

Apoi, va trebui să definiți un control ViewPager în fișierul de resurse al aspectului. În exemplul nostru simplu, actualizăm resursele layout-ului principal.xml utilizate de clasa noastră de activitate și definim un control ViewPager în cadrul acestui aspect. Acest control trebuie să facă referire la numele său complet calificat: android.support.v4.view.ViewPager.

De exemplu, aici este resursa actualizată principal.xml cu un ViewPager definit:

   

Funcțiile ViewPager dețin adesea întregul ecran, dar acest lucru nu este necesar. Pentru acest exemplu, vom afișa cinci "pagini" diferite de aspect, așa că numim controlul ViewPager printr-un identificator unic numit myfivepanelpager.


Pasul 3: Creați resurse pentru aspectul paginii

Apoi, veți dori să creați un set de resurse care vor alcătui "paginile" sau "panourile" pentru alunecări orizontale. Puteți utiliza același fișier de resurse pentru fiecare pagină și puteți adăuga conținut diferit sau puteți încărca resurse diferite de aspect pentru paginile individuale. Pentru acest exemplu, am creat cinci fișiere de resurse diferite, numite farleft.xml, left.xml, middle.xml, right.xml și farright.xml. Fiecare resursă de dispunere are conținut diferit de afișat. Conținutul fiecărei resurse de configurare depinde de dvs. Puteți utiliza controale statice sau dinamice. Pentru a păstra acest exemplu simplu, vom rămâne cu controale statice cum ar fi controalele TextView și ImageView. Pentru paginile din stânga și din extrema dreaptă vom include câteva butoane de comandă.

Această imagine prezintă cele cinci rezultate ale fișierelor cu resurse diferite:

Nu există nimic deosebit în ceea ce privește implementarea acestor fișiere de aspect. Nu uitați să implementați butoanele Button onClick din clasa Activitate. Aceste resurse de aspect vor fi încărcate de PagerAdapter la timpul de execuție pentru a fi afișate pe ecran. Pentru detalii privind implementarea, consultați codul sursă care însoțește acest proiect.


Pasul 4: Implementați un adaptor Pager particularizat

Vizualizatorul dvs. are nevoie de un adaptor de date pentru a determina și a încărca conținutul corespunzător pentru fiecare pagină pe care o accesează utilizatorul. Am numit paginile noastre de fișiere de resurse de aspect? în ordinea pe care dorim să o afișeze, de la extrema stângă la extrema dreaptă.

Când extindeți clasa PagerAdapter, va trebui să implementați mai multe metode cheie.

În primul rând, va trebui să definiți dimensiunea intervalului de paginare. În acest caz, avem un set de cinci pagini pentru afișare. Prin urmare, veți dori metoda getCount () din clasa MyPagerAdapter pentru a returna o dimensiune a paginii de 5.

Apoi, trebuie să implementați metoda instantiateItem () pentru a umfla fișierul cu resurse adecvate pentru aspect, în funcție de poziția glisantă a utilizatorului. Cea mai îndepărtată pagină din stânga este în poziția 0, următoarea pagină din dreapta este poziția 1 și așa mai departe. Metoda instantiateItem () utilizează serviciul LayoutInflater pentru a umfla aspectul specific și a adăuga-o la colecția utilizată de ViewPager.

Această imagine prezintă cele cinci fișiere de resurse diferite de structură și pozițiile lor? în termenii de ordine de paginare:

Ultima metodă importantă pe care trebuie să o implementați este metoda destroyItem (), care elimină aspectul specific din colecția utilizată de ViewPager atunci când nu mai este afișată.

Iată o implementare de bază pentru un adaptor pager orizontal de cinci pagini, numit MyPagerAdapter, care implementează aceste metode de bază, precum și câteva altele:

clasa privată MyPagerAdapter extinde PagerAdapter public int getCount () return 5;  public Object instantiateItem (Vizualizare colecție, poziție int) LayoutInflater inflater = (LayoutInflater) collection.getContext () .getSystemService (Context.LAYOUT_INFLATER_SERVICE); int resId = 0; comutator (poziție) caz 0: resId = R.layout.farleft; pauză; cazul 1: resId = R.layout.left; pauză; cazul 2: resId = R.layout.middle; pauză; cazul 3: resId = R.layout.right; pauză; cazul 4: resId = R.layout.farright; pauză;  Vizualizare vedere = inflater.inflate (resId, null); (Colecția (ViewPager)) .addView (vizualizare, 0); retur;  @Overide public void destroyItem (Vizualizare arg0, int arg1, Obiect arg2) ((ViewPager) arg0) .removeView ((Vizualizare) arg2);  @Override public boolean isViewFromObject (View arg0, Object arg1) retur arg0 == (Vizualizare) arg1);  @Override public Parcelable saveState () return null; 

Pasul 5: Legați MyPagerAdapter

În cele din urmă, trebuie să actualizați metoda onCreate () a clasei dvs. de activitate pentru a vă lega MyPagerAdapter la controlul ViewPager definit în fișierul de resurse al layoutului principal.xml.

De asemenea, puteți lua acest timp pentru a seta poziția inițială a pagerului. În mod implicit, ar începe la poziția 0 (planul din stânga cu butonul de control simplu). Cu toate acestea, dorim să permitem utilizatorului să gliseze spre stânga și spre dreapta pentru a seta poziția inițială a ViewPager la aspectul de mijloc (maimuța din mijloc) folosind metoda setCurrentItem ().

@Override publice void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main); Adaptor MyPagerAdapter = noul MyPagerAdapter (); ViewPager myPager = (VizualizarePager) findViewById (R.id.myfivepanelpager); myPager.setAdapter (adaptor); myPager.setCurrentItem (2); 

Acum, dacă executați aplicația dvs., veți începe cu maimuța în mijlocul paginii și puteți să glisați două pagini la stânga sau la dreapta, după cum se arată aici:


Concluzie

Controlul interfață cu interfața cu utilizatorul cu vedere orizontală este un control ușor de interfață cu utilizatorul pus la dispoziția dezvoltatorilor Android prin pachetul de compatibilitate Android. Datele pentru paginile individuale? este gestionat de un adaptor de date special numit PagerAdapter. Există, de asemenea, clase în cadrul bibliotecii de compatibilitate pentru construirea adaptoarelor de date compatibile cu fragmente pentru a controla controalele ViewPager.

Cod