實踐自定義UI－ViewGroup

字數3365 閱讀2894 評論36 喜歡71

前面我們介紹了利用View和Android已有的控件RLF...(RelativeLayout、LinearLayout、FrameLayout...)實踐自定義UI，感興趣的小夥伴請移步：

實踐自定義UI—RLF...(RelativeLayout LinearLayout FrameLayout....)

接下來我們將利用ViewGroup實踐自定義UI，首先還是看看效果圖：

效果圖

這個效果是來源於Keep_Growing羣裏面的一個小夥伴，好像是在項目中需要，問有沒有開源的，後來我發現好像還真的沒有（如果你知道，請告訴我，當然目前實現的功能還沒有達到像ViewPager那麼牛，這裏主要是想讓大家對利用ViewGroup自定義UI有個很好的認識），所有就想着自己利用ViewGroup實現這個效果。這裏利用ViewGroup自定義UI控件，我們主要是注意一下下面兩點：

1.定義規則、屬性：定義一下佈局規則，類似於LinearLayout中的orientation、RelativeLayout中的alignParentLeft等。這些規則主要是告訴我們這些子View如何放置他們的位置，以及如何設置大小等屬性。

2.處理交互事件：主要是觸摸事件的處理。

分解效果圖

我們從上面的效果圖可以很清晰的發現，ViewGroup的子child在滑動的時候，是可以放大和縮小的。那麼我們的主要任務之一就是解決這個放大和縮小的效果。我們看一下進入界面的效果如下圖：

靜態圖

從這個靜態的頁面可以看到，就是兩個View，其中第二個View我們可以認爲只是按照一定的比例縮小了。根據上面的分析，我們可以這麼想象，在ViewGroup中我們添加的一定數量的子View，並且第一個View保持原始大小，剩下的View按一定比例縮小。他們的佈局如下圖所示：

示意圖

在滑動的過程中，假如從右向左滑動，那麼當前的View會逐漸縮小，下一個View會逐漸放大；假如從左向右滑動，當前的View會逐漸縮小，上一個View會逐漸放大(可以參考效果圖理解)。

實現分解效果圖

根據上面的分解我們來一步一步實現。

1.測量大小和佈局
爲了佈局和設置大小的需要，這裏我們定義兩個屬性：marginLeftRight和gutterSize，其中marginLeftRight是確定子View與left和right的間距，gutterSize是確定原始大小View與縮小View之間的距離。知道這兩個屬性後我們首先要確定每個View的大小，我們知道這個過程是在onMeasure()方法中完成的(其實onMeasure()方法就是確定當前ViewGroup和子View大小的地方，我們自定義View和ViewGroup都是一樣的)，這裏還是直接看代碼吧：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
     //設置默認大小，讓當前的ViewGroup大小爲充滿屏幕
    setMeasuredDimension(getDefaultSize(0, widthMeasureSpec),
            getDefaultSize(0, heightMeasureSpec));
    int measuredWidth = getMeasuredWidth();
    int measuredHeight = getMeasuredHeight();

    int childCount = getChildCount();
    //每個子child的寬度爲屏幕的寬度減去與兩邊的間距
    int width = measuredWidth - (int) (mMarginLeftRight * 2);
    int height = measuredHeight;
    int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);
    int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
    for (int i = 0; i < childCount; i++) {
        getChildAt(i).measure(childWidthMeasureSpec, childHeightMeasureSpec);
    }
  //切換一個page需要移動的距離爲一個page的寬度
    mSwitchSize = width;
    //確定縮放比例
    confirmScaleRatio(width, mGutterSize);
}

這裏首先設置的當前ViewGroup的大小，然後確定每個子View的大小。子View的高度是和ViewGroup的高度相同的，子View的寬度是需要減去剛纔設置與兩邊的間距，並調用child.measure()方法確定子View的大小。

當前ViewGroup的大小和每個子View的大小確定了，接下來的工作就是確定他們在當前ViewGroup中的位置，這個工作當然由onLayout()方法來確定啦，還是直接看代碼吧：

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    int childCount = getChildCount();
    int originLeft = (int) mMarginLeftRight;

    for (int i = 0; i < childCount; i++) {
        View child = getChildAt(i);
        int left = originLeft + child.getMeasuredWidth() * i;
        int right = originLeft + child.getMeasuredWidth() * (i + 1);
        int bottom = child.getMeasuredHeight();
        child.layout(left, 0, right, bottom);
        if (i != 0) {
            child.setScaleX(SCALE_RATIO);
            child.setScaleY(SCALE_RATIO);
        }
    }

}

其實這個位置確定的過程可以參考上面的示意圖，首先按照原始的大小將每個子View通過調用child.layout()方法告訴他們在當前ViewGroup中的位置，他們在繪製自己的時候就會在給定的區域內繪製。當這些子View都確定位置時，他們是一個挨着一個的(結合上面的示意圖就可以理解了)，並沒有縮小的效果圖，我們調用child.setScaleX()和child.setScaleY()兩個方法設置縮放的大小，那麼當child在繪製的時候就會縮小。這裏我們怎麼知道縮小多少呢，還是看看代碼：

private void confirmScaleRatio(int width, float gutterSize) {
    SCALE_RATIO = (width - gutterSize * 2) / width;
}

這裏是根據gutterSize的大小佔用整個子View寬度大小的比例，就是縮小的比例，如果不是很理解這個計算方法，可以參考下圖理解一下(這裏我們原始大小的和縮小的疊加到了一起)：

計算示意圖

2.滑動效果

上面我們簡單的將測量大小和佈局的過程介紹了一下，接下來的工作就是左右滑動的效果實現了，以及處理好滑動過程中的放大和縮小的效果。爲了會實現這個效果我們這裏簡單的介紹一下需要使用到的類和方法。

(1) Scroller

滑動的過程我們用到了Scroller這個類，它的主要作用是配合computeScroll()，讓子View滑動到固定的位置。我們先看看Scoller中我們需要使用的方法：

startScroll(int startX, int startY, int dx, int dy, int duration)

這個方法主要的功能是模擬在duration的時間內，在X軸方向上從startX的位置(這裏我們只關心X方向，Y方向類似)移動了dx的距離。在這個模擬移動的過程中通過getCurrX() 獲取當前移動到的位置(其實這裏大家可以自己查一下這個類的具體用法)。

(2) VelocityTracker

這個類的主要作用就是檢測手勢滑動的速度。我們滑動View的時候會有一定的速率，當達到一定的速率時我們切換子View。

(3) scrollBy(int x, int y)方法、scrollTo(int x, int y)方法和computeScroll()方法

scrollBy()方法是在X軸上移動距離爲x和Y軸上移動距離爲y；scrollTo()方法是移動到(x, y)的位置；computeScroll()方法在我們需要View進行重繪時，就會觸發該方法。當我們需要在規定時間內將View從某個位置滑動到某個固定位置時，可以通過Scroller類模擬這個過程，並通過scrollTo方法配合使用，就可以達到View移動的效果。

接下來我們將利用上面介紹的方法實現滑動的效果。實現滑動的效果，肯定是對Touch事件的處理，還是直接看代碼：

@Override
public boolean onTouchEvent(MotionEvent event) {
    LogUtils.LogD(TAG, " onInterceptTouchEvent hit touch event");
    final int actionIndex = MotionEventCompat.getActionIndex(event);
    mActivePointerId = MotionEventCompat.getPointerId(event, 0);

    if (mVelocityTracker == null) {
        mVelocityTracker = VelocityTracker.obtain();
    }
    mVelocityTracker.addMovement(event);
    switch (event.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_DOWN:
            mDownX = event.getRawX();
            if (mScroller != null && !mScroller.isFinished()) {
                mScroller.abortAnimation();
            }
            break;
        case MotionEvent.ACTION_MOVE:

            //calculate moving distance
            float distance = -(event.getRawX() - mDownX);
            mDownX = event.getRawX();
            LogUtils.LogD(TAG, " current distance == " + distance);
            performDrag((int)distance);
            break;
        case MotionEvent.ACTION_UP:
            releaseViewForTouchUp();
            cancel();
            break;
    }
    return true;
}

private void performDrag(int distance) {
    if (mOnPagerChangeListener != null){
        mOnPagerChangeListener.onPageScrollStateChanged(SCROLL_STATE_DRAGGING);
    }
    LogUtils.LogD(TAG, " perform drag distance == " + distance);
    scrollBy(distance, 0);
    if (distance < 0) {
        dragScaleShrinkView(mCurrentPosition, LEFT_TO_RIGHT);
    } else {
        LogUtils.LogD(TAG, " current direction is right to left and current child position =  " + mCurrentPosition);
        dragScaleShrinkView(mCurrentPosition, RIGHT_TO_LEFT);
    }
}

這裏處理的是在手指按住滑動的時候，child的變化，當然最主要的就是放大縮小的變化，由於draScaleShrinkView()方法的代碼比較多，這裏就不貼了，我們只要知道該方法就是處理按住左右滑動時child的放大和縮小。我們知道放大過程就是放大比例是從SCALE_RATIO變化到1.0，縮小的過程就是縮小比例從1.0變化到SCALE_RATIO。而且放大的過程是在SCALE_RATIO的基礎上增加的，縮小的過程是在1.0的基礎上減少的。所以移動過程中計算方法如下：

scaleRatio = SCALE_RATIO + (1.0f - SCALE_RATIO) * ratio;
shrinkRatio = 1.0f - (1.0f - SCALE_RATIO) * ratio;

我們在切換一個頁面時需要移動的距離爲mSwitchSize(這個值我們在前面設置的)，那麼切換完成後放大或者縮小都變化了(1.0-SCALE_RATIO)。那麼在切換的過程中移動的距離與mSwitch的比值我們設爲ratio，這個值的變化範圍爲：0-1。定義切換一個頁面需要移動的距離爲mSwitchSize，當前處於原始大小child的位置爲position，當我們向左滑動的時候(向右滑動的過程大家可以試着算一下)，計算的過程爲：

int moveSize = getScrollX() - position * mSwitchSize;
float ratio = (float) moveSize / mSwitchSize;

這個計算的過程估計會有點難理解，大家還是自己想象一下滑動的過程，或者自己比劃一下，這樣便於理解(這裏確實比較難理解，我也花了很長時間寫着點內容，希望小夥伴們能自己比劃一下^_^)。這個比例算好後直接調用下面的代碼就可以實現縮放的效果了：

//放大
ViewCompat.setScaleX(scaleView, scaleRatio);
ViewCompat.setScaleY(scaleView, scaleRatio);
scaleView.invalidate();
//縮小
ViewCompat.setScaleX(shrinkView,shrinkRatio);
ViewCompat.setScaleY(shrinkView, shrinkRatio);
shrinkView.invalidate();

以上是滑動過程中的變化，用戶一直處於按住拖動的狀態。當用戶鬆手之後，那麼我們需要根據滑動的速率和當前移動的距離是否超過mSwitchSize(也就是頁面的大小)的一半，判斷是否切換頁面。

  private void releaseViewForTouchUp() {

    final VelocityTracker velocityTracker = mVelocityTracker;
    velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
    int initialVelocity = (int) VelocityTrackerCompat.getXVelocity(
            velocityTracker, mActivePointerId);
    float xVel = mVelocityTracker.getXVelocity();
    //向左滑動，速度大於限定的值滑動到下一個頁面
    if (xVel > SNAP_VELOCITY && mCurrentPosition > 0) {
        smoothScrollToItemView(mCurrentPosition - 1, true);
    //向右滑動時，速度爲負數，所以當小於限定值的負數滑動到上一個頁面
    } else if (xVel < -SNAP_VELOCITY && mCurrentPosition < getChildCount() - 1) {
        smoothScrollToItemView(mCurrentPosition + 1, true);
    } else {
        //沒有達到一定的速度，根據移動的距離確定滑動到哪個頁面
        smoothScrollToDes();
    }
    setScrollState(SCROLL_STATE_SETTLING);
}

private void smoothScrollToDes() {
  //整個ViewGroup已經滑動的距離
    int scrollX = getScrollX();
    //確定滑動到哪個頁面，mSwitchSize是切換一個頁面ViewGroup需要滑動的距離
    int position = (scrollX + mSwitchSize / 2) / mSwitchSize;
    LogUtils.LogD(TAG, " smooth scroll to des position == before =" + mCurrentPosition
            + " scroll X = " + scrollX + " switch size == " + mSwitchSize + " position == " + position);
    smoothScrollToItemView(position, mCurrentPosition == position);
}

private void smoothScrollToItemView(int position, boolean pageSelected) {
    mCurrentPosition = position;
    if (mCurrentPosition > getChildCount() - 1) {
        mCurrentPosition = getChildCount() - 1;
    }
    if (mOnPagerChangeListener != null && pageSelected){
        mOnPagerChangeListener.onPageSelected(position);
    }
    //確定滑動的距離
    int dx = position * (getMeasuredWidth() - (int) mMarginLeftRight * 2) - getScrollX();
    mScroller.startScroll(getScrollX(), 0, dx, 0, Math.min(Math.abs(dx) * 2, MAX_SETTLE_DURATION));
    invalidate();
}

當調用Scroller.startScroll方法後會調用invalidate()方法，這個過程就會觸發computeScroll()方法，我們看看在該方法中我們怎麼處理滑動的效果吧，直接看代碼：

@Override
public void computeScroll() {
    if (!mScroller.isFinished() && mScroller.computeScrollOffset()) {
        dragScaleShrinkView(mCurrentPosition, mCurrentDir);
        scrollTo(mScroller.getCurrX(), 0);
    }

}

上面我們說了，Scroller.startScroll方法只是模擬移動的過程，通過模擬的過程我們可以在duration的時間內獲取移動到的位置(getCurrX()方法獲取)，正真的移動效果還是通過scrollTo()方法實現的，由於我們需要不停的獲取和移動，所以就需要在模擬的時間內不停的調用scrollTo方法,該方法會觸發整個View重繪，會再次調用computeScroll()方法，而我們通過調用Scroller.computeScollOffset()和Scroller.isFinished()方法檢測模擬移動是否結束，從而達到平滑滑動的效果，這個過程中同時要實現放大縮小的效果，上面已經分析了，我就不詳細的介紹了。

好了，上面我基本上把需要實現了滑屏以及滑動過程中放大縮小的效果了，這個過程其實涉及的東西還是蠻多的，也比較繁瑣，不過不是非常的難。只要仔細的理解每一個過程，還是比較容易理解的，最主要還是多多練習！這裏寫的比較多，有可能看的比較暈，如果有興趣的話可以看看源碼吧！

爲保護原創，聲明--轉載於：http://www.jianshu.com/p/525ccf61db94

【Android實現自定義UI－ViewGroup】

實踐自定義UI－ViewGroup

分解效果圖

實現分解效果圖

測試人員都是畫畫大神，讓我看看誰還不會用代碼圖？

Object.values()對象遍歷

Android輸入法彈出時把佈局頂上去和登錄按鈕頂上去的解決方法

巧妙解決Unable to delete directory: 盤符\項目名稱\app\build\output\apk

android 相機和相冊獲取相片剪裁報錯問題解決，機型也解決

【Android實現自定義UI－ViewGroup】

Android文件工具類

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結