如何在设计支持库的 TabLayout 中设置选项卡之间的分隔符？

我使用的是新的 android.support.design.widget.TabLayout的 v7-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);
56278 次浏览
小开

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

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

但是，请确保在设置选项卡的内容之前调用这个函数。如果我事后打电话，它会崩溃的。

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

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

我不认为这是可能的，但除非在制表符创建您指定一个 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);

我希望你明白我的意思

小开

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

小开
最佳答案

有一种方法可以通过使用 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 _ layout.xml)的 Tab 自定义布局:

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

嗨，你可以试试这个解决方案，我做了如下:-

1-创建普通的 tablayp。

2-使模式 MODE _ FixED

2-添加它在框架布局和上面添加线性布局水平。

3-添加水平布局的按钮作为您的选项卡的数量，并使按钮大小相等的布局 _ 怀特 = 1为每个按钮。

4-使按钮背景透明。

3-添加按钮之间的分隔线水平线布局布局通过视图或任何视图，并指定宽度为0.5 dp 或任何厚度你想要的。

4-你可以添加你的点击按钮或改变按钮到任何其他视图，不处理点击，使标签下，它将采取点击行动:)。

这可能是丑陋的解决方案，但它的工作完美，做工作

另一个提示如果你想改变选择的标签的背景，你可以使标签布局样式的指示器高度等于标签布局的实际高度。

<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>
小开

试试这个，希望对你有用。

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>
小开

不是最好的，但可供选择的方式我用于当前。

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

设置标签

Private void 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 _ lay.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>

请考虑作为一个可选择的答案总是。

小开

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

下面是示例屏幕截图

enter image description here

enter image description here


提交答案