2015-09-25 11 views
7

Il TabLayout è abbastanza utile per creare una scheda scorrevole per viewpager, eccetto che non c'è modo di aggiungere una linea verticale tra le schede come TabHost nel codice o xml fino a Lo so, quindi c'è un altro modo per farlo con facilità?C'è un modo per aggiungere una linea verticale tra ogni scheda in TabLayout

+0

Si può provare il collegamento sotto per risolvere il tuo problema. Link: http://stackoverflow.com/questions/32204184/how-to-set-the-divider-between-tabs-in-tablayout-of-design-support-library?lq=1 – KishuDroid

risposta

34

TabLayout è in realtà un LinearLayout scorrevole orizzontale.

Basta usare seguente codice per aggiungere i divisori:

LinearLayout linearLayout = (LinearLayout)tabLayout.getChildAt(0); 
    linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE); 
    GradientDrawable drawable = new GradientDrawable(); 
    drawable.setColor(Color.GRAY); 
    drawable.setSize(1, 1); 
    linearLayout.setDividerPadding(10); 
    linearLayout.setDividerDrawable(drawable); 
+1

bella soluzione, meglio dell'aggiunta di viste personalizzate. Grazie! – Tooroop

+1

meglio dell'aggiunta di viste personalizzate Grazie –

+0

Questa soluzione funziona per me, ma è anche possibile aggiungere un divisore prima del primo elemento, anche se ho impostato show_divider_middle. –

0

C'è un modo per aggiungere divisorio utilizzando il metodo Tab setCustomView:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout); 
tabLayout.setupWithViewPager(viewPager); 

for (int i = 0; i < tabLayout.getTabCount(); i++) { 
    TabLayout.Tab tab = tabLayout.getTabAt(i); 
    RelativeLayout relativeLayout = (RelativeLayout) 
     LayoutInflater.from(this).inflate(R.layout.tab_layout, tabLayout, false); 

    TextView tabTextView = (TextView) relativeLayout.findViewById(R.id.tab_title); 
    tabTextView.setText(tab.getText()); 
    tab.setCustomView(relativeLayout); 
    tab.select(); 
} 

layout di scheda personalizzata con il divisore (tab_layout.xml):

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" > 

<!-- Tab title --> 
<TextView 
android:id="@+id/tab_title" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:gravity="center" 
android:textColor="@drawable/tab_item_selector"/> 

<!-- Tab divider --> 
<View 
android:layout_width="1dp" 
android:layout_height="match_parent" 
android:layout_alignParentLeft="true" 
android:background="@android:color/black" /> 
</RelativeLayout> 

Set TabLayout scheda padding orizzontale 0DP:

<android.support.design.widget.TabLayout 
    android:id="@+id/tablayout" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/shape_tabbar_background" 
    app:tabIndicatorColor="@android:color/white" 
    app:tabIndicatorHeight="4dp" 

    app:tabPaddingStart="0dp" 
    app:tabPaddingEnd="0dp" /> 

e un selettore per la scheda colore del testo del titolo quando è selezionata (tab_item_selector.xm l):

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_selected="true" android:color="@color/abc_primary_text_material_dark" /> 
<item android:state_focused="true" android:color="@color/abc_primary_text_material_dark" /> 
<item android:state_pressed="true" android:color="@color/abc_primary_text_material_dark" /> 
<item android:color="@color/abc_secondary_text_material_dark" /> 
</selector> 

consultare questo link per maggiori: https://stackoverflow.com/a/32416751/3134215

+0

Ma la la linea verticale si attaccherà vicino al lato sinistro del testo e, il padding non lo renderà centrale tra le schede. –

0

provare questo,

È possibile aggiungere manualmente la linea nel file di layout tab_indicator.

per la linea orizzontale,

<View 
    android:layout_height="1dp" 
    android:id="@+id/line" 
    android:layout_width="fill_parent" 
     android:background="your color" /> 

e per la linea verticale

<View 
    android:layout_height="7dp" 
    android:id="@+id/line" 
    android:layout_width="1dp" 
     android:background="your color" /> 
Problemi correlati