Progettazione dell'interfaccia utente Android visualizzazione orizzontale paging

Forse hai visto alcune delle nuove funzionalità dell'interfaccia utente disponibili come parte del pacchetto di compatibilità Android. Una di queste funzionalità, la visualizzazione orizzontale del paging, consente di eseguire facilmente swipe sinistro e destro per caricare diversi schermi (pagine), controllati da una singola attività. Questa funzione è stata esposta in diverse applicazioni di alto profilo come l'applicazione Android Market e il client Android Google+.

Esistono diverse classi nel pacchetto di compatibilità Android che possono essere utilizzate per implementare il comportamento di scorrimento orizzontale delle pagine nei pacchetti Android. Il controllo ViewPager (android.support.v4.view.ViewPager) fornisce il comportamento di scorrimento orizzontale. Può essere usato all'interno dei tuoi layout in modo molto simile a un Gallery o ad un altro controllo interfaccia utente popolato da adattatore. La classe PagerAdapter (android.support.v4.view.PagerAdapter) viene utilizzata per definire i dati visualizzati dal controllo ViewPager. Oggi vedremo un semplice esempio di come utilizzare queste classi per fornire il comportamento di scorrimento.


Passaggio 0: Introduzione

Forniamo il codice sorgente completo per l'applicazione di esempio discussa in questo tutorial. Puoi scaricare il codice sorgente di esempio che forniamo per la revisione.


Passaggio 1: utilizzare il pacchetto di compatibilità

La visualizzazione orizzontale del paging si basa su API disponibili solo con il pacchetto di compatibilità Android v4, Revisione 3; queste API non sono disponibili nell'SDK standard di Android in questo momento. Pertanto, sarà necessario aggiungere il pacchetto di compatibilità Android al progetto Android per accedere alle API appropriate.

Per aggiungere il pacchetto di compatibilità Android al tuo progetto Eclipse Android, fai clic con il tasto destro del mouse sul progetto in Esplora progetti. Scegli Strumenti Android, Aggiungi libreria di compatibilità. Ora vedrai il file android-support-v4.jar nella cartella del progetto Biblioteche di riferimento. Ciò significa che hai aggiunto con successo il pacchetto al tuo progetto e ora puoi iniziare a usarlo.


Passaggio 2: definire un ViewPager

Successivamente, dovrai definire un controllo ViewPager nel file di risorse del layout. Nel nostro semplice esempio, aggiorniamo la risorsa di layout main.xml utilizzata dalla nostra classe Activity e definiamo un controllo ViewPager all'interno di quel layout. Questo controllo deve fare riferimento al suo nome completo: android.support.v4.view.ViewPager.

Ad esempio, ecco la risorsa di layout main.xml aggiornata con un ViewPager definito:

   

I controlli di ViewPager occupano spesso l'intero schermo, ma questo non deve essere il caso. Per questo esempio, mostreremo cinque diverse "pagine" di layout, quindi chiamiamo il nostro controllo ViewPager da un identificatore univoco etichettato myfivepanelpager.


Passaggio 3: creare risorse layout di pagina

Successivamente, ti consigliamo di creare una serie di risorse che costituiranno le "pagine" o "riquadri" per lo scorrimento orizzontale. È possibile utilizzare lo stesso file di risorse di layout per ciascuna pagina e aggiungere contenuto diverso oppure caricare risorse di layout completamente diverse per le singole pagine. Per questo esempio, abbiamo creato cinque file di risorse di layout separati, chiamati farleft.xml, left.xml, middle.xml, right.xml e farright.xml. Ogni risorsa di layout ha diversi contenuti da visualizzare. Il contenuto di ogni risorsa di layout dipende da te. Puoi utilizzare controlli statici o dinamici. Per mantenere questo esempio semplice, continueremo con controlli statici come controlli TextView e ImageView. Per le pagine di estrema sinistra e di estrema destra, includeremo alcuni controlli Button.

Questa immagine mostra i cinque diversi risultati del file di risorse di layout:

Non c'è nulla di speciale nell'implementazione di questi file di layout. Non dimenticare di implementare qualsiasi gestore Button onClick nella tua classe Activity. Queste risorse di layout verranno caricate dal PagerAdapter in fase di runtime per la visualizzazione sullo schermo. Per i dettagli di implementazione, vedere il codice sorgente che accompagna questo progetto.


Passaggio 4: implementare un Personalizzatore per Pager personalizzato

ViewPager richiede un adattatore dati per determinare e caricare il contenuto appropriato per ogni pagina a cui l'utente fa scorrere. Abbiamo chiamato il nostro file di risorse di layout? nell'ordine che vogliamo che vengano visualizzati, dall'estrema sinistra all'estrema destra.

Quando estendi la classe PagerAdapter, dovrai implementare diversi metodi chiave.

Innanzitutto, è necessario definire le dimensioni dell'intervallo di paging. In questo caso, abbiamo un set di cinque pagine da visualizzare. Pertanto, è necessario il metodo getCount () della classe MyPagerAdapter per restituire una dimensione di pagina di 5.

Successivamente, è necessario implementare il metodo instantiateItem () per gonfiare il file di risorse di layout appropriato, in base alla posizione di scorrimento dell'utente. La pagina più lontana a sinistra è in posizione 0, la pagina successiva a destra è la posizione 1 e così via. Il metodo instantiateItem () utilizza il servizio LayoutInflater per gonfiare il layout specifico e aggiungerlo alla raccolta utilizzata da ViewPager.

Questa immagine mostra i cinque diversi file di risorse di layout e le loro? Posizioni? nei termini dell'ordine di paging:

L'ultimo metodo importante da implementare è il metodo destroyItem (), che rimuove il layout specifico dalla raccolta utilizzata da ViewPager quando non viene più visualizzato.

Ecco un'implementazione di base per un adattatore per cercapersone orizzontale di cinque pagine, chiamato MyPagerAdapter, che implementa questi metodi core e alcuni altri:

la classe privata MyPagerAdapter estende PagerAdapter public int getCount () return 5;  public Object instantiateItem (View collection, int position) LayoutInflater inflater = (LayoutInflater) collection.getContext () .getSystemService (Context.LAYOUT_INFLATER_SERVICE); int resId = 0; switch (position) case 0: resId = R.layout.farleft; rompere; caso 1: resId = R.layout.left; rompere; caso 2: resId = R.layout.middle; rompere; caso 3: resId = R.layout.right; rompere; caso 4: resId = R.layout.farright; rompere;  Visualizza view = inflater.inflate (resId, null); (Raccolta (ViewPager)) .addView (view, 0); vista di ritorno;  @Override public void destroyItem (Visualizza arg0, int arg1, Object arg2) ((ViewPager) arg0) .removeView ((View) arg2);  @Override public boolean isViewFromObject (Visualizza arg0, Object arg1) return arg0 == ((View) arg1);  @Override public Parcelable saveState () return null; 

Passaggio 5: Bind MyPagerAdapter

Infine, devi aggiornare il metodo onCreate () della tua classe Activity per collegare MyPagerAdapter al controllo ViewPager definito nel file di risorse di layout main.xml.

Puoi anche prendere questo tempo per impostare la posizione iniziale del cercapersone. Per impostazione predefinita, si avvierebbe alla posizione 0 (il layout all'estrema sinistra con il semplice controllo Button). Tuttavia, vogliamo consentire all'utente di scorrere verso sinistra e verso destra in modo da impostare la posizione iniziale di ViewPager sul layout centrale (la scimmia nel mezzo) utilizzando il metodo setCurrentItem ().

@Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main); Adattatore MyPagerAdapter = new MyPagerAdapter (); ViewPager myPager = (ViewPager) findViewById (R.id.myfivepanelpager); myPager.setAdapter (adattatore); myPager.setCurrentItem (2); 

Ora se esegui la tua applicazione, inizierai con la scimmia nella pagina centrale, e potrai scorrere due pagine a sinistra o a destra, come mostrato qui:


Conclusione

Il controllo dell'interfaccia utente di visualizzazione orizzontale del cercapersone è un controllo intuitivo dell'interfaccia utente reso disponibile agli sviluppatori Android tramite il pacchetto di compatibilità Android. Dati per le singole pagine? è gestito da uno speciale adattatore dati chiamato PagerAdapter. Esistono anche classi all'interno della libreria di compatibilità per creare adattatori di dati compatibili con i frammenti per l'azionamento dei controlli di ViewPager.