[关闭]
@xujun94 2016-08-21T08:41:47.000000Z 字数 7808 阅读 1735

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

转载请注明原博客地址：

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

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

效果图如下

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

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

1） 在xml布局文件里面

  1. <RelativeLayout
  2.     xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     >
  6.     <android.support.v4.view.ViewPager
  7.         android:layout_below="@id/rl_header"
  8.         android:id="@+id/viewPager"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  12.         android:layout_marginTop="20dp">
  14.     </android.support.v4.view.ViewPager>
  16.     <com.xujun.administrator.customviewspecif.view.CirclePageIndicator
  17.         android:id="@+id/circle_indicator"
  18.         android:layout_width="match_parent"
  19.         android:layout_height="wrap_content"
  20.         android:layout_alignParentBottom="true"
  21.         android:layout_marginBottom="20dp">
  23.     </com.xujun.administrator.customviewspecif.view.CirclePageIndicator>
  24. </RelativeLayout>

2）在代码里面

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

扩展

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

  1. xmlns:app="http://schemas.android.com/apk/res-auto"
  2. //例如更改我们移动小圆点的颜色
  3. app:fillColor="#fff"
  6. //其他属性的更改请参考以下我们自定义的属性
  8. <declare-styleable name="CirclePageIndicator">
  9.     <!-- Whether or not the indicators should be centered. -->
  10.     <attr name="centered" />
  11.     <!-- Color of the filled circle that represents the current page. -->
  12.     <attr name="fillColor" format="color" />
  13.     <!-- Color of the filled circles that represents pages. -->
  14.     <attr name="pageColor" format="color" />
  15.     <!-- Orientation of the indicator. -->
  16.     <attr name="android:orientation"/>
  17.     <!-- Radius of the circles. This is also the spacing between circles. -->
  18.     <attr name="radius" format="dimension" />
  19.     <!-- Whether or not the selected indicator snaps to the circles. -->
  20.     <attr name="snap" format="boolean" />
  21.     <!-- Color of the open circles. -->
  22.     <attr name="strokeColor" format="color" />
  23.     <!-- Width of the stroke used to draw the circles. -->
  24.     <attr name="strokeWidth" />
  25.     <!-- View background -->
  26.     <attr name="android:background"/>
  27. </declare-styleable>

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

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

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

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

  1. public CirclePageIndicator(Context context, AttributeSet attrs, int defStyle) {
  2.     super(context, attrs, defStyle);
  3.     if (isInEditMode()) return;
  5.     //初始化自定义属性
  6.     final Resources res = getResources();
  8.     final int defaultPageColor = res.getColor(R.color.default_circle_indicator_page_color);
  9.     final int defaultFillColor = res.getColor(R.color.default_circle_indicator_fill_color);
  10.     final int defaultOrientation = res.getInteger(R.integer
  11.             .default_circle_indicator_orientation);
  13.   在这里省略了若干方法
  15.     a.recycle();
  17.     final ViewConfiguration configuration = ViewConfiguration.get(context);
  18.     mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
  19. }
  2. @Override
  3. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  4.     if (mOrientation == HORIZONTAL) {
  5.         setMeasuredDimension(measureLong(widthMeasureSpec), measureShort(heightMeasureSpec));
  6.     } else {
  7.         setMeasuredDimension(measureShort(widthMeasureSpec), measureLong(heightMeasureSpec));
  8.     }
  9. }
  12. /**
  13.  * Determines the width of this view
  14.  *
  15.  * @param measureSpec A measureSpec packed into an int
  16.  * @return The width of the view, honoring constraints from measureSpec
  17.  */
  18. private int measureLong(int measureSpec) {
  19.     int result;
  20.     int specMode = MeasureSpec.getMode(measureSpec);
  21.     int specSize = MeasureSpec.getSize(measureSpec);
  23.     if ((specMode == MeasureSpec.EXACTLY) || (mViewPager == null)) {
  24.         //We were told how big to be
  25.         result = specSize;
  26.     } else {
  27.         //Calculate the width according the views count
  28.         final int count = mViewPager.getAdapter().getCount();
  29.         result = (int) (getPaddingLeft() + getPaddingRight()
  30.                 + (count * 2 * mRadius) + (count - 1) * mRadius + 1);
  31.         //Respect AT_MOST value if that was what is called for by measureSpec
  32.         if (specMode == MeasureSpec.AT_MOST) {
  33.             result = Math.min(result, specSize);
  34.         }
  35.     }
  36.     return result;
  37. }
  39. /**
  40.  * Determines the height of this view
  41.  *
  42.  * @param measureSpec A measureSpec packed into an int
  43.  * @return The height of the view, honoring constraints from measureSpec
  44.  */
  45. private int measureShort(int measureSpec) {
  46.     int result;
  47.     int specMode = MeasureSpec.getMode(measureSpec);
  48.     int specSize = MeasureSpec.getSize(measureSpec);
  50.     if (specMode == MeasureSpec.EXACTLY) {
  51.         //We were told how big to be
  52.         result = specSize;
  53.     } else {
  54.         //Measure the height
  55.         result = (int) (2 * mRadius + getPaddingTop() + getPaddingBottom() + 1);
  56.         //Respect AT_MOST value if that was what is called for by measureSpec
  57.         if (specMode == MeasureSpec.AT_MOST) {
  58.             result = Math.min(result, specSize);
  59.         }
  60.     }
  61.     return result;
  62. }
  1. @Override
  2. public void setViewPager(ViewPager view) {
  3.     if (mViewPager == view) {
  4.         return;
  5.     }
  6.     if (mViewPager != null) {
  7.         mViewPager.addOnPageChangeListener(null);
  8.     }
  9.     if (view.getAdapter() == null) {
  10.         throw new IllegalStateException("ViewPager does not have adapter instance.");
  11.     }
  12.     mViewPager = view;
  13.     mViewPager.addOnPageChangeListener(this);
  14.     invalidate();
  15. }

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

  1. @Override
  2. public void onPageScrollStateChanged(int state) {
  3.     mScrollState = state;
  5.     if (mListener != null) {
  6.         mListener.onPageScrollStateChanged(state);
  7.     }
  8. }
  10. @Override
  11. public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  12.     mCurrentPage = position;
  13.     mPageOffset = positionOffset;
  14.     invalidate();
  16.     if (mListener != null) {
  17.         mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
  18.     }
  19. }
  21. @Override
  22. public void onPageSelected(int position) {
  23.     if (mSnap || mScrollState == ViewPager.SCROLL_STATE_IDLE) {
  24.         mCurrentPage = position;
  25.         mSnapPage = position;
  26.         invalidate();
  27.     }
  29.     if (mListener != null) {
  30.         mListener.onPageSelected(position);
  31.     }
  32. }
  1. @Override
  2. protected void onDraw(Canvas canvas) {
  3.     super.onDraw(canvas);
  5.     if (mViewPager == null) {
  6.         return;
  7.     }
  8.     final int count = mViewPager.getAdapter().getCount();
  9.     if (count == 0) {
  10.         return;
  11.     }
  13.     if (mCurrentPage >= count) {
  14.         setCurrentItem(count - 1);
  15.         return;
  16.     }
  18.     int longSize;
  19.     int longPaddingBefore;
  20.     int longPaddingAfter;
  21.     int shortPaddingBefore;
  22.     //  根据方向的不同初始化各个变量
  23.     if (mOrientation == HORIZONTAL) {
  24.         longSize = getWidth();
  25.         longPaddingBefore = getPaddingLeft();
  26.         longPaddingAfter = getPaddingRight();
  27.         shortPaddingBefore = getPaddingTop();
  28.     } else {
  29.         longSize = getHeight();
  30.         longPaddingBefore = getPaddingTop();
  31.         longPaddingAfter = getPaddingBottom();
  32.         shortPaddingBefore = getPaddingLeft();
  33.     }
  35.     final float threeRadius = mRadius * 3;
  36.     final float shortOffset = shortPaddingBefore + mRadius;
  37.     float longOffset = longPaddingBefore + mRadius;
  38.     /**
  39.      * 居中显示的时候
  40.      */
  41.     if (mCentered) {
  42.         longOffset += ((longSize - longPaddingBefore - longPaddingAfter) / 2.0f)
  43.                 - ((count * threeRadius) / 2.0f);
  44.     }
  46.     float dX;
  47.     float dY;
  49.     float pageFillRadius = mRadius;
  50.     if (mPaintStroke.getStrokeWidth() > 0) {
  51.         pageFillRadius -= mPaintStroke.getStrokeWidth() / 2.0f;
  52.     }
  54.     //Draw stroked circles
  55.     for (int iLoop = 0; iLoop < count; iLoop++) {
  56.         float drawLong = longOffset + (iLoop * threeRadius);
  57.         if (mOrientation == HORIZONTAL) {
  58.             dX = drawLong;
  59.             dY = shortOffset;
  60.         } else {
  61.             dX = shortOffset;
  62.             dY = drawLong;
  63.         }
  64.         // Only paint fill if not completely transparent
  65.         if (mPaintPageFill.getAlpha() > 0) {
  66.             canvas.drawCircle(dX, dY, pageFillRadius, mPaintPageFill);
  67.         }
  69.         // Only paint stroke if a stroke width was non-zero
  70.         if (pageFillRadius != mRadius) {
  71.             canvas.drawCircle(dX, dY, mRadius, mPaintStroke);
  72.         }
  73.     }
  75.     //下面绘制移动的实心圆
  77.     float cx = (mSnap ? mSnapPage : mCurrentPage) * threeRadius;
  78.     //根据移动的实心圆是否跳跃计算偏移量
  79.     if (!mSnap) {
  80.         cx += mPageOffset * threeRadius;
  81.     }
  82.     if (mOrientation == HORIZONTAL) {
  83.         dX = longOffset + cx;
  84.         dY = shortOffset;
  85.     } else {
  86.         dX = shortOffset;
  87.         dY = longOffset + cx;
  88.     }
  89.     canvas.drawCircle(dX, dY, mRadius, mPaintFill);
  90. }

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

到此我们的源码分析为止

题外话

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

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

源码github参考库ViewPagerIndicator：

转载请注明原博客地址：

源码下载地址：

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注