自定义ViewPager的下划线指示控件

Myth丶恋晨 2023-06-22 13:41 11阅读 0赞

一个简单的自定义下划线指示控件：

public class UnderLinePagerIndicator extends View { 
        private static final int DEFAULT_SELECTED_COLOR = Color.WHITE;
        private static final int DEFAULT_UNSELECTED_COLOR = Color.BLACK;
        private static final int DEFAULT_INDICATOR_WIDTH = 65;
        private static final int DEFAULT_INDICATOR_HEIGHT = 10;
        private static final int DEFAULT_INDICATOR_DISTANCE = 10;
    
        private ViewPager mViewPager;
        private int mPageCount = -1;
        private int mCurrentPos = -1;
    
        private Paint mPaint;
        private int mSelectedColor;
        private int mUnSelectedColor;
    
        private int mIndicatorWidth;
        private int mIndicatorDistance;
        private int mIndicatorHeight;
    
        private int mWidth = -1;
        private int mHeight = -1;
        private boolean isSetViewPager = false;
        private RectF rectF = null;
    
    
        public UnderLinePagerIndicator(Context context) { 
            this(context, null);
        }
    
        public UnderLinePagerIndicator(Context context, @Nullable AttributeSet attrs) { 
            this(context, attrs, 0);
        }
    
        public UnderLinePagerIndicator(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { 
            super(context, attrs, defStyleAttr);
            init(context, attrs);
        }
    
        private void init(Context context, AttributeSet attrs) { 
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            rectF = new RectF();
            TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PageIndicator);
            mSelectedColor = array.getColor(R.styleable.PageIndicator_selectedColor, DEFAULT_SELECTED_COLOR);
            mUnSelectedColor = array.getColor(R.styleable.PageIndicator_unSelectedColor, DEFAULT_UNSELECTED_COLOR);
            mIndicatorWidth = array.getDimensionPixelSize(R.styleable.PageIndicator_indicatorWidth, DEFAULT_INDICATOR_WIDTH);
            mIndicatorHeight = array.getDimensionPixelSize(R.styleable.PageIndicator_indicatorHeight, DEFAULT_INDICATOR_HEIGHT);
            mIndicatorDistance = array.getDimensionPixelSize(R.styleable.PageIndicator_indicatorDistance, DEFAULT_INDICATOR_DISTANCE);
            array.recycle();
        }
    
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            if (isSetViewPager) { 
                setMeasuredDimension(mWidth, mHeight);
            }
    
        }
    
        @Override
        protected void onDraw(Canvas canvas) { 
            if (mPageCount <= 0) return;
            final int paddingLeft = getPaddingLeft();
            final int paddingTop = getPaddingTop();
            for (int i = 0; i < mPageCount; i++) { 
                int left;
                int right;
                if (i == 0) { 
                    left = paddingLeft;
                    right = paddingLeft + mIndicatorWidth;
                } else { 
                    left = paddingLeft + mIndicatorWidth * i + mIndicatorDistance * i;
                    right = paddingLeft + mIndicatorDistance * i + mIndicatorWidth * (i + 1);
                }
    
                int top = paddingTop;
                int bottom = paddingTop + mIndicatorHeight;
                if (mCurrentPos == i) { 
                    mPaint.setColor(mSelectedColor);
                } else { 
                    mPaint.setColor(mUnSelectedColor);
                }
                double mRadius = mIndicatorHeight/2.0;
                String s = Double.toString(mRadius);
                float f = Float.parseFloat(s);
    
                rectF.set(left,top,left+2*f,bottom);
                canvas.drawArc(rectF,90,180,false,mPaint);
    
                canvas.drawRect(left+f, top, right-f, bottom, mPaint);
    
                rectF.set(right-f*2,top,right,bottom);
                canvas.drawArc(rectF,-90,180,false,mPaint);
            }
    
    
        }
    
    
        public ViewPager getViewPager() { 
            return mViewPager;
        }
    
        public void setViewPager(ViewPager mViewPager) { 
            if (mViewPager == null) return;
            isSetViewPager = true;
            this.mViewPager = mViewPager;
            mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
    
                }
    
                @Override
                public void onPageSelected(int position) { 
                    mCurrentPos = position;
                    invalidate();
                }
    
                @Override
                public void onPageScrollStateChanged(int state) { 
    
                }
            });
            mPageCount = mViewPager.getAdapter().getCount();
            mCurrentPos = mViewPager.getCurrentItem();
            requestLayout();
            invalidate();
            mWidth = mPageCount * mIndicatorWidth + (mPageCount - 1) * mIndicatorDistance;
            mHeight = mIndicatorHeight;
    
        }
    }

attrs.xml

<declare-styleable name="PageIndicator">
        <attr name="selectedColor" format="color" />
        <attr name="unSelectedColor" format="color" />
        <attr name="indicatorWidth" format="dimension" />
        <attr name="indicatorHeight" format="dimension" />
        <attr name="indicatorDistance" format="dimension" />
    </declare-styleable>

用法：

<com.demo.app.view.UnderLinePagerIndicator
            android:id="@+id/indicator"
            android:visibility="visible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="38dp"
            app:indicatorDistance="10dp"
            app:indicatorHeight="4dp"
            app:indicatorWidth="65dp"
            app:selectedColor="@color/color_white"
            app:unSelectedColor="@color/indicator_un_select_color" />