2015-09-25 6 views
7

TabLayout jest całkiem użyteczny budując przesuwaną zakładkę dla viewpager, ale nie ma możliwości dodania pionowej linii między kartami tak jak TabHost w kodzie lub xml aż do Wiem, więc czy jest inny sposób na zrobienie tego z łatwością?Czy istnieje sposób dodania linii pionowej między każdą z kart w TabLayout

+0

Można spróbować poniżej linku do rozwiązywania problemu. Link: http://stackoverflow.com/questions/32204184/how-to-set-the-divider-between-tabs-in-tablayout-of-design-support-library?lq=1 – KishuDroid

Odpowiedz

34

TabLayout jest faktycznie poziome przewijane LinearLayout.

Wystarczy użyć poniższy kod, żeby dodać przekładki:

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

fajne rozwiązanie, lepsze niż dodawanie niestandardowych widoków. Dzięki! – Tooroop

+1

lepsze niż dodawanie niestandardowych widoków Dziękujemy –

+0

To rozwiązanie działa dla mnie, ale dodaje także dzielnik przed pierwszym elementem, nawet jeśli ustawię show_divider_middle. –

0

Jest na to sposób, aby dodać dzielnik za pomocą metody 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(); 
} 

Tab niestandardowy układ z rozdzielaczem (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 zakładka poziomy wyściółka 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" /> 

I selektor dla koloru tytułu tabulatora, gdy jest zaznaczony (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> 

patrz link na więcej: https://stackoverflow.com/a/32416751/3134215

+0

Ale pionowa linia będzie trzymać się blisko lewej strony tekstu, a wypełnienie nie sprawi, że znajdzie się pośrodku między kartami. –

0

spróbować,

Możesz dodać ręcznie linia w pliku layoutu tab_indicator.

do linii poziomej,

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

i pionowa linia

<View 
    android:layout_height="7dp" 
    android:id="@+id/line" 
    android:layout_width="1dp" 
     android:background="your color" /> 
Powiązane problemy