TabLayout属性详解

墨蓝 2022-06-08 03:48 766阅读 0赞

#### TabLayout的基本使用方式 ####

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

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

添加jar包：

compile 'com.android.support:design:26.0.0-alpha1'

效果图：

![Center][]

方式一：

1.在布局中加入该控件：

<android.support.design.widget.TabLayout android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        
    </android.support.design.widget.TabLayout>

2.在代码中：

tabLayout = findViewById(R.id.tab_layout);

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
    
    tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
    
    tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

#### 3.改变下TabLayout的颜色 ####

1.改变选中字体的颜色

app:tabSelectedTextColor="@color/colorPrimary"

2.改变未选中字体的颜色

app:tabTextColor="@android:color/tertiary_text_light"

3.改变指示器下标的颜色

app:tabIndicatorColor="@color/colorPrimary"

4.改变整个TabLayout的颜色

app:tabBackground="@color/colorAccent"

5. 改变TabLayout内部字体大小

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"

6.设置指示器下标的高度

app:tabIndicatorHeight="3dp"

7.添加图标

tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));

8.多加几个tab，然后设置属性实现滑动

app:tabMode="scrollable"

9.设置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"

10. 内容的显示模式

app:tabGravity="center"//居中，如果是fill，则是充满

11. Tab的宽度限制

设置最大的tab宽度：

app:tabMaxWidth="xxdp"

设置最小的tab宽度：

app:tabMinWidth="xxdp"

12. Tab的“Margin”

TabLayout开始位置的偏移量：

app:tabContentStart="100dp"

13.TabLayout的监听事件

选中了某个tab的监听事件OnTabSelectedListener()：

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    
        @Override public void onTabSelected(TabLayout.Tab tab) {
    
            //选中了tab的逻辑 }
    
        @Override public void onTabUnselected(TabLayout.Tab tab) {
    
            //未选中tab的逻辑 }
    
        @Override public void onTabReselected(TabLayout.Tab tab) {
    
            //再次选中tab的逻辑 }
    
    });

14.和ViewPager的联动

tabLayout.setupWithViewPager(Viewpager);

15.默认选中某项

tablayout.getTabAt(position).select();

[Center]: /images/20220608/bbf8f8c444a54d45b0c0a1114d1c01f2.png