TabLayout代替PagerSlidingTabScrip or viewpagerIndicator-优快云博客

本文链接：https://blog.youkuaiyun.com/linhunshi/article/details/51452672

本文介绍如何在Android应用中自定义TabLayout的样式和属性，包括配置步骤、XML布局示例及Java代码实现，帮助开发者更好地集成TabLayout组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：配置

1、build.gradle中添加

compile 'com.android.support:design:23.0.1'

2、在values-->style文件中添加

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">#FF4081</item>
</style>
二：简单实例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tl_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/MyCustomTabLayout"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_tabindicate"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

import com.zhang.demo1.adapter.TabIndicateAdapter3;

import java.util.ArrayList;
import java.util.List;

public class TabLayoutActivity extends FragmentActivity {
   private ViewPager vp_tabindicate;
   private TabIndicateAdapter3 adapter;
   private List<String> data;
   private TabLayout tl_tablayout;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      try{
         setContentView(R.layout.activity_tab_indicate3);
         vp_tabindicate = (ViewPager) findViewById(R.id.vp_tabindicate);
         tl_tablayout= (TabLayout) findViewById(R.id.tl_tablayout);
         adapter = new TabIndicateAdapter3(this);
         data = new ArrayList<String>();
         for (int i = 0; i <3; i++) {
            data.add("qwe" + i);
         }
         adapter.setList(data);
         vp_tabindicate.setAdapter(adapter);
         tl_tablayout.setupWithViewPager(vp_tabindicate);//必须在setAdapter之后设置
//       adapter.notifyDataSetChanged();
      }catch (Exception e){
         MyLog.e("TabLayoutActivity---",e.toString());
      }

      
   }
}
三：sytle
<style name="CustomTabLayout" parent="@style/Widget.Design.TabLayout">
    <item name="tabIndicatorColor">#FF4081</item>
</style>
四：TabLayout自定义属性
 <declare-styleable name="TabLayout">
    <attr format="color" name="tabIndicatorColor"/>
    <attr format="dimension" name="tabIndicatorHeight"/>
    <attr format="dimension" name="tabContentStart"/>
    <attr format="reference" name="tabBackground"/>
    <attr name="tabMode">
        <enum name="scrollable" value="0"/>
        <enum name="fixed" value="1"/>
    </attr>
    <attr name="tabGravity">
        <enum name="fill" value="0"/>
        <enum name="center" value="1"/>
    </attr>
    <attr format="dimension" name="tabMinWidth"/>
    <attr format="dimension" name="tabMaxWidth"/>
    <attr format="reference" name="tabTextAppearance"/>
    <attr format="color" name="tabTextColor"/>
    <attr format="color" name="tabSelectedTextColor"/>
    <attr format="dimension" name="tabPaddingStart"/>
    <attr format="dimension" name="tabPaddingTop"/>
    <attr format="dimension" name="tabPaddingEnd"/>
    <attr format="dimension" name="tabPaddingBottom"/>
    <attr format="dimension" name="tabPadding"/>
</declare-styleable>
1、tabGravity:fill--填充整个tabLayout布局   center--居中显示tabLayout布局
2、tabMode:fixed--固定的   scollable--tab比较多的情况下可滑动显示（设置成这个属性，tab会左边对齐）
备注：

异常1：Error inflating class android.support.design.widget.TabLayout

解决方式：

1、添加配置中第二项

2、在Tablayout中添加style