Android---自定义ViewPager指示器（一）

最新推荐文章于 2024-04-28 17:19:13 发布

yeluoweiluo615

最新推荐文章于 2024-04-28 17:19:13 发布

阅读量388

点赞数

CC 4.0 BY-SA版权

分类专栏： Android 学习笔记文章标签： viewpager

本文链接：https://blog.youkuaiyun.com/yeluoweiluo615/article/details/52860158

Android 学习笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何自定义绘制ViewPager指示器的全过程，包括创建自定义类、初始化绘图工具、实现指示器随页面滑动联动及tab高亮显示等功能。

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

 最近学习了怎么自己画Viewpager指示器的形状。

新创建一个ViewPagerIndicator类继承自LinearLayout
- 初始化Paint实例
在它的含有两个参数的构造方法内初始化要画的图形所需要的工具，例如：我们要画一个三角形。首先我们要有一个paint类实例上代码：

 public ViewPagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);

        //@ parseColor
        // * Parse the color string, and return the corresponding color-int.
        mPaint.setColor(Color.parseColor("#FFFFFFFF"));

        mPaint.setStyle(Paint.Style.FILL);

        mPaint.setPathEffect(new CornerPathEffect(3));

覆写onSizeChanged(int w, int h, int oldw, int oldh)这个方法会在View 的大小发生变化的时候调用，所以在这里设置三角形的长和宽并且初始化三角形。

mTriangleWidth = (int) (w / mTabVisibleCount *                  RADIO_TRIANGLE);
mTriangleHeight = mTriangleWidth / 2;

mInitTanslateX = w / 2 / mTabVisibleCount - mTriangleWidth / 2;

initTriangle();

画三角形的时候要用到path

 mPath = new Path();
        //@param x The x-coordinate of the start of a new contou(新轮廓)
        mPath.moveTo(0, 0);

        mPath.lineTo(mTriangleWidth, 0);

        mPath.lineTo(mTriangleWidth / 2, -mTriangleHeight);

        mPath.close();

-覆写ondispatch方法。在这个方法里绘制三角形

@Override
    protected void dispatchDraw(Canvas canvas) {

        canvas.save();

        //画笔的起点位置
        canvas.translate(mInitTanslateX + mTranslateX, getHeight());

        canvas.drawPath(mPath, mPaint);

        canvas.restore();

        super.dispatchDraw(canvas);
        Log.d(TAG, "dispatchDraw: ");
    }

这样三角形的画出来了，但是现在这个三角形还不可以跟随页面滑动而动。

2.实现指示器跟随手指联动

需要addOnPageChangeListener,内部new 一个ViewPager.OnPageChangeListener()，在它的onpageScrolled这个回调方法里写怎么跟随手指移动的方法，如下：

int tabWidth = getWidth() / mTabVisibleCount;
        mTranslateX = (int) (tabWidth * (position + positionOffset));
        //tabwidth 跟着一起联动
        if (position >=mTabVisibleCount - 2 && positionOffset > 0 &&
                getChildCount() > mTabVisibleCount) {
            if (mTabVisibleCount != 1) {
                //隐藏的position
                int hidTabCount = position - (mTabVisibleCount - 2);
                this.scrollTo(
                        (hidTabCount * tabWidth + (int) (tabWidth * positionOffset)), 0);
            } else {
                this.scrollTo((position * tabWidth + (int) (tabWidth * positionOffset)), 0);

            }

        }
        invalidate();

3.实现tab高亮显示和点击事件

首先写好一个设置tab文字高亮的方法，然后将其加到 onPageSelected内，意思是，到当前页被选中时，tab文字变高亮。
点击时间在创建tab的时候调用。这个添加到自动创建tab 的方法内，和加载完xml文件后的方法内（这个在下篇文章中详细讲）.

private void highLightTextView(int position){
        resetTextViewColor();
        View view = getChildAt(position);

        if (view instanceof TextView){
            ((TextView) view).setTextColor(TEXT_COLOR_LIGHT);
        }

private void setTabOnclick() {
        int size = getChildCount();
        for (int i = 0; i < size; i++) {
            View view = getChildAt(i);
            final int j = i;
            if (view instanceof TextView) {
                view.setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        mViewPager.setCurrentItem(j);
                    }
                });
            }
        }
    }