ViewPager实现选项卡

本人小白一枚，一直对自定义控件有些恐惧，最近公司也没什么项目，打算学习下自定义控件。如下图比较简单的选项卡

选项卡需要考虑到，字体的颜色、大小，选项卡的背景、切换选项卡时的下标；首先考虑自定义属性：新建attr.xml,声明如下

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PageTabView">
        <attr name="textColor" format="color"></attr>
        <attr name="textSize" format="dimension"></attr>
        <attr name="cursor" format="reference"></attr>
        <attr name="bgColor" format="color"></attr>
    </declare-styleable>
</resources>

PageTabView继承自LinearLayout，在XML布局文件中插入控件时会调用View 的第二个构造方法，获取自定义属性的值：

private void initAttr(Context context, AttributeSet attrs, int defStyleAttr) {
        final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.PageTabView, defStyleAttr, 0);
        textSize = a.getDimensionPixelSize(R.styleable.PageTabView_textSize, DEFAULT_TEXT_SIZE);
        textColor = a.getColor(R.styleable.PageTabView_textColor, DEFAULT_TEXT_COLOR);
        bgColor = a.getColor(R.styleable.PageTabView_bgColor, DEFAULT_BACKGROUND);
        cursorDrawable = a.getDrawable(R.styleable.PageTabView_cursor);
        a.recycle();
    }

根据传入的标题长度titleList添加选项卡的数量，注意几点：第四行需要设置权重，否则选项卡的下标无法显示，ImageView的宽度必须设置额为MATCH_PARENT,否则会造成选项卡下标不居中

 private void tabLinearLayout(Context context) {
        removeAllViews();
        LinearLayout linearLayout = new LinearLayout(context);
        ViewGroup.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, 2);
        linearLayout.setLayoutParams(params);
        linearLayout.setOrientation(HORIZONTAL);
        linearLayout.setGravity(Gravity.CENTER);
        linearLayout.setBackgroundColor(bgColor);
        if (titleList == null || titleList.size() <= 0) {
            return;
        }
        for (int i = 0; i < titleList.size(); i++) {
            TextView textView = new TextView(context);
            textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize);

            textView.setTextColor(textColor);
            textView.setGravity(Gravity.CENTER);

            textView.setText(titleList.get(i));
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, 1);
            textView.setLayoutParams(layoutParams);
            //选项卡点击事件
            if (isClickEnable) {
                textView.setClickable(true);
                textView.setOnClickListener(new OnTabItemClick(i));
            } else textView.setClickable(false);

            linearLayout.addView(textView);
        }
        cursor = new ImageView(context);
        cursor.setImageDrawable(cursorDrawable);
        cursor.setScaleType(ImageView.ScaleType.MATRIX);
        cursor.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));

        addView(linearLayout);
        if (cursor != null)
            addView(cursor);

        requestLayout();
        invalidate();
    }

重要部分是计算下标的偏移量，首先计算下标两边的边距offset，第6行，当下标图片的实际宽度大于选项卡宽度的时候，将下标宽度设置为和选显卡宽度，此时的offset为0，如,bmpw为下标的宽度，每次下标移动的偏移量为one（倒数第二行）

 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        DisplayMetrics dm = getContext().getResources().getDisplayMetrics();
        int bmpw = cursorDrawable.getIntrinsicWidth();// 获取图片宽度
        int screenW = dm.widthPixels;// 获取屏幕分辨率宽度
        offset = (screenW / titleList.size() - bmpw) / 2 > 0 ? (screenW / titleList.size() - bmpw) / 2 : 0;// 计算偏移量

        Matrix matrix = new Matrix();
        matrix.postTranslate(offset, 0);

        if (bmpw > screenW / titleList.size()) {
            ViewGroup.LayoutParams params = cursor.getLayoutParams();
            params.width = screenW / titleList.size();
            cursor.setLayoutParams(params);
        }
        if (offset == 0) {
            bmpw = screenW / titleList.size();
        }
        cursor.setImageMatrix(matrix);// 设置动画初始位置
        one = offset * 2 + bmpw;
    }

源码