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

TabControlView

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

• 演示效果

• 使用案例

1. <com.xuexiang.xui.widget.tabbar.TabControlView
2. android:id="@+id/tcv_select"
3. android:layout_width="match_parent"
4. android:layout_height="wrap_content"
5. app:tcv_defaultSelection="0"/>

7. <com.xuexiang.xui.widget.tabbar.MultiTabControlView
8. android:id="@+id/tcv_multi_select"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. app:tcv_defaultSelection="0"/>

• 属性表: (TabControlView)

常用方法

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

EasyIndicator

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

• 演示效果

• 使用案例

1. <com.xuexiang.xui.widget.tabbar.EasyIndicator
2. android:id="@+id/easy_indicator"
3. android:layout_width="match_parent"
4. android:layout_height="wrap_content"
5. app:indicator_bottom_height="3dp"
6. app:indicator_height="42dp"
7. app:indicator_isBottom_line="true"
8. app:indicator_textSize="14sp"
9. app:indicator_width="0dp" />

11. mEasyIndicator.setTabTitles(ContentPage.getPageNames());
12. mEasyIndicator.setViewPager(mViewPager, mPagerAdapter);

• 属性表: (EasyIndicator)

TabSegment

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

• 演示效果

• 使用案例

1. <com.xuexiang.xui.widget.tabbar.TabSegment
2. android:id="@+id/tabSegment"
3. android:layout_width="match_parent"
4. android:layout_height="40dp"
5. android:background="@drawable/bg_tab_panel"/>

7. for (String page : pages) {
8. mTabSegment.addTab(new TabSegment.Tab(page));
9. }
10. mTabSegment.setupWithViewPager(mContentViewPager, false);
11. mTabSegment.setMode(TabSegment.MODE_FIXED);

• 属性表: (TabSegment)

VerticalTabLayout

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

• 演示效果

• 使用案例

1. <com.xuexiang.xui.widget.tabbar.VerticalTabLayout
2. android:id="@+id/tab_layout0"
3. android:layout_width="0dp"
4. android:layout_height="match_parent"
5. android:layout_weight="1"
6. android:background="#369DE3"
7. android:visibility="visible"
8. app:vtl_indicator_color="@color/xui_config_color_white"
9. app:vtl_tab_mode="fixed" />

11. tabLayout2.setupWithViewPager(mViewPager);
12. tabLayout2.setTabBadge(2, -1);
13. tabLayout2.setTabBadge(8, -1);
14. tabLayout2.getTabAt(3)
15. .setBadge(new TabView.TabBadge.Builder().setBadgeGravity(Gravity.START | Gravity.TOP)
16. .setBadgeNumber(999)
17. .setOnDragStateChangedListener(new Badge.OnDragStateChangedListener() {
18. @Override
19. public void onDragStateChanged(int dragState, Badge badge, View targetView) {
20. if (dragState == STATE_SUCCEED) {
21. badge.setBadgeNumber(-1).stroke(0xFFFFFFFF,1,true);
22. }
23. }
24. }).build());

• 属性表: (VerticalTabLayout)