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>
然后，在自定义控件的代码中，解析自定义的属性，如在PagerBar.java：

// 自定义属性 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();
最后，在布局文件中设置属性，如在main.xml

<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(); }

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

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左右滑动加载分页