Android仿QQ好友詳情頁下拉頂部圖片縮放效果

更新時間：2017年12月22日 16:32:02 作者：king32918

這篇文章主要為大家詳細(xì)介紹了Android仿QQ好友詳情頁下拉頂部圖片縮放效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android下拉頂部圖片縮放效果展示的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

效果分析

1 向下滑動，頭部的圖片隨著手指滑動不斷變大

2 向上滑動，不斷的向上移動圖片，直到圖片不可見

3 當(dāng)頂部圖片不可見時，向上滑動，滑動ListView

實(shí)現(xiàn)思路

1 由于這個View分上下兩部分，垂直排列，可以通過繼承LinearLayout實(shí)現(xiàn)：：自定義一個DragImageView，該View繼承LinearLayout

public DragImageView(Context context, AttributeSet attrs) {
  super(context, attrs);
  // 默認(rèn)該View垂直排列
  setOrientation(LinearLayout.VERTICAL);
  // 用于配合處理該View的慣性滑動
  mScroller = new OverScroller(context);
  mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
  mMaximumVelocity = ViewConfiguration.get(context)
        .getScaledMaximumFlingVelocity();
  mMinimumVelocity = ViewConfiguration.get(context)
        .getScaledMinimumFlingVelocity();
  }

2 onMeasure中設(shè)置內(nèi)容視圖的高度

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  LayoutParams params = (LayoutParams) getChildAt(1).getLayoutParams();
  // 頭部可以全部隱藏，所以內(nèi)容視圖的高度即為該控件的高度
  params.height = getMeasuredHeight();
}

3 設(shè)置ImageView的ScaleType屬性

@Override
protected void onFinishInflate() {
  super.onFinishInflate();
  imageView = (ImageView) getChildAt(0);
  // 隨著手指滑動，圖片不斷放大（寬高都大于或者等于ImageView的大?。?，并居中顯示：
  // 根據(jù)上邊的分析，CENTER_CROP：可以使用均衡的縮放圖像（保持圖像原始比例），使圖片的兩個坐標(biāo)（寬、高）都大于等于 相應(yīng)的視圖坐標(biāo)（負(fù)的內(nèi)邊距）,圖像則位于視圖的中央
  imageView.setScaleType(ScaleType.CENTER_CROP);
  listView = (ListView) getChildAt(1);
}

4 事件攔截

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
  if (ev.getAction() == MotionEvent.ACTION_DOWN) {
    downX = (int) ev.getX();
    downY = (int) ev.getY();
  }
  if (ev.getAction() == MotionEvent.ACTION_MOVE) {
    int currentX = (int) ev.getX();
    int currentY = (int) ev.getY();
    // 確保是垂直滑動
    if (Math.abs(currentY - downY) > Math.abs(currentX - downX)) {
      View childView = listView.getChildAt(listView
          .getFirstVisiblePosition());
      // 有兩種情況需要攔截：
      // 1 圖片沒有完全隱藏
      // 2 圖片完全隱藏，但是向下滑動，并且ListView滑動到頂部
      if (getScrollY() != imageHeight
          || (getScrollY() == imageHeight && currentY - downY > 0
              && childView != null && childView.getTop() == 0)) {
        initVelocityTrackerIfNotExists();
        mVelocityTracker.addMovement(ev);
        return true;
      }
    }

  }
  if (ev.getAction() == MotionEvent.ACTION_UP) {
    recycleVelocityTracker();
  }
  return super.onInterceptTouchEvent(ev);
}

5 onTouchEvent的ACTION_MOVE處理

if (ev.getAction() == MotionEvent.ACTION_MOVE) {
    int currentX = (int) ev.getX();
    int currentY = (int) ev.getY();
    int deltyX = currentX - downX;
    int deltyY = currentY - downY;
    if (Math.abs(deltyY) > Math.abs(deltyX)) {
      if (deltyY > 0) {
        if (getScrollY() > 0) {
          if (getScrollY() - deltyY < 0) {
            scrollBy(0, -getScrollY());
            return true;
          }
          // 當(dāng)圖片沒有完全顯示，并且向下滑動時，繼續(xù)整個view使圖片可見
          scrollBy(0, -deltyY);
        } else {
        // 當(dāng)圖片完全顯示，并且向下滑動時，則不斷的放大圖片（通過改變ImageView）的高度
          LayoutParams layoutParams = (LayoutParams) getChildAt(0)
              .getLayoutParams();
          layoutParams.height = layoutParams.height + deltyY / 2;
          getChildAt(0).setLayoutParams(layoutParams);
        }
      } else {
      // 當(dāng)圖片還處于放大狀態(tài)，并且向上滑動時，繼續(xù)不斷的縮小圖片的高度，使圖片縮小
        if (getChildAt(1).getTop() > imageHeight) {
          LayoutParams layoutParams = (LayoutParams) getChildAt(0)
              .getLayoutParams();
          layoutParams.height = layoutParams.height + deltyY / 2;
          getChildAt(0).setLayoutParams(layoutParams);
        } else {
        // 當(dāng)圖片處于正常狀態(tài)，并且向上滑動時，移動整個View，縮小圖片的可見范圍
          if (getScrollY() - deltyY > imageHeight) {
            scrollBy(0, imageHeight - getScrollY());
            return true;
          }
          scrollBy(0, -deltyY);
        }
      }
      downY = currentY;
      downX = currentX;
      return true;
    }
  }

6 onTouchEvent的ACTION_UP處理

if (ev.getAction() == MotionEvent.ACTION_UP) {
  // 當(dāng)圖片處于放大狀態(tài)時松手，使圖片緩慢的縮回到原來的狀態(tài)
  if (getChildAt(1).getTop() > imageHeight) {
    isAnimating = true;
    ValueAnimator valueAnimator = ValueAnimator.ofInt(getChildAt(1)
        .getTop(), imageHeight);
    valueAnimator.setDuration(300);
    valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        int value = (Integer) animation.getAnimatedValue();
        LayoutParams layoutParams = (LayoutParams) getChildAt(0)
            .getLayoutParams();
        layoutParams.height = value;
        getChildAt(0).setLayoutParams(layoutParams);
      }
    });
    valueAnimator.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        isAnimating = false;
      }
    });
    valueAnimator.start();
  }
  // 當(dāng)現(xiàn)在圖片處于正常狀態(tài)，并且圖片沒有完全隱藏，并且松手時滑動的速度大于可慣性滑動的最小值，讓View產(chǎn)生慣性滑動效果
  if (getChildAt(1).getTop() == imageHeight
      && getScrollY() != imageHeight) {
    mVelocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
    int velocityY = (int) mVelocityTracker.getYVelocity();
    if (Math.abs(velocityY) > mMinimumVelocity) {
      fling(-velocityY);
    }
    recycleVelocityTracker();
  }

總結(jié)

這里主要有兩個學(xué)習(xí)的點(diǎn)

1 圖片縮放的處理，事件的攔截

2 View的慣性滑動：主要是結(jié)合OverScroller的使用

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: