Как установить разделитель между вкладками в TabLayout библиотеки поддержки дизайна?

Question

Я использую новую библиотеку android.support.design.widget.TabLayoutv7-appcompat, и нашел проблему, нет способа установить разделитель между вкладками, не знаю, есть ли.

Я успешно настроил адаптер пейджера, и вкладки выглядят хорошо, но не могут установить разделитель между вкладками.

Я хочу, чтобы этот тип вкладок

Tab1 | Tab2 | Tab3 

, но в настоящее время его показ

Tab1 Tab2 Tab3 

Мой XML является

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" > 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > 

     <include layout="@layout/toolbar" /> 

     <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" /> 
    </android.support.design.widget.AppBarLayout> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

</android.support.design.widget.CoordinatorLayout> 

Я добавляю вкладки этого

viewPager = (ViewPager) findViewById(R.id.viewpager); 
    viewPager.setOffscreenPageLimit(2); 
    adapter = new TabAdapterLoginActivity(getSupportFragmentManager(), 
      titles); 
    viewPager.setAdapter(adapter); 
    tabLayout = (TabLayout) findViewById(R.id.tablayout); 
    tabLayout.setupWithViewPager(viewPager); 

Answer 1

Существует способ, чтобы добавить разделитель с помощью метода 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 пользовательского макета с делителем (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> 

Вкладка Установить TabLayout горизонтального дополнение к 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" /> 

И селектор для цвета текста заголовка вкладки, когда он выбран (tab_item_selector.XML):

<?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> 

Answer 2

Один из способов добавить пользовательский делитель, чтобы установить его программно:

tablayout.getTabWidget().setDividerDrawable(R.drawable.yourdivider image name); 

Убедитесь, однако, вы называете это, прежде чем установить содержимое вкладок. Это сокрушило бы меня, если я позвоню ему.

вы также можете использовать эту строку, если это не работает

if(Build.VERSION.SDK_INT >= 11) 
    tablayout.getTabWidget().setShowDividers(TabWidget.SHOW_DIVIDER_MIDDLE); 

Answer 3

Я не думаю, что это возможно, хотя, если во время создания вкладки вы не указали customView и добавить делитель так, например; TextView и вы явно TextView.setCompoundDrawablesWithIntrinsicBounds(0, 0,(int)id_of_a_divider, 0);

как вы пытаетесь обнаружить, если его первый Tab,

if(firstTab){ 
    tabLayout.getTabAt(0).getCustomView() 
    .setCompoundDrawablesWithIntrinsicBounds(0, 0,(int)id_of_a_divider, 0); 
    //some little casting 
}else if(lastTab){ 
    //dont get any 
    tabLayout.getTabAt(index).getCustomView() 
    .setCompoundDrawablesWithIntrinsicBounds(0,0,0, 0); 
else{ 
    //the rest takes two sides, 
    tabLayout.getTabAt(index).getCustomView() 
    .setCompoundDrawablesWithIntrinsicBounds((int)id_of_a_divider 
     , 0,(int)id_of_a_divider, 0); 

я надеюсь, что вы, получите мою идею

Answer 4

По умолчанию вкладка Дизайн должен быть в соответствии с material design specs. Если вам нужно добавить разделитель, подумайте об использовании пользовательского представления для вкладки.

Проверка этого link, вы можете контролировать только ниже свойства стиля TabLayout без использования настраиваемого представления

<style name="Base.Widget.Design.TabLayout" parent="android:Widget"> 
     <item name="tabMaxWidth">@dimen/tab_max_width</item> 
     <item name="tabIndicatorColor">?attr/colorAccent</item> 
     <item name="tabIndicatorHeight">2dp</item> 
     <item name="tabPaddingStart">12dp</item> 
     <item name="tabPaddingEnd">12dp</item> 
     <item name="tabBackground">?attr/selectableItemBackground</item> 
     <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item> 
     <item name="tabSelectedTextColor">?android:textColorPrimary</item> 
    </style> 

Answer 5

попробовать использовать этот код, чтобы установить divder в TabHostmTabHost.getTabWidget().setDividerDrawable(R.Color.blue);

Answer 6

привет, вы можете попробовать это как временное решение, что я сделал следующим образом: -

1 создать нормальный tablayout.

2-делает режим MODE_FIXED

2-добавляя его в framellayout и над ней добавить линейный макет horizonytal.

3-Добавить кнопки в горизонтальном расположении как количество ваших вкладок и сделать кнопки равными по размеру layout_wight = 1 для каждой кнопки.

4-сделать кнопки фона прозрачным.

3-add spertator между кнопками в горизонтальной линейной планировке с помощью вида или anyview и указать ширину как 0.5dp или то, что вам нужно.

4-вы можете добавить или щелкнуть по кнопкам или сменить кнопку на любое представление, которое не обрабатывает щелчок, поэтому вкладка под ним примет действие click :).

это может быть некрасивыми solutuions, но это работает отлично и сделать работу

другого намек, если вы хотите изменить цвет фона выбранной вкладки можно сделать индикатор hieght в стиле tablayout Эквала фактическая высота tablayout ,

<FrameLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@android:color/transparent" 
    android:orientation="vertical"> 


    <FrameLayout 
     android:id="@+id/content_parent" 

     android:layout_width="fill_parent" 
     android:layout_height="fill_parent"> 


     <android.support.v4.view.ViewPager 
      android:id="@+id/viewpager" 
      android:layout_width="match_parent" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 

      android:background="@android:color/transparent" /> 




     <android.support.design.widget.TabLayout 
      android:id="@+id/sliding_tabs" 
      style="@style/MyCustomTabLayout" 
      android:layout_width="match_parent" 
      android:layout_height="60dp" 
      android:layout_gravity="bottom" 
      android:background="#99888888" 
      android:clickable="false" 
      android:layoutDirection="rtl" 

       /> 


     <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="0.5dp" 
      android:layout_gravity="bottom" 
      android:layout_marginBottom="60dp" 
      android:background="#60ffffff"></LinearLayout> 

     <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="60dp" 
      android:layout_gravity="bottom|right" 
      android:background="@android:color/transparent" 
      android:orientation="horizontal"> 


      <Button 
       android:id="@+id/button1" 
       android:layout_width="match_parent" 
       android:layout_height="60dp" 
       android:layout_weight="1" 
       android:background="@android:color/transparent" 
       android:clickable="true" /> 



      <LinearLayout 
       android:layout_width="0.5dp" 
       android:layout_height="60dp" 
       android:background="#60ffffff"></LinearLayout> 

      <Button 
       android:id="@+id/button2" 
       android:layout_width="match_parent" 
       android:layout_height="60dp" 
       android:layout_weight="1" 
       android:background="@android:color/transparent" 
       android:clickable="true" 

       /> 

      <LinearLayout 
       android:layout_width="0.5dp" 
       android:layout_height="60dp" 
       android:background="#60ffffff"></LinearLayout> 

      <Button 
       android:id="@+id/button3" 
       android:layout_width="match_parent" 
       android:layout_height="60dp" 
       android:layout_weight="1" 
       android:background="@android:color/transparent" 
       android:clickable="true" 

       /> 

      <LinearLayout 
       android:layout_width="0.5dp" 
       android:layout_height="60dp" 
       android:background="#60ffffff"></LinearLayout> 

      <Button 
       android:id="@+id/button4" 
       android:layout_width="match_parent" 
       android:layout_height="60dp" 
       android:layout_weight="1" 
       android:background="@android:color/transparent" 
       android:clickable="true" 

       /> 

      <LinearLayout 
       android:layout_width="0.5dp" 
       android:layout_height="60dp" 
       android:background="#60ffffff"></LinearLayout> 

      <Button 
       android:id="@+id/button5" 
       android:layout_width="match_parent" 
       android:layout_height="60dp" 
       android:layout_weight="1" 
       android:background="@android:color/transparent" 
       android:clickable="true" 

       /> 

     </LinearLayout> 

    </FrameLayout> 

и это для стиля

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> 
     <item name="tabIndicatorColor">#50000000</item> 
     <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item> 
     <item name="tabIndicatorHeight">60dp</item> 
     <item name="tabSelectedTextColor">#222222</item> 

Answer 7

попробовать это, надеюсь, что он хорошо работает для вас.

tab_activity.xml

<TabHost 
     android:id="@android:id/tabhost" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" > 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical" > 

      <TabWidget 
       android:id="@android:id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" > 
      </TabWidget> 

      <View 
       android:layout_width="match_parent" 
       android:layout_height="2dp" 
       android:background="@color/edt_footer_bg" /> 

      <FrameLayout 
       android:id="@android:id/tabcontent" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:layout_marginTop="15dp" 
       android:background="@android:color/transparent" > 
      </FrameLayout> 
     </LinearLayout> 
    </TabHost> 

home_tab.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    xmlns:mytextview="http://schemas.android.com/apk/res/com.bne" 
    android:layout_height="50dp" 
    android:layout_marginRight="2dp" 
    android:background="@color/app_bg_inner" 
    android:gravity="center" 
    android:padding="10dp" > 

    <TextView 
     android:id="@+id/text" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textColor="@drawable/tab_selector" 
     android:textSize="@dimen/txt_12" 
     mytextview:txt_custom_font="@string/RobotoRegular" /> 

</LinearLayout> 

Answer 8

Не лучший, но альтернативный способ я использовал для тока.

В main.xml

<android.support.design.widget.TabLayout 
    android:id="@+id/tabs" 
    style="@style/Base.Widget.Design.TabLayout" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@color/master_color" 
    app:elevation="0dp" 
    app:tabMode="scrollable" 
    app:tabPaddingEnd="2dp" 
    app:tabPaddingStart="0dp" 
    app:tabSelectedTextColor="@color/white" 
    app:tabTextColor="#82c6e6" /> 

я использую фрагмент и сделать в onCreate() как

if (savedInstanceState == null) { 
    replaceFragment(fragmentOne); 
} 

Set Tab

частной ничтожной setupTabLayout() {

fragmentOne = new FragmentOne(); 
    fragmentTwo = new FragmentTwo(); 

    allTabs.addTab(allTabs.newTab().setText("CURRENT YEAR"), true); 
    allTabs.addTab(allTabs.newTab().setText("2015")); 
    allTabs.addTab(allTabs.newTab().setText("2014")); 
    allTabs.addTab(allTabs.newTab().setText("2013")); 
    allTabs.addTab(allTabs.newTab().setText("2012")); 
    allTabs.addTab(allTabs.newTab().setText("2011")); 

    //Hide Indicator 
    allTabs.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.transparent)); 
    //Set Custom tab Background 
    for (int i = 1; i < allTabs.getTabCount(); i++) { 
     TabLayout.Tab tab = allTabs.getTabAt(i); 
     RelativeLayout relativeLayout = (RelativeLayout) 
       LayoutInflater.from(getActivity()).inflate(R.layout.tab_layout, allTabs, false); 
     tvTabText = (TextView) relativeLayout.findViewById(R.id.tab_title); 
     View view = (View) relativeLayout.findViewById(R.id.deviderView); 

     tvTabText.setText(tab.getText()); 
     tab.setCustomView(relativeLayout); 

     if (i == 0) { 
      view.setVisibility(View.GONE); 
      tab.select(); 
     } 
    } 

} 

табуляция _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="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:gravity="center_horizontal" 
     android:padding="10dp" 
     android:text="sdasd" 
     android:textColor="@drawable/tab_item_selector" 
     android:textSize="@dimen/text_size_normal" 
     android:textStyle="bold" /> 

    <!-- Tab divider --> 

    <View 
     android:id="@+id/deviderView" 
     android:layout_width="1dp" 
     android:layout_height="wrap_content" 
     android:layout_gravity="right" 
     android:layout_marginBottom="15dp" 
     android:layout_marginTop="15dp" 
     android:background="@android:color/white" 
     android:gravity="right" /> 

</RelativeLayout> 

tab_item_selector.xml

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

Пожалуйста, обратите внимание, как необязательного ответ всегда.

Answer 9

TabLayout Фактически HorizontalScrollView и это первый ребенок LinearLayout.

Так просто использовать ниже код для добавления делителей

View root = tabLayout.getChildAt(0); 
    if (root instanceof LinearLayout) { 
     ((LinearLayout) root).setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE); 
     GradientDrawable drawable = new GradientDrawable(); 
     drawable.setColor(getResources().getColor(R.color.separator)); 
     drawable.setSize(2, 1); 
     ((LinearLayout) root).setDividerPadding(10); 
     ((LinearLayout) root).setDividerDrawable(drawable); 
    }