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

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)

常用方法

• 设置选项卡中展示和选中的内容集合：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)

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)

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)