Android打造不一样的新手引导页面（一）

冷不防 2022-09-25 11:19 273阅读 0赞

# Android打造不一样的新手引导页面（一） #

--------------------

#### **本系列主要分为两篇博客** ####

*  **[打造不一样的新手引导页面（一）][Link 1]**
 *  **[Android打造不一样的新手引导页面（二）][Android]**

**关于页面导航器的，可以查看我的这一篇博客[仿网易新闻的顶部导航指示器][Link 2]**

本篇博客主要讲解怎样自定义一个circleIndicator控件？

下一遍博客主要讲解怎样更改ViewPager切换的效果， 预计明天晚上之前更新。

## 效果图如下 ##

![9fe4afa0gw1f70gqpy5ycg208q0gutlk.gif][]

![9fe4afa0gw1f70graawzcg208q0gu4qr.gif][]

![9fe4afa0gw1f70gs1snbyg208q0gub2c.gif][]

![9fe4afa0gw1f70guih4kxg208q0gue82.gif][]

## 1）首先我们先来看一下要怎样使用我们的circleIndicator控件 ##

其实很简单，值需要两个步骤

1） 在xml布局文件里面

2）在代码里面

mViewPager = (ViewPager) findViewById(R.id.viewPager);
    mCirclePageIndicator = (CirclePageIndicator) findViewById(R.id.circle_indicator);
    
    //注意下面初始化的顺序不可以调换
    mFragemntAdapter = new BaseFragemntAdapter(
            getSupportFragmentManager(), mFragments);
    mViewPager.setAdapter(mFragemntAdapter);
    
    //将mCirclePageIndicator与我们的mViewPager绑定在一起
    mCirclePageIndicator.setViewPager(mViewPager);

### 扩展 ###

1）在xml布局里面更改我们的样式

xmlns:app="http://schemas.android.com/apk/res-auto"
    //例如更改我们移动小圆点的颜色
    app:fillColor="#fff"
    
    
    //其他属性的更改请参考以下我们自定义的属性
    
    <declare-styleable name="CirclePageIndicator">
        
        <attr name="centered" />
        
        <attr name="fillColor" format="color" />
        
        <attr name="pageColor" format="color" />
        
        <attr name="android:orientation"/>
        
        <attr name="radius" format="dimension" />
        
        <attr name="snap" format="boolean" />
        
        <attr name="strokeColor" format="color" />
        
        <attr name="strokeWidth" />
        
        <attr name="android:background"/>
    </declare-styleable>

2）在Java代码里面动态更改

// 设置滑动的时候移动的小圆点是否跳跃
    mCirclePageIndicator.setSnap(false);
    //设置小圆点的半径
    mCirclePageIndicator.setRadius(10 * density);
    // 设置页面小圆点的颜色
    mCirclePageIndicator.setPageColor(0x880000FF);
    // 设置移动的小圆点的颜色
    mCirclePageIndicator.setFillColor(0xFF888888);
    // 设置外边框的颜色
    mCirclePageIndicator.setStrokeColor(0xFF000000);
    //设置外表框的宽度
    mCirclePageIndicator.setStrokeWidth(2 * density);

## 2）下面我们一起来看我们是怎样CircleIndicator是怎样实现的 ##

大概可以分为以下几个步骤

*  （1）继承View，在构造方法里面做一些初始化工作，包括初始化我们的自定义属性及画笔等

public CirclePageIndicator(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        if (isInEditMode()) return;
    
        //初始化自定义属性
        final Resources res = getResources();
    
        final int defaultPageColor = res.getColor(R.color.default_circle_indicator_page_color);
        final int defaultFillColor = res.getColor(R.color.default_circle_indicator_fill_color);
        final int defaultOrientation = res.getInteger(R.integer
                .default_circle_indicator_orientation);
    
      在这里省略了若干方法
    
        a.recycle();
    
        final ViewConfiguration configuration = ViewConfiguration.get(context);
        mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
    }

*  (2) 在我们的onMeasure方法里面根据方向的不同测量我们的大小

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (mOrientation == HORIZONTAL) {
            setMeasuredDimension(measureLong(widthMeasureSpec), measureShort(heightMeasureSpec));
        } else {
            setMeasuredDimension(measureShort(widthMeasureSpec), measureLong(heightMeasureSpec));
        }
    }
    
    
    /** * Determines the width of this view * * @param measureSpec A measureSpec packed into an int * @return The width of the view, honoring constraints from measureSpec */
    private int measureLong(int measureSpec) {
        int result;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
    
        if ((specMode == MeasureSpec.EXACTLY) || (mViewPager == null)) {
            //We were told how big to be
            result = specSize;
        } else {
            //Calculate the width according the views count
            final int count = mViewPager.getAdapter().getCount();
            result = (int) (getPaddingLeft() + getPaddingRight()
                    + (count * 2 * mRadius) + (count - 1) * mRadius + 1);
            //Respect AT_MOST value if that was what is called for by measureSpec
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }
    
    /** * Determines the height of this view * * @param measureSpec A measureSpec packed into an int * @return The height of the view, honoring constraints from measureSpec */
    private int measureShort(int measureSpec) {
        int result;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
    
        if (specMode == MeasureSpec.EXACTLY) {
            //We were told how big to be
            result = specSize;
        } else {
            //Measure the height
            result = (int) (2 * mRadius + getPaddingTop() + getPaddingBottom() + 1);
            //Respect AT_MOST value if that was what is called for by measureSpec
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

*  （3）提供一个setViewPager(ViewPager view)方法将我们的CirclePageIndicator 绑定在一起

@Override
    public void setViewPager(ViewPager view) {
        if (mViewPager == view) {
            return;
        }
        if (mViewPager != null) {
            mViewPager.addOnPageChangeListener(null);
        }
        if (view.getAdapter() == null) {
            throw new IllegalStateException("ViewPager does not have adapter instance.");
        }
        mViewPager = view;
        mViewPager.addOnPageChangeListener(this);
        invalidate();
    }

里面主要的逻辑简单来说就是判断我们的ViewPager是否已经设置adapter，没有的话抛出异常，接着坚挺ViewPager的PageChangListener事件。  
调用invalidate（）方法重新绘制CirclePagerIndicator

*  （4）在滑动ViewPager的 时候拿到相应的偏移量

@Override
    public void onPageScrollStateChanged(int state) {
        mScrollState = state;
    
        if (mListener != null) {
            mListener.onPageScrollStateChanged(state);
        }
    }
    
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        mCurrentPage = position;
        mPageOffset = positionOffset;
        invalidate();
    
        if (mListener != null) {
            mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
        }
    }
    
    @Override
    public void onPageSelected(int position) {
        if (mSnap || mScrollState == ViewPager.SCROLL_STATE_IDLE) {
            mCurrentPage = position;
            mSnapPage = position;
            invalidate();
        }
    
        if (mListener != null) {
            mListener.onPageSelected(position);
        }
    }

*  （5）接着在onDraw（）方法里面根据偏移量绘制我们的小圆点

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    
        if (mViewPager == null) {
            return;
        }
        final int count = mViewPager.getAdapter().getCount();
        if (count == 0) {
            return;
        }
    
        if (mCurrentPage >= count) {
            setCurrentItem(count - 1);
            return;
        }
    
        int longSize;
        int longPaddingBefore;
        int longPaddingAfter;
        int shortPaddingBefore;
        // 根据方向的不同初始化各个变量
        if (mOrientation == HORIZONTAL) {
            longSize = getWidth();
            longPaddingBefore = getPaddingLeft();
            longPaddingAfter = getPaddingRight();
            shortPaddingBefore = getPaddingTop();
        } else {
            longSize = getHeight();
            longPaddingBefore = getPaddingTop();
            longPaddingAfter = getPaddingBottom();
            shortPaddingBefore = getPaddingLeft();
        }
    
        final float threeRadius = mRadius * 3;
        final float shortOffset = shortPaddingBefore + mRadius;
        float longOffset = longPaddingBefore + mRadius;
        /** * 居中显示的时候 */
        if (mCentered) {
            longOffset += ((longSize - longPaddingBefore - longPaddingAfter) / 2.0f)
                    - ((count * threeRadius) / 2.0f);
        }
    
        float dX;
        float dY;
    
        float pageFillRadius = mRadius;
        if (mPaintStroke.getStrokeWidth() > 0) {
            pageFillRadius -= mPaintStroke.getStrokeWidth() / 2.0f;
        }
    
        //Draw stroked circles
        for (int iLoop = 0; iLoop < count; iLoop++) {
            float drawLong = longOffset + (iLoop * threeRadius);
            if (mOrientation == HORIZONTAL) {
                dX = drawLong;
                dY = shortOffset;
            } else {
                dX = shortOffset;
                dY = drawLong;
            }
            // Only paint fill if not completely transparent
            if (mPaintPageFill.getAlpha() > 0) {
                canvas.drawCircle(dX, dY, pageFillRadius, mPaintPageFill);
            }
    
            // Only paint stroke if a stroke width was non-zero
            if (pageFillRadius != mRadius) {
                canvas.drawCircle(dX, dY, mRadius, mPaintStroke);
            }
        }
    
        //下面绘制移动的实心圆
    
        float cx = (mSnap ? mSnapPage : mCurrentPage) * threeRadius;
        //根据移动的实心圆是否跳跃计算偏移量
        if (!mSnap) {
            cx += mPageOffset * threeRadius;
        }
        if (mOrientation == HORIZONTAL) {
            dX = longOffset + cx;
            dY = shortOffset;
        } else {
            dX = shortOffset;
            dY = longOffset + cx;
        }
        canvas.drawCircle(dX, dY, mRadius, mPaintFill);
    }

其实核心就是根据方向的不同绘制我们的小圆点，那些偏移量是一些数学运算而已，不过别小看这些，计算这些偏移量还是挺繁琐的。

**到此我们的源码分析为止**

--------------------

### 题外话 ###

如果各位觉得还行的话，欢迎在github上面 star或者 fork，谢谢 ，github项目地址**[ViewPagerTabIndicator][]**

**源码github参考库[ViewPagerIndicator：][ViewPagerIndicator]**

**转载请注明[原博客地址：][Link 1]**

**[源码下载地址：][ViewPagerTabIndicator]**

[Link 1]: http://blog.csdn.net/gdutxiaoxu/article/details/52263802
[Android]: http://blog.csdn.net/gdutxiaoxu/article/details/52270186
[Link 2]: http://blog.csdn.net/gdutxiaoxu/article/details/52081609
[9fe4afa0gw1f70gqpy5ycg208q0gutlk.gif]: /images/20220718/4b6a5b6458404229be53353030915b05.png
[9fe4afa0gw1f70graawzcg208q0gu4qr.gif]: /images/20220718/e59df39377ea4325b3712e6f90584fb8.png
[9fe4afa0gw1f70gs1snbyg208q0gub2c.gif]: /images/20220718/3d23962904a14e1689fdc4e2cd41e979.png
[9fe4afa0gw1f70guih4kxg208q0gue82.gif]: /images/20220718/bc2c67c60acd488eb1b6e2189c2b0e2c.png
[ViewPagerTabIndicator]: https://github.com/gdutxiaoxu/ViewPagerTabIndicator
[ViewPagerIndicator]: https://github.com/JakeWharton/ViewPagerIndicator