Schede ViewPagerIndicator: Icone sopra Testo

Question

Sto usando lo ViewPagerIndicator e vorrei modificare lo stile della scheda in modo da ottenere le icone sopra il testo, anziché l'impostazione predefinita, che posiziona l'icona sul lato sinistro e il titolo a destra.

Answer 1

È possibile ottenere questo effetto modificando solo 1 riga nel codice sorgente della libreria ViewPageIndicator.

La linea da modificare è nel numero 180 nella classe TabPageIndicator all'interno del metodo addTab (almeno nella versione attuale del codice 28/05/2013)

Il file originale è

180  tabView.setCompoundDrawablesWithIntrinsicBounds(iconResId, 0, 0, 0); 

E dovresti modificarlo come segue se vuoi che l'icona vada sopra il testo.

180  tabView.setCompoundDrawablesWithIntrinsicBounds(0, iconResId, 0, 0); 

Ecco uno screenshot del cambiamento

Come probabilmente avete indovinato, ormai, si può mettere l'icona di qualsiasi parte del testo di giocare con l'iconResId all'interno dei diversi argomenti della setCompoundDrawablesWithIntrinsicBounds metodo.

Answer 2

Il motivo per cui le icone appaiono sempre sulla sinistra è a causa di questo pezzo di codice:

if (iconResId != 0) { 
    tabView.setCompoundDrawablesWithIntrinsicBounds(iconResId, 0, 0, 0); 
} 

trovano in TabPageIndicator.java

Questo fa parte di un metodo privato (addTab()), e così, non può essere modificato senza modificare la libreria stessa.

Fortunatamente, questo non è troppo difficile da fare. Assicurarsi di avere il codice ViewPagerIndicator fonte scaricato, quindi aprire TabPageIndicator.java

Se si desidera cambiare la posizione in modo permanente (come permanente come si può ottenere con una modifica del codice sorgente), modificare la posizione del iconResId nel metodo setCompoundDrawablesWithIntrinsicBounds() . Ad esempio, posizionando le icone in alto è necessario il iconResId per essere il secondo argomento del metodo.

tabView.setCompoundDrawablesWithIntrinsicBounds(0, iconResId, 0, 0); 

Se avete bisogno di qualcosa di un po 'più flessibile, mi si avvicinò con questi cambiamenti (ancora in TabPageIndicator.java) che dovrebbero funzionare. Queste modifiche sono state replicate on my GitHub, quindi c'è un esempio funzionante.

variabili membro:

/** 
* Constants to improve readability - no magic numbers. 
*/ 
public final static int LOCATION_LEFT =0; 
public final static int LOCATION_UP = 1; 
public final static int LOCATION_RIGHT = 2; 
public final static int LOCATION_BOTTOM =3; 

/** 
* Stores the location of the tab icon 
*/ 
private int location = LOCATION_LEFT; 

/** 
* Used to store the icon. 
*/ 
private int [] drawables = new int [4]; 

/** 
* Holds the value used by setCompoundDrawablesWithIntrinsicBounds used to denote no icon. 
*/ 
private static int NO_ICON = 0; 

Aggiungi questo metodo:

public void setTabIconLocation (int newLocation){ 
    if (location > LOCATION_BOTTOM || location < LOCATION_LEFT) 
     throw new IllegalArgumentException ("Invalid location"); 
    this.location = newLocation; 
    for (int x = 0; x < drawables.length;x++){ 
     drawables [x] = NO_ICON; 
    } 
} 

In addTab(), cambiare

if (iconResId != 0) { 
    tabView.setCompoundDrawablesWithIntrinsicBounds(iconResId, 0, 0, 0); 
} 

a

if (iconResId != 0) { 
    drawables [location] = iconResId; 
    tabView.setCompoundDrawablesWithIntrinsicBounds(drawables[0], drawables[1], drawables[2], drawables[3]); 
} 

attuazione non library (tratto dal codice di esempio fornito)

TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator); 
indicator.setTabIconLocation (TabPageIndicator.LOCATION_UP); 
indicator.setViewPager(pager); 

Answer 3

C'è un modo più pulito di farlo senza modificare la libreria. Basta copiare e incollare la classe TabPageIndicator nel progetto e modificare le linee evidenziate nelle altre risposte. Quindi rinomina la classe in base alle tue esigenze e usala come se fosse una TabPageIndicator.