Share
Cosa starai creandoIl team di progettazione dei materiali di Google definisce semplicemente la funzionalità delle schede in Android come segue:
Le schede semplificano l'esplorazione e il passaggio da una vista all'altra.
In questo post imparerai come visualizzare le schede usando il TabLayout e ViewPager API. In questo tutorial pratico, tratteremo quanto segue:
Accentsconagua
TabLayout e ViewPager componenti. Un esempio di progetto per questo tutorial può essere trovato sul nostro repository GitHub in modo da poter seguire facilmente.
Per poter seguire questo tutorial, avrai bisogno di:
Puoi anche imparare tutti i dettagli del linguaggio Kotlin nella mia serie Kotlin From Scratch.
Secondo la documentazione ufficiale di Android su TabLayout, dice:
TabLayoutfornisce un layout orizzontale per visualizzare le schede.
Il TabLayout componente è uno dei componenti introdotti come parte degli artefatti di progettazione del materiale. Inoltre, è anche incluso nella libreria di supporto alla progettazione. In un TabLayout, quando viene selezionata o toccata una scheda, viene visualizzata una pagina diversa (o un frammento) all'utente.
Il TabLayout il componente può avere le sue schede visualizzate in due modi: fisso e scorrevole. Se le schede sono fisse, tutte le schede verranno visualizzate sullo schermo contemporaneamente.
Lo screenshot qui sotto è l'ultima app ufficiale di WhatsApp per Android (al momento della stesura di questo documento), che usa a TabLayout con una configurazione in modalità fissa.
Nelle schede scorrevoli, se il numero di schede diventa troppo ampio per lo schermo, l'utente può scorrere verso sinistra o destra per visualizzare più schede.
Ecco un esempio di a TabLayout con la modalità scheda scorrevole-presentata nella versione più recente dell'app Android News & Weather di Google.
Inoltre, le informazioni visualizzate in una scheda possono essere testo, un'icona o una combinazione di testo e un'icona. Ad esempio, l'ultima app di Twitter per Android utilizza icone anziché testo in ogni scheda.
Nelle sezioni seguenti, ci immergeremo nella codifica di una semplice app che fa uso di TabLayout con un ViewPager. Andiamo avanti!
Il design non è solo ciò che sembra e sembra. Il design è come funziona. - Steve Jobs
Avvia Android Studio 3 e crea un nuovo progetto (puoi chiamarlo TabLayoutDemo) con un'attività vuota chiamata Attività principale.
Creeremo a TabLayout con solo tre schede. Quando viene selezionata ciascuna scheda, viene visualizzato un diverso frammento o pagina Android. Ora creiamo i tre frammenti Android per ciascuna scheda. Iniziamo con la prima classe di frammenti e dovresti seguire un processo simile per le restanti due classi di frammenti-FragmentTwo.kt e FragmentThree.kt.
Ecco il mio FragmentOne.kt:
import android.os.Bundle import android.support.v4.app.Fragment import android.view.LayoutInflater import android.view.View import android.view.ViewGroup class FragmentOne: Fragment () override fun onCreateView (inflater: LayoutInflater ?, container: ViewGroup ?, savedInstanceState: Bundle?): View? = inflater !!. infllate (R.layout.fragment_one, container, false) oggetto companion fun newInstance (): FragmentOne = FragmentOne ()
Ecco anche il mio R.layout.fragment_one:
Per iniziare a usare TabLayout e ViewPager nel tuo progetto, assicurati di importare il supporto per la progettazione e anche l'artefatto di supporto Android, quindi aggiungili a quelli del tuo modulo build.gradle file per importarli.
dipendenze implementazione 'com.android.support:design:26.1.0' implementazione 'com.android.support:support-v4:26.1.0'
Inoltre, visita il tuo res / layout / activlty_main.xml file per includere entrambi TabLayout widget e il ViewPager vista.
Qui abbiamo creato un semplice TabLayout con id tab_layout. Nel nostro TabLayout Widget XML, puoi vedere che abbiamo incluso alcuni attributi, come ad esempio app: TABMODE essere fisso e anche app: tabGravity essere riempire. Il app: tabGravity proprietà viene utilizzata per configurare il modo in cui gli elementi della scheda verranno visualizzati in modo da occupare lo spazio disponibile. Impostiamo questo riempire, che distribuirà gli oggetti in modo uniforme su tutta la larghezza del TabLayout. Si noti che questo sarà più visibile in schermi più ampi, come i tablet.
Ho anche incluso un attributo di stile personalizzato (@ Stile / CustomTabLayout) nel nostro TabLayout widget di.
Iniziamo a personalizzare il nostro TabLayout impostando i valori degli attributi da applicare sul TabLayout. Ecco i dettagli per alcuni degli attributi applicati:
tabIndicatorColor: imposta il colore dell'indicatore di tabulazione per la scheda attualmente selezionata. Questo può anche essere impostato programmaticamente chiamando setSelectedTabIndicatorColor () a TabLayout esempio. tabIndicatorHeight: imposta l'altezza dell'indicatore di tabulazione per la scheda attualmente selezionata. Questo può anche essere impostato programmaticamente chiamando il setSelectedTabIndicatorHeight () a TabLayout esempio. tabSelectedTextColor: imposta i colori del testo per i diversi stati (normale, selezionato) usati per le schede. L'equivalente di questo attributo in Java è setTabTextColors (). Subito dopo aver creato il nostro TabLayout widget in XML, la vista successiva era a ViewPager. La documentazione ufficiale dice quanto segue ViewPager:
Gestore di layout che consente all'utente di capovolgere a sinistra ea destra tra le pagine di dati ...
Dobbiamo creare una sottoclasse in SampleAdapter.kt che estende il FragmentPagerAdapter. Questa classe è responsabile della gestione dei diversi frammenti che verranno visualizzati nelle schede.
import android.support.v4.app.Fragment import android.support.v4.app.FragmentManager import android.support.v4.app.FragmentPagerAdapter class SampleAdapter (fm: FragmentManager): FragmentPagerAdapter (fm) override fun getItem (posizione: Int ): Frammento? = when (position) 0 -> FragmentOne.newInstance () 1 -> FragmentTwo.newInstance () 2 -> FragmentThree.newInstance () else -> null override fun getPageTitle (posizione: Int): CharSequence = when (position) 0 -> "Tab 1 Item" 1 -> "Tab 2 Item" 2 -> "Tab 3 Item" else -> "" override fun getCount (): Int = 3
Qui sostituiamo tre metodi della classe genitore: getItem (), getCount (), e getPageTitle (). Ecco le spiegazioni per i metodi:
getItem (): restituisce a Frammento per una posizione particolare all'interno del ViewPager. getCount (): Indica quante pagine saranno nel ViewPager. getPageTitle (): questo metodo è chiamato da ViewPager per ottenere una stringa di titolo per descrivere la scheda specificata.Ad esempio, se la scheda selezionata è la prima scheda con il titolo "Scheda 1 elemento", un FragmentOne la pagina verrà mostrata all'utente immediatamente.
Successivamente, iniziamo a inizializzare le istanze del nostro TabLayout, ViewPager, e SampleAdapter. L'inizializzazione avverrà all'interno onCreate () nel MainActivity.kt.
import android.os.Bundle import android.support.design.widget.TabLayout import android.support.v4.view.ViewPager import android.support.v7.app.AppCompatActivity import android.support.v7.widget.Toolbar class MainActivity: AppCompatActivity () override fun onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) initToolbar () val tabLayout: TabLayout = findViewById (R.id.tab_layout) val viewPager: ViewPager = findViewById ( R.id.view_pager) val adapter = SampleAdapter (supportFragmentManager) viewPager.adapter = scheda adapterLayout.setupWithViewPager (viewPager) tabLayout.addOnTabSelectedListener (oggetto: TabLayout.OnTabSelectedListener override fun onTabSelected (scheda: TabLayout.Tab) override fun onTabUnselected ( tab: TabLayout.Tab) override fun onTabReselected (scheda: TabLayout.Tab) ) fun divertente initToolbar () val toolbar: Toolbar = findViewById (R.id.toolbar) setSupportActionBar (barra degli strumenti) supportActionBar !!. title = "TabLa la tua demo "
Abbiamo riferimenti ai nostri TabLayout e ViewPager a partire dal R.layout.activity_main e inizializzato. Abbiamo anche creato un'istanza del nostro SampleAdapter-passando un'istanza di FragmentManager come argomento. Dobbiamo fornire le opinioni per il nostro ViewPager, così abbiamo chiamato setAdapter () e passato nel nostro adattatore creato ad esso. Alla fine, abbiamo chiamato setupWithViewPager () su un'istanza di TabLayout fare un po 'di lavoro:
Quando l'utente tocca una scheda, cambia le pagine in ViewPager e mostra la pagina richiesta (o Frammento). Inoltre, scorrendo tra le pagine si aggiorna la scheda selezionata. In altre parole, questo metodo ci aiuta a gestire la modifica dello stato di scorrimento e i clic sulle schede.
Il onTabSelectedListener () viene utilizzato per includere un listener che verrà richiamato quando la selezione della scheda cambia. Abbiamo sostituito le seguenti richiamate:
onTabSelected (): attivato quando una scheda passa allo stato selezionato.onTabUnselected (): richiamato quando una scheda esce dallo stato selezionato.onTabReselected (): richiamato quando una scheda che è già selezionata viene nuovamente scelta dall'utente.Si noti che possiamo anche impostare la modalità tab in modo programmatico, anziché tramite XML del layout setTabMode () su un'istanza di TabLayout. Passiamo la modalità (fissa o scorrevole) a questo metodo come argomenti. Ad esempio, possiamo passare TabLayout.MODE_FIXED per una modalità fissa o TabLayout.MODE_SCROLLABLE per una modalità scorrevole.
tabLayout.tabMode = TabLayout.MODE_FIXED tabLayout.tabMode = TabLayout.MODE_SCROLLABLE
Si noti che se si desidera creare esplicitamente le schede anziché utilizzare il metodo helper setUpWithViewPager (), puoi invece usare nuova scheda() a TabLayout esempio.
val tabLayout: TabLayout = findViewById (R.id.tab_layout) tabLayout.addTab (tabLayout.newTab (). setText ("Songs")) tabLayout.addTab (tabLayout.newTab (). setText ("Album")) tabLayout.addTab (tabLayout.newTab (). setText ( "Artisti")) Si noti inoltre che potremmo creare esplicitamente le schede via XML anziché a livello di programmazione.
Infine, puoi eseguire l'app!
Prova a interagire con l'applicazione scorrendo verso sinistra o verso destra e toccando le schede.
Le linee guida ufficiali sulla progettazione dei materiali nelle schede indicano quanto segue sulle schede scorrevoli:
Le schede scorrevoli mostrano un sottoinsieme di schede in un dato momento. Possono contenere etichette con schede più lunghe e un numero maggiore di schede rispetto alle schede fisse. Le schede scorrevoli vengono utilizzate al meglio per esplorare i contesti nelle interfacce tattili quando gli utenti non devono confrontare direttamente le etichette delle schede.
Vediamo come creare schede con la configurazione della modalità scorrevole. Ho fatto il titolo per ciascuna scheda più a lungo di prima. Ecco il risultato in modalità fissa:
Potete vederlo TabLayout ha utilizzato più righe per visualizzare ciascuno dei titoli della scheda. In alcune situazioni, troncherà anche i titoli! Ciò crea un'esperienza utente negativa, quindi se i titoli delle schede devono essere molto lunghi, dovresti considerare l'utilizzo della modalità scorrevole. Nota anche che se hai intenzione di avere più di quattro schede, è consigliabile rendere scorrevole la modalità di tabulazione.
Cambiamo il app: TABMODE proprietà da fisso a scorrevole.
app: TABMODE = "scorrevole" />
Ricorda, puoi anche impostare la modalità tab in modo programmatico, come discusso in precedenza.
Passiamo ora a come sostituire il testo dell'elemento di tabulazione con le icone.
class MainActivity: AppCompatActivity () override 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) // ... // ...
Qui abbiamo chiamato il getTabAt () su un'istanza di TabLayout. La chiamata di questo metodo restituirà la scheda all'indice specificato. Successivamente, chiamiamo setIcon (). La chiamata a questo metodo imposterà l'icona visualizzata in questa scheda.
Ho anche impostato la modalità tab per essere riparata.
Ho ancora scavalcato il getPageTitle () dentro il SampleAdapter.
class SampleAdapter (fm: FragmentManager): FragmentPagerAdapter (fm) // ... override fun getPageTitle (posizione: Int): CharSequence = when (posizione) 0 -> "TAB 1" 1 -> "TAB 2" 2 -> " TAB 3 "else ->" " // ...
Ecco il risultato:
Ora, se vuoi solo le icone, non devi ignorare getPageTitle ().
Invece di scrivere tanto codice solo per creare un'interfaccia a schede o un'attività da zero, Android Studio 3.0 ha alcuni modelli di codice preesistenti (disponibili in Java e Kotlin) per aiutare a dare il via al tuo progetto. Un tale modello può essere utilizzato per creare un'attività a schede.
Ti mostrerò come utilizzare questa comoda funzionalità di Android Studio 3.
Per un nuovo progetto, attiva Android Studio 3.
Immettere il nome dell'applicazione e fare clic su Il prossimo pulsante.
Puoi lasciare i valori predefiniti così come sono nel Target dispositivi Android dialogo. Clicca il Il prossimo pulsante di nuovo.
Nel Inserisci un'attività al cellulare finestra di dialogo, scorrere verso il basso e selezionare Attività a schede. Clicca il Il prossimo pulsante dopo.
Nell'ultima finestra di dialogo, scorrere verso il basso fino a Stile di navigazione menu a discesa e selezionare Schede della barra delle azioni (con ViewPager). Infine, fai clic sul finire pulsante per accettare tutte le configurazioni.
Android Studio ci ha ora aiutato a creare un progetto con un'attività a schede. Veramente cool!
Si consiglia vivamente di esplorare il codice generato.
In un progetto Android Studio già esistente, per utilizzare questo modello, basta andare su File> Attività> Attività a schede. E seguire i passaggi simili descritti in precedenza.
I modelli inclusi in Android Studio sono adatti per layout semplici e applicazioni di base, ma se desideri avviare ulteriormente la tua app, potresti prendere in considerazione alcuni dei modelli di app disponibili su Envato Market.
Sono un enorme risparmio di tempo per gli sviluppatori esperti, aiutandoli a tagliare la barra della creazione di un'app da zero e concentrare i loro talenti invece sulle parti uniche e personalizzate della creazione di una nuova app.
In questo tutorial, hai imparato come creare un'interfaccia a schede in Android utilizzando il TabLayout e ViewPager API da zero. Abbiamo anche esplorato come utilizzare facilmente e rapidamente i modelli di Studio Android per creare un'interfaccia a schede.
Consiglio vivamente di verificare le linee guida sulla progettazione materiale ufficiale per le schede per ulteriori informazioni su come progettare e utilizzare correttamente le schede in Android.
Per ulteriori informazioni sulla codifica per Android, consulta alcuni dei nostri altri corsi e tutorial qui su Envato Tuts+!
