ViewPager实现选项卡

来源：互联网发布：不亦说乎和不亦乐乎编辑：程序博客网时间：2024/04/29 23:12

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

选项卡需要考虑到，字体的颜色、大小，选项卡的背景、切换选项卡时的下标；首先考虑自定义属性：新建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;    }

源码

0 0