2013-08-28 12 views
11

Come posso modificare a livello di programmazione l'indicatore di tabulazione selezionato della mia barra delle azioni? Ho letto di tab styling, e Tab.setCustomView() metodo, ma nessuno di questi aiuti:È possibile modificare l'indicatore della scheda della barra delle azioni a livello di programmazione

  • Con gli stili scheda, posso cambiare il colore dell'indicatore, ma rimarrà per tutte le schede (voglio avere un indicatore per ogni scheda).

  • Con la visualizzazione personalizzata della scheda, ho utilizzato un layout con un TextView per il titolo della scheda e View per la gestione del colore dell'indicatore. In Java cambio lo sfondo di View in modo dinamico, ma il problema è che lo sfondo di View non corrisponde ai limiti di tabulazione.

<TextView 
    android:id="@+id/custom_tab_text" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_centerInParent="true" 
    android:layout_centerHorizontal="true" 
    android:gravity="center|center_horizontal" 
    android:textStyle="bold"/> 

<View 
    android:id="@+id/custom_tab_view" 
    android:layout_width="match_parent" 
    android:layout_height="10dp" 
    android:layout_alignParentBottom="true"/> 

qualcuno può dirmi dove I'am sbagliato? C'è un altro modo per farlo ? Grazie

+0

Ru usando il tuo background di layout genitore come android: backgrund = "@ drawable/tab_indicator" http://stackoverflow.com/q/3725692/1012284 –

+0

prova a usare 'setLeftStripDrawable' e' setRightStripDrawable' –

+0

@PadmaKumar, ho provato quello , ma i limiti di tabulazione sono maggiori del mio layout genitore. ho provato anche a impostare 'padding e marigin' a' 0dp' ma nulla. –

risposta

16

sono riuscito a realizzare quello che volevo, utilizzando @ risposta di Padma per generare i miei indicatori di tabulazione sfondi : avevo bisogno di 5 selettori: verde, giallo, blu, arancione e rosso. Così ho creato 5 xml drawables (tabs_selector_red.xml, tabs_selector_blue.xml, etc...):

tabs_selector_green.xml:

<!-- Non focused states --> 
<item android:drawable="@android:color/transparent" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/> 
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/> 

<!-- Focused states --> 
<item android:drawable="@android:color/transparent" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/> 
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/> 

<!-- Pressed --> 
<!-- Non focused states --> 
<item android:drawable="@android:color/transparent" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/> 
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/> 

<!-- Focused states --> 
<item android:drawable="@android:color/transparent" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/> 
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/> 

Ho anche creato un layer-list per ogni sfondo xml: layer_bg_selected_tabs_green.xml

<item> 
    <shape android:shape="rectangle" > 
     <solid android:color="@color/tab_green" /> 

     <padding android:bottom="5dp" /> 
    </shape> 
</item> 
<item> 
    <shape android:shape="rectangle" > 
     <solid android:color="#FFFFFF" /> 
    </shape> 
</item> 

E, infine, nel Java, accendo lo sfondo dinamico comprare usando della scheda selezionata custom view e index:

private static final int[] TABS_BACKGROUND = { 
     R.drawable.tabs_selector_orange, R.drawable.tabs_selector_green, 
     R.drawable.tabs_selector_red, R.drawable.tabs_selector_blue, 
     R.drawable.tabs_selector_yellow }; 
/* 
BLA BLA BLA 
*/ 
@Override 
public void onTabSelected(Tab tab, FragmentTransaction ft) { 
    // TODO Auto-generated method stub 
    RelativeLayout tabLayout = (RelativeLayout) tab.getCustomView(); 
    tabLayout.setBackgroundResource(TABS_BACKGROUND[tab.getPosition()]); 
    tab.setCustomView(tabLayout); 
/* ... */ 
} 

Ora aggiungiamo alcuni screenshot:

green blue red

+2

Come vedi, l'indicatore 'non corrisponde correttamente ai limiti della scheda. Se qualcuno ha un'idea per risolverlo ?! –

+0

Ottenere Java.lang.NullPontException su "tabLayout.setBackgroundResource (TABS_BACKGROUND [tab.getPosition()]);". – AndroidHacker

+0

'tabLayout' potrebbe essere nullo, fare un'altra domanda con il tuo codice, vedremo cosa sta andando storto! –

5

// vostra barra delle schede dovrebbe essere

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    style="@style/Wrap" 
    android:background="@drawable/tabs_selector" 
    android:gravity="center_horizontal|bottom" 
    android:minHeight="@dimen/size_fourty" 
    > 
    <TextView 
    android:id="@+id/custom_tab_text" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_centerInParent="true" 
    android:layout_centerHorizontal="true" 
    android:gravity="center|center_horizontal" 
    android:textStyle="bold"/> 

</RelativeLayout> 

// tuo tabs_selector.xml dovrebbe come questo

<!-- Non focused states --> 
<item android:drawable="@drawable/layer_bg_unselected_tabs" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/> 
<item android:drawable="@drawable/layer_bg_selected_tabs" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/> 

<!-- Focused states --> 
<item android:drawable="@drawable/layer_bg_unselected_tabs" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/> 
<item android:drawable="@drawable/layer_bg_selected_tabs" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/> 

<!-- Pressed --> 
<!-- Non focused states --> 
<item android:drawable="@drawable/layer_bg_unselected_tabs" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/> 
<item android:drawable="@drawable/layer_bg_selected_tabs" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/> 

<!-- Focused states --> 
<item android:drawable="@drawable/layer_bg_unselected_tabs" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/> 
<item android:drawable="@drawable/layer_bg_selected_tabs" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/> 

// tuoi layer_bg_unselected_tabs dovrebbe essere così

<item> 
    <shape android:shape="rectangle" > 
     <solid android:color="@color/red" /> 

     <padding android:bottom="2dp" /> 
    </shape> 
</item> 
<item> 
    <shape android:shape="rectangle" > 
     <solid android:color="@color/gray" /> 
    </shape> 
</item> 

// tuoi layer_bg_selected_tabs dovrebbero essere come questo

<item> 
    <shape android:shape="rectangle" > 
     <solid android:color="@color/red" /> 

     <padding android:bottom="8dp" /> 
    </shape> 
</item> 
<item> 
    <shape android:shape="rectangle" > 
     <solid android:color="@color/gray" /> 
    </shape> 
</item> 

+0

grazie ma non risolve interamente il mio problema. L'ho usato per avere i diversi sfondi 'indicator' (rosso, verde, blu, ecc ...) ma non riesco ancora a cambiarlo dinamicamente nel codice. Ho provato a cambiare lo sfondo del layout principale della scheda selezionata in 'OnTabSelected' usando il metodo' setCustomView', ma sembra non funzionare! –

+0

come rosso, verde, blu indicherà tab puoi condividere i tuoi schermi come sembra? –

+0

controlla la mia risposta! –

Problemi correlati