Android Design Support Library - TabLayout的用法

原创
2017/01/14 19:17
阅读数 567

TabLayout provides a horizontal layout to display tabs. TabLayout提供了一个水平的布局用来展示Tabs。

特别说明

Caused by: java.lang.IllegalArgumentException: You need to use a Theme.AppCompat theme (or descendant) with the design library.

在清单文件中设置如下代码即可:

android:theme="@style/Theme.AppCompat"

基本使用

  1. 纯布局实现
     <android.support.design.widget.TabLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 1"/>
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 2"/>
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 3"/>
    </android.support.design.widget.TabLayout> 
  1. 布局+代码实现 布局文件:
<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:tabIndicatorColor="@color/white"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/gray"
        app:tabTextColor="@color/white" />

代码中:

TabLayout abLayout= (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

这两种实现方式,都能达到效果。

属性设置

颜色

  • 选中字体的颜色
app:tabSelectedTextColor="@android:color/holo_orange_light"
  • 未选中字体的颜色
app:tabTextColor="@color/colorPrimary"
  • 指示器下标的颜色
app:tabIndicatorColor="@android:color/holo_orange_light"
  • 整个TabLayout的颜色
app:tabBackground="color"

其他属性设置

  • 设置文字的外貌
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"
  • 改变指示器下标的高度
app:tabIndicatorHeight="4dp"
  • 添加图片
tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));
  • Tab的模式
<!-- 默认是fixed:固定tabs,并同时显示所有的tabs。scrollable:可滚动tabs,显示一部分tabs,在这个模式下能包含长标签和大量的tabs -->
app:tabMode="scrollable"
  • Padding 设置Tab内部的子控件的Padding
app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"

设置整个TabLayout的Padding

app:paddingEnd="xxdp"
app:paddingStart="xxdp"
  • 内容的显示模式
app:tabGravity="center"//居中,如果是fill,则是充满
  • Tab的宽度限制
app:tabMaxWidth="xxdp"
app:tabMinWidth="xxdp"
  • Margin
// TabLayout开始位置的偏移量
app:tabContentStart="100dp"
  • 监听事件
OnTabSelectedListener()
setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {
@Override
public voidonTabSelected(TabLayout.Tab tab) {
//选中了tab的逻辑
}
@Override
public voidonTabUnselected(TabLayout.Tab tab) {
//未选中tab的逻辑
}
@Override
public voidonTabReselected(TabLayout.Tab tab) {
//再次选中tab的逻辑
}
});
  • ViewPager的联动
setupWithViewPager(Viewpager);

效果图

效果图

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部