（原创）分享一个自定义的tablayout组件

用来控制Viewpager和头部tab栏联动的控件

如何使用

1，修改setTabs的数据源
2，可修改TextView的左右边距控制这个tab控件的长度

具体 用法：调用以下两个方法即可
setTabs()   设置头部tabs的内容
setViewPager() 设置相应的Viewpager

Xml代码如下

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/hsv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbars="none">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <LinearLayout
            android:id="@+id/ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <!-- 小光标 -->
            <View
                android:id="@+id/view"
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:background="#D6B585"/>
        </LinearLayout>


        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#8888"/>

    </LinearLayout>

</HorizontalScrollView>

Java代码如下

package tablayout;
import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.work.bokedemo.R;
import java.util.ArrayList;
import java.util.List;


 
public class TabView extends HorizontalScrollView implements View.OnClickListener {

    //滑动小光标
    private View view;
    private LinearLayout.LayoutParams layoutParams;

    //tab选项卡的线性布局
    private LinearLayout tabLinearLayout;

    private List<String> tabs;//选项卡内容
    private List<Integer> lengthList;//长度的集合
    private ViewPager viewPager;

    public TabView(Context context) {
        this(context, null);
    }

    public TabView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TabView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    /**
     * 初始化方法
     */
    private void init() {
        //当第三个参数为true时，表示布局中的所有控件直接加载到this中
        LayoutInflater.from(getContext()).inflate(R.layout.head_view, this, true);
        view = findViewById(R.id.view);
        viewPager = new ViewPager(getContext());
        layoutParams = (LinearLayout.LayoutParams) view.getLayoutParams();
        tabLinearLayout = (LinearLayout) findViewById(R.id.ll);
    }

    /**
     * 设置Tab选项卡的内容
     *
     * @param tabs
     */
    public void setTabs(List<String> tabs) {
        this.tabs = tabs;
        lengthList = new ArrayList<>();
        for (int i=0;i<tabs.size();i++) {
            TextView tv = new TextView(getContext());
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            tv.setText(tabs.get(i));
            tv.setTextSize(14);
            tv.setPadding(80, 10, 80, 10);
            tv.setLayoutParams(layoutParams);
            tv.setTag(i);
            tv.setOnClickListener(this);
            if(i==0){
                tv.setTextColor(Color.parseColor("#D6B585"));
            }else {
                tv.setTextColor(Color.parseColor("#888888"));
            }

            //测量控件
            tv.measure(0, 0);
            lengthList.add(tv.getMeasuredWidth());
            tabLinearLayout.addView(tv);
        }

        //把小光标的宽度设置为第一个TextView的宽度
        view.getLayoutParams().width = lengthList.get(0);
    }


    /**
     * 设置需要联动的ViewPager对象
     *
     * @param viewPager
     */
    public void setViewPager(ViewPager viewPager) {
        if (viewPager != null) {
            this.viewPager = viewPager;
            viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                    //计算光标需要走的距离
                    int length = 0;
                    for (int i = 0; i < position; i++) {
                        length += lengthList.get(i);
                    }

                    layoutParams.leftMargin = (int) (length + lengthList.get(position) * positionOffset);


                    //光标的宽度
                    if (position != lengthList.size() - 1) {
                        layoutParams.width = (int) (lengthList.get(position) + (lengthList.get(position + 1) - lengthList.get(position)) * positionOffset);
                    } else {
                        layoutParams.width = lengthList.get(position);
                    }
                    view.setLayoutParams(layoutParams);
                    TabView.this.smoothScrollTo(layoutParams.leftMargin - 80, 0);//这个带动画
                }

                @Override
                public void onPageSelected(int position) {
                    for(int i = 0; i < tabLinearLayout.getChildCount(); i++){
                        TextView tv = (TextView) tabLinearLayout.getChildAt(i);
                        if(i == position){
                            tv.setTextColor(Color.parseColor("#D6B585"));
                        } else {
                            tv.setTextColor(Color.parseColor("#888888"));
                        }
                    }

                }

                @Override
                public void onPageScrollStateChanged(int state) {

                }
            });
        }

    }

    @Override
    public void onClick(View v) {
        int index = (int) v.getTag();
        if (viewPager != null) {
            viewPager.setCurrentItem(index);
        }
    }
}