Android 滑动效果高级篇（八）—— 自定义控件

自定义控件，较常用View、ViewGroup、Scroller三个类，其继承关系如下：

本示例自定义控件，实现一个Gallery效果，并添加了一个显示View个数和位置的bar条，效果图：

自定义控件，包含通过继承实现的自定义控件和自定义控件属性两部分，即控件和属性

1、自定义属性

自定义属性，分为定义属性、解析属性、设置属性三部分，具体步骤：

首先，在res/valus/attrs.xml属性资源文件中，定义控件属性

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="com.myapps.widget.Pager">        <attr name="pageWidth" format="dimension" />    </declare-styleable>        <declare-styleable name="com.myapps.widget.PagerBar">        <attr name="barColor" format="color" />        <attr name="highlightColor" format="color" />        <attr name="fadeDelay" format="integer" />        <attr name="fadeDuration" format="integer" />        <attr name="roundRectRadius" format="dimension" />    </declare-styleable></resources>

// 自定义属性  TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.com_myapps_widget_PagerBar);  int barBackColor = a.getColor(R.styleable.com_myapps_widget_PagerBar_barColor, DEFAULT_BAR_BACKCOLOR);    // bar背景色  int barForeColor = a.getColor(R.styleable.com_myapps_widget_PagerBar_highlightColor, DEFAULT_BAR_FORECOLOR); // bar前景色  fadeDelay = a.getInteger(R.styleable.com_myapps_widget_PagerBar_fadeDelay, DEFAULT_FADE_DELAY);    // bar消失延迟时间  fadeDuration = a.getInteger(R.styleable.com_myapps_widget_PagerBar_fadeDuration, DEFAULT_FADE_DURATION); // bar消失动画时间  ovalRadius = a.getDimension(R.styleable.com_myapps_widget_PagerBar_roundRectRadius, 2f);  a.recycle();

    <com.homer.mycontrol.PagerBar        android:id="@+id/control"        android:layout_width="fill_parent"        android:layout_height="4dip"        android:layout_margin="8dip"        myapps:roundRectRadius="2dip" />  <!-- 自定义圆角 -->

其中，在布局中间main.xml中，需要注意：

xmlns:myapps="http://schemas.android.com/apk/res/com.homer.mycontrol"

定义属性时，在declare-styleable的name中，需要包含com.myapps.widget.PagerBar，表示自定义的控件PageBar是widget子类，myapps是xmlns解析标记

解析属性时，在TypedArray中，需要包含R.styleable.com_myapps_widget_PagerBar，横线替换了圆点.

定义属性时，在com.homer.mycontrol.PagerBar中，需要包含myapps:roundRectRadius="2dip"，加上myapps解析标记

2、自定义控件PagerBar

自定义PagerBar，在图片下方用来显示图片滑到了第几页，即上面效果图（图2、图3）中的下部银白色细条，具体实现：

 public PagerBar(Context context, AttributeSet attrs, int defStyle) {  super(context, attrs, defStyle);  // 自定义属性  TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.com_myapps_widget_PagerBar);  int barBackColor = a.getColor(R.styleable.com_myapps_widget_PagerBar_barColor, DEFAULT_BAR_BACKCOLOR);    // bar背景色  int barForeColor = a.getColor(R.styleable.com_myapps_widget_PagerBar_highlightColor, DEFAULT_BAR_FORECOLOR); // bar前景色  fadeDelay = a.getInteger(R.styleable.com_myapps_widget_PagerBar_fadeDelay, DEFAULT_FADE_DELAY);    // bar消失延迟时间  fadeDuration = a.getInteger(R.styleable.com_myapps_widget_PagerBar_fadeDuration, DEFAULT_FADE_DURATION); // bar消失动画时间  ovalRadius = a.getDimension(R.styleable.com_myapps_widget_PagerBar_roundRectRadius, 2f);  a.recycle();  barBackPaint = new Paint();  barBackPaint.setColor(barBackColor);  barForePaint = new Paint();  barForePaint.setColor(barForeColor);  fadeOutAnimation = new AlphaAnimation(1f, 0f);  fadeOutAnimation.setDuration(fadeDuration);  fadeOutAnimation.setRepeatCount(0);  fadeOutAnimation.setInterpolator(new LinearInterpolator());  fadeOutAnimation.setFillEnabled(true);  fadeOutAnimation.setFillAfter(true); } public int getNumPages() {  return numPages; } public void setNumPages(int numPages) {  if (numPages <= 0) {   throw new IllegalArgumentException("numPages must be positive");  }  this.numPages = numPages;  invalidate();  // 重绘View  fadeOut();   // 设置bar消失效果 } /** bar消失动画 */ private void fadeOut() {  if (fadeDuration > 0) {   clearAnimation();   fadeOutAnimation.setStartTime(AnimationUtils.currentAnimationTimeMillis() + fadeDelay); //延迟fadeDelay后动画开始   setAnimation(fadeOutAnimation);  } } /**  @return  0 to numPages-1 */ public int getCurrentPage() {  return currentPage; } /** @param currentPage  0 to numPages-1  */ public void setCurrentPage(int currentPage) {  if (currentPage < 0 || currentPage >= numPages) {   throw new IllegalArgumentException("currentPage parameter out of bounds");  }  if (this.currentPage != currentPage) {   this.currentPage = currentPage;   this.position = currentPage * getPageWidth(); // bar前景色滑动条的起始位置（像素值）   invalidate();   fadeOut();  } } /** 获取View的宽度，即bar的宽度 */ public int getPageWidth() {  return getWidth() / numPages; // getWidth()是PagerBar的宽度（减去了margin左右距离后） } /**  @param position     can be -pageWidth to pageWidth*(numPages+1)  */ public void setPosition(int position) {  if (this.position != position) {   this.position = position;   invalidate();   fadeOut();  } } @Override protected void onDraw(Canvas canvas) {  canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()), ovalRadius, ovalRadius, barBackPaint); // 绘制bar背景  canvas.drawRoundRect(new RectF(position, 0, position + (getWidth() / numPages), getHeight()), ovalRadius, ovalRadius, barForePaint); // 绘制bar前景 }}

3、自定义控件Pager

自定义控件Pager，继承自ViewGroup，用来显示图片的，类似于Gallery，实现主要部分包含：

A、自定义属性解析

B、Pager容器控件Scroller滑动页设置与控制

C、容器状态保存（onSaveInstanceState）

D、容器事件监听接口

详细实现如下：

A、自定义属性解析

 public Pager(Context context, AttributeSet attrs, int defStyle) {  super(context, attrs, defStyle);  // 自定义属性  TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.com_myapps_widget_Pager);  pageWidthSpec = a.getDimensionPixelSize(R.styleable.com_myapps_widget_Pager_pageWidth, SPEC_UNDEFINED);  a.recycle(); }

 public void setCurrentPage(int currentPage) {  mCurrentPage = Math.max(0, Math.min(currentPage, getChildCount()));  // 非常好  scrollTo(getScrollXForPage(mCurrentPage), 0);  invalidate(); // 重绘View } int getCurrentPage() {  return mCurrentPage; } public void setPageWidth(int pageWidth) {  this.pageWidthSpec = pageWidth; } public int getPageWidth() {  return pageWidth; } /** 获取whichPage的Pager起始x位置，whichPage从0开始计 */ private int getScrollXForPage(int whichPage) {  return (whichPage * pageWidth) - pageWidthPadding(); } /** 返回View的 paddingwidth 一半(1/2)*/ int pageWidthPadding() {  return ((getMeasuredWidth() - pageWidth) / 2); } @Override public void computeScroll() {  // update  mScrollX and mScrollY  of View  if (mScroller.computeScrollOffset()) {   scrollTo(mScroller.getCurrX(), mScroller.getCurrY());   postInvalidate();   // invalidate the View from a non-UI thread  } else if (mNextPage != INVALID_SCREEN) {   mCurrentPage = mNextPage;   mNextPage = INVALID_SCREEN;   clearChildrenCache();  } } @Override protected void dispatchDraw(Canvas canvas) { // draw the child views    final long drawingTime = getDrawingTime(); // 绘制childView  final int count = getChildCount();  for (int i = 0; i < count; i++) {   drawChild(canvas, getChildAt(i), drawingTime);  }  for (OnScrollListener mListener : mListeners) { // 自定义接口   int adjustedScrollX = getScrollX() + pageWidthPadding();   mListener.onScroll(adjustedScrollX);   if (adjustedScrollX % pageWidth == 0) { // scroll finished    mListener.onViewScrollFinished(adjustedScrollX / pageWidth);   }  } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  super.onMeasure(widthMeasureSpec, heightMeasureSpec);  pageWidth = (pageWidthSpec == SPEC_UNDEFINED) ? getMeasuredWidth() : pageWidthSpec;  pageWidth = Math.min(pageWidth, getMeasuredWidth());  final int count = getChildCount();  for (int i = 0; i < count; i++) {   widthMeasureSpec = MeasureSpec.makeMeasureSpec(pageWidth, MeasureSpec.EXACTLY);   getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);  }  if (mFirstLayout) { // 第一次显示Pager时，page的位置   scrollTo(getScrollXForPage(mCurrentPage), mScroller.getCurrY());   mFirstLayout = false;  } } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) {  int childLeft = 0;  final int count = getChildCount(); // 绘制childView  for (int i = 0; i < count; i++) {   final View child = getChildAt(i);   if (child.getVisibility() != View.GONE) {    final int childWidth = child.getMeasuredWidth();    child.layout(childLeft, 0, childLeft + childWidth, child.getMeasuredHeight());    childLeft += childWidth;   }  } }

 @Override public boolean onInterceptTouchEvent(MotionEvent ev) {  final int action = ev.getAction();  if ((action == MotionEvent.ACTION_MOVE) && (mTouchState != TOUCH_STATE_REST)) { // 正在滑动中   return true;  }  final float x = ev.getX();  final float y = ev.getY();  switch (action) {  case MotionEvent.ACTION_MOVE:   if (mTouchState == TOUCH_STATE_REST) {    checkStartScroll(x, y);   }   break;  case MotionEvent.ACTION_DOWN:   mLastMotionX = x;   mLastMotionY = y;   mAllowLongPress = true;   mTouchState = mScroller.isFinished() ? TOUCH_STATE_REST : TOUCH_STATE_SCROLLING; // scroll 完成后，重置状态   break;  case MotionEvent.ACTION_CANCEL:  case MotionEvent.ACTION_UP:   clearChildrenCache();   mTouchState = TOUCH_STATE_REST;   break;  }  return mTouchState != TOUCH_STATE_REST; } @Override public boolean onTouchEvent(MotionEvent ev) {  if (mVelocityTracker == null) {   mVelocityTracker = VelocityTracker.obtain();  }  mVelocityTracker.addMovement(ev);  final int action = ev.getAction();  final float x = ev.getX();  final float y = ev.getY();  switch (action) {  case MotionEvent.ACTION_DOWN:   if (!mScroller.isFinished()) {    mScroller.abortAnimation();   }   mLastMotionX = x;   break;     case MotionEvent.ACTION_MOVE:   if (mTouchState == TOUCH_STATE_REST) {    checkStartScroll(x, y);   } else if (mTouchState == TOUCH_STATE_SCROLLING) { // scrolling 状态时，重绘view    int deltaX = (int) (mLastMotionX - x);    mLastMotionX = x;    if (getScrollX() < 0 || getScrollX() > getChildAt(getChildCount() - 1).getLeft()) {     deltaX /= 2;    }    scrollBy(deltaX, 0);   }   break;     case MotionEvent.ACTION_UP:   if (mTouchState == TOUCH_STATE_SCROLLING) {    final VelocityTracker velocityTracker = mVelocityTracker;    velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);    int velocityX = (int) velocityTracker.getXVelocity();    if (velocityX > SNAP_VELOCITY && mCurrentPage > 0) {     snapToPage(mCurrentPage - 1);    } else if (velocityX < -SNAP_VELOCITY && mCurrentPage < getChildCount() - 1) {     snapToPage(mCurrentPage + 1);    } else {     snapToDestination();    }    if (mVelocityTracker != null) {     mVelocityTracker.recycle();     mVelocityTracker = null;    }   }   mTouchState = TOUCH_STATE_REST;   break;  case MotionEvent.ACTION_CANCEL:   mTouchState = TOUCH_STATE_REST;  }  return true; } /** 检查scroll状态，并设置绘制scroll缓存 */ private void checkStartScroll(float x, float y) {  final int xDiff = (int) Math.abs(x - mLastMotionX);  final int yDiff = (int) Math.abs(y - mLastMotionY);  boolean xMoved = xDiff > mTouchSlop;  boolean yMoved = yDiff > mTouchSlop;  if (xMoved || yMoved) {   if (xMoved) {    mTouchState = TOUCH_STATE_SCROLLING;  // 设置为scrolling 状态    enableChildrenCache();   }   if (mAllowLongPress) {    mAllowLongPress = false;    final View currentScreen = getChildAt(mCurrentPage);    currentScreen.cancelLongPress(); // Cancels a pending long press   }  } } void enableChildrenCache() {  setChildrenDrawingCacheEnabled(true);  // Enables or disables the drawing cache for each child of this viewGroup  setChildrenDrawnWithCacheEnabled(true); // Tells the ViewGroup to draw its children using their drawing cache } void clearChildrenCache() {  setChildrenDrawnWithCacheEnabled(false); } private void snapToDestination() {  final int startX = getScrollXForPage(mCurrentPage);  int whichPage = mCurrentPage;  if (getScrollX() < startX - getWidth() / 8) {   whichPage = Math.max(0, whichPage - 1);  } else if (getScrollX() > startX + getWidth() / 8) {   whichPage = Math.min(getChildCount() - 1, whichPage + 1);  }  snapToPage(whichPage); } void snapToPage(int whichPage) {  enableChildrenCache();  boolean changingPages = whichPage != mCurrentPage;  mNextPage = whichPage;  View focusedChild = getFocusedChild();  if (focusedChild != null && changingPages && focusedChild == getChildAt(mCurrentPage)) {   focusedChild.clearFocus();  }  final int newX = getScrollXForPage(whichPage);  final int delta = newX - getScrollX();  mScroller.startScroll(getScrollX(), 0, delta, 0, Math.abs(delta) * 2);  invalidate(); } /** 向左滑动 */ public void scrollLeft() {  if (mNextPage == INVALID_SCREEN && mCurrentPage > 0 && mScroller.isFinished()) {   snapToPage(mCurrentPage - 1);  } } /** 向右滑动 */ public void scrollRight() {  if (mNextPage == INVALID_SCREEN && mCurrentPage < getChildCount() - 1 && mScroller.isFinished()) {   snapToPage(mCurrentPage + 1);  } }

C、容器状态保存（onSaveInstanceState）

 /** 保存状态 */ public static class SavedState extends BaseSavedState {  int currentScreen = -1;  SavedState(Parcelable superState) {   super(superState);  }  private SavedState(Parcel in) {   super(in);   currentScreen = in.readInt();  }  public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() {   public SavedState createFromParcel(Parcel in) { // get data written by Parcelable.writeToParcel()     return new SavedState(in);   }   public SavedState[] newArray(int size) {   // create  array of the Parcelable     return new SavedState[size];   }  };    @Override  public void writeToParcel(Parcel out, int flags) {  // set data to parcel   super.writeToParcel(out, flags);   out.writeInt(currentScreen);  } } @Override protected Parcelable onSaveInstanceState() {  // 保存状态  final SavedState state = new SavedState(super.onSaveInstanceState());  state.currentScreen = mCurrentPage;   // save InstanceState  return state; } @Override protected void onRestoreInstanceState(Parcelable state) { // 恢复状态  SavedState savedState = (SavedState) state;  super.onRestoreInstanceState(savedState.getSuperState()); // get InstanceState  if (savedState.currentScreen != INVALID_SCREEN) {   mCurrentPage = savedState.currentScreen;   } }

D、容器事件监听接口

 public void addOnScrollListener(OnScrollListener listener) {  mListeners.add(listener); } public void removeOnScrollListener(OnScrollListener listener) {  mListeners.remove(listener); } /** 自定义接口 */ public static interface OnScrollListener {  void onScroll(int scrollX);  void onViewScrollFinished(int currentPage); }

代码下载

参考推荐：

Android中自定义属性的使用

Android中自定义属性的格式详解

Scroller（Android）  Scroller（cnblog）

Android Parcelable

Android左右滑动加载分页