TabBar

选项卡的作用在于将一个复杂的页面分隔成若干个标签页，实现对信息的分类和管理，使用该组件不仅可以使界面简洁大方，还可以有效地降低窗体的个数。

TabControlView

选项卡控制器，支持选项数量、样式的自定义。如果有多选需求的话（类似开关），可使用MultiTabControlView控件，支持多选，api与TabControlView相仿。

• 演示效果

• 使用案例

<com.xuexiang.xui.widget.tabbar.TabControlView
    android:id="@+id/tcv_select"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tcv_defaultSelection="0"/>
    
<com.xuexiang.xui.widget.tabbar.MultiTabControlView
    android:id="@+id/tcv_multi_select"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:tcv_defaultSelection="0"/>    

• 属性表: (TabControlView)

属性名	类型	默认值	备注
tcv_textSize	dimension	14sp	文字字体的大小
tcv_unselectedTextColor	reference	#299EE3	没选中的文字颜色
tcv_selectedTextColor	reference	Color.WHITE	选中的文字颜色
tcv_unselectedColor	reference	Color.TRANSPARENT	没选中的背景颜色
tcv_selectedColor	reference	#299EE3	选中的背景颜色
tcv_strokeWidth	dimension	1dp	边框宽度
tcv_item_padding	dimension	-1	选项间的间距
tcv_item_padding_horizontal	dimension	-1	选项卡水平间的padding
tcv_item_padding_vertical	dimension	-1	选项卡垂直间的padding
tcv_items	reference	/	选项卡中展示的内容
tcv_values	reference	/	选项卡中选中的内容
tcv_equalWidth	boolean	false	是否等宽显示
tcv_stretch	boolean	false	是否伸展开，填充整个父布局
tcv_defaultSelection	integer	-1	默认选中项的索引

常用方法

• 设置选项卡中展示和选中的内容集合：setItems(String[] itemArray, String[] valueArray)
• 设置默认选中项：setDefaultSelection(int defaultSelection)
• 设置选项卡选中状态变化监听：setOnTabSelectionChangedListener(OnTabSelectionChangedListener listener)

EasyIndicator

极简的横向Tab指示器，和ViewPager结合使用，可快速实现页面切换。

• 演示效果

• 使用案例

<com.xuexiang.xui.widget.tabbar.EasyIndicator
    android:id="@+id/easy_indicator"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:indicator_bottom_height="3dp"
    app:indicator_height="42dp"
    app:indicator_isBottom_line="true"
    app:indicator_textSize="14sp"
    app:indicator_width="0dp" />
    
mEasyIndicator.setTabTitles(ContentPage.getPageNames());
mEasyIndicator.setViewPager(mViewPager, mPagerAdapter);    
    

• 属性表: (EasyIndicator)

属性名	类型	默认值	备注
indicator_width	dimension	-1(MATCH_PARENT)	指示器的宽度
indicator_height	dimension	45px	指示器的高度
indicator_background	reference	Color.WHITE	指示器(整个Tab）的背景资源
indicator_textSize	dimension	14px	指示器文字的大小
indicator_select_textSize	dimension	14px	指示器选中时文字的大小
indicator_selected_color	color	R.attr.colorAccent	指示器选中时的背景颜色
indicator_normal_color	color	黑色	指示器未选中时的背景颜色
indicator_line_show	boolean	true	是否显示底部指示器
indicator_line_height	dimension	3	指示器底部的高度
indicator_line_color	color	R.attr.colorAccent	指示器指示线的颜色
indicator_bottom_line_color	color	R.attr.xui_config_color_separator_dark	指示器底部指示线的颜色
indicator_bottom_line_height	dimension	0	指示器底部指示线的高度
indicator_vertical_line_w	dimension	0	指示器垂直分割线的宽度
indicator_vertical_line_h	dimension	0	指示器垂直分割线的高度
indicator_vertical_line_color	color	R.attr.xui_config_color_separator_dark	指示器垂直分割线的颜色

TabSegment

用于横向多个Tab的布局，可以灵活配置Tab的样式

• 演示效果

• 使用案例

<com.xuexiang.xui.widget.tabbar.TabSegment
    android:id="@+id/tabSegment"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="@drawable/bg_tab_panel"/>
 
for (String page : pages) {
    mTabSegment.addTab(new TabSegment.Tab(page));
}
mTabSegment.setupWithViewPager(mContentViewPager, false);
mTabSegment.setMode(TabSegment.MODE_FIXED);

• 属性表: (TabSegment)

属性名	类型	默认值	备注
ts_indicator_height	dimension	2dp	指示器的高度
ts_has_indicator	boolean	true	是否显示指示器
android:textSize	dimension	16sp	文字大小
ts_indicator_top	boolean	false	指示器是否在顶端
ts_mode	enum	fixed	指示器的模式
ts_space	dimension	10dp	tab间的空隙
ts_icon_position	enum	left	图标的位置
ts_typeface_provider	string	/	文字的样式
ts_selected_color	color	R.attr.colorAccent	tab选中时的颜色
ts_normal_color	color	R.color.xui_config_color_gray_5	tab未选中时的颜色

VerticalTabLayout

用于纵向的多个Tab的布局，支持自定义样式，可支持消息小红点的设置。

• 演示效果

• 使用案例

<com.xuexiang.xui.widget.tabbar.VerticalTabLayout
    android:id="@+id/tab_layout0"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="#369DE3"
    android:visibility="visible"
    app:vtl_indicator_color="@color/xui_config_color_white"
    app:vtl_tab_mode="fixed" />
    
tabLayout2.setupWithViewPager(mViewPager);
tabLayout2.setTabBadge(2, -1);
tabLayout2.setTabBadge(8, -1);
tabLayout2.getTabAt(3)
        .setBadge(new TabView.TabBadge.Builder().setBadgeGravity(Gravity.START | Gravity.TOP)
        .setBadgeNumber(999)
        .setOnDragStateChangedListener(new Badge.OnDragStateChangedListener() {
            @Override
            public void onDragStateChanged(int dragState, Badge badge, View targetView) {
                if (dragState == STATE_SUCCEED) {
                    badge.setBadgeNumber(-1).stroke(0xFFFFFFFF,1,true);
                }
            }
        }).build());    

• 属性表: (VerticalTabLayout)

属性名	类型	默认值	备注
vtl_indicator_color	color	R.attr.colorAccent	指示器的颜色
vtl_indicator_width	dimension	3dp	指示器的宽度
vtl_indicator_corners	dimension	0	指示器圆角角度
vtl_indicator_gravity	enum	left	指示器的对齐方式
vtl_tab_margin	dimension	0	tab间的空隙
vtl_tab_mode	enum	fixed	tab的模式
vtl_tab_height	dimension	-2(WRAP_CONTENT)	tab的高度