如何在devise支持库的TabLayout中的Tabs之间设置分隔符？

我正在使用v7-appcompat库的新的android.support.design.widget.TabLayout ，并发现一个问题，没有办法设置标签之间的分隔线，不知道是否有。

我已经成功地configuration了寻呼机适配器和标签看起来不错，但不能设置标签之间的分隔线。

我想要这种types的选项卡

 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方法添加分隔Tab ：

 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_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" /> 

select标签文本颜色（tab_item_selector.xml）的select器：

 <?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实际上是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); } 

Answer 3

默认的标签devise应该按照材料devise规格 。 如果您需要添加分隔线，请考虑使用标签的自定义视图。

检查这个链接 ，你只能控制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 4

嗨，你可以尝试这个解决方法，我做了如下：

1 – 创build正常的标签布局。

2 – 使模式MODE_FIXED

2-在framellayout中添加它，并在上面添加线性布局。

在水平布局中添加3个button作为您的选项卡的数量，并使button等于大小layout_wight = 1为每个button。

4 – 使button背景透明。

3 – 通过视图或任意视图在button的水平线性布局布局中添加spertator，并指定宽度为0.5dp或者任何你想要的厚度。

4，你可以在button上添加button，或者将button更改为任何不能处理点击的视图，所以它下面的选项卡将采取点击操作:)。

它可能是丑陋的solutuions，但它的工作完美，做这项工作

另一个提示，如果你想改变选定的选项卡的背景，你可以在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 5

试试这个，希望它适合你。

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 6

不是最好的，但我用当前的替代方式。

在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); } 

设置标签

私人无效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(); } } } 

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="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 7

我不认为这是可能的，但除非在创buildTab时指定一个customView并添加你的divider， 一个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 8

尝试使用此代码来设置divder中的mTabHost.getTabWidget().setDividerDrawable(R.Color.blue);

Answer 9

添加自定义分隔线的一种方法是以编程方式设置它：

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

不过，请确保在设置选项卡的内容之前调用此选项。 如果我之后打电话，它会撞上我的。

如果这不起作用，也可以使用这一行

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