AndroidでQQの友達詳細ページのドラッグダウンでトップの画像を縮小する効果を実装する

この記事では、Androidのトップ画像のスライドイン効果を表示する具体的なコードを共有し、以下の詳細な内容を提供します

効果画像

効果解析

1 下にスライドし、指でスライドすると、ヘッダーの画像が不断に大きくなります

2 上にスライドし、画像を不断に上に移動して、画像が見えないまで

3 トップの画像が見えない場合、上にスライドしてListViewをスライドします

実現方法

1 このViewは上下に分かれており、垂直に並んでいるため、LinearLayoutを継承して実現できます：：DragImageViewをカスタマイズして、このViewはLinearLayoutを継承しています

public DragImageView(Context context, AttributeSet attrs) {
  super(context, attrs);
  // デフォルトでこの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でコンテンツビューの高さを設定します

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  LayoutParams params = (LayoutParams) getChildAt(1).getLayoutParams();
  // ヘッダーは完全に隠れることができますので、コンテンツビューの高さはそのコントロールの高さと同じです
  params.height = getMeasuredHeight();
}

3 ImageViewのScaleType属性を設定します

@Override
protected void onFinishInflate() {
  super.onFinishInflate();
  imageView = (ImageView) getChildAt(0);
  // 指でスライドすると、画像が常に拡大し続けます（幅と高さがImageViewの大きさ以上またはその値と同じです）、そして中央に表示されます：
  // 上記の分析に基づいて、CENTER_CROP：画像を均等に縮小し（画像の元の比率を保護）、画像の2つの座標（幅、高さ）が対応するビューの座標（負の内側マージン）より大きいかまたはその値以上で、画像はビューの中央に配置されます。
  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;
          }
          // 画像が完全に表示されていない場合、下にスライドすると、整个viewを続けて画像が見えるようにします
          scrollBy(0, -deltyY);
        }
        // 画像が完全に表示され、下にスライドすると、画像を（ImageViewの高さを変更することで）常に拡大します
          LayoutParams layoutParams = (LayoutParams) getChildAt(0)
              .getLayoutParams();
          layoutParams.height = layoutParams.height + deltyY / 2;
          getChildAt(0).setLayoutParams(layoutParams);
        }
      }
      // 画像がまだ拡大状態にある場合、上にスライドするとき、画像の高さを続けざまに縮小し、画像を縮小します
        if (getChildAt(1).getTop() > imageHeight) {
          LayoutParams layoutParams = (LayoutParams) getChildAt(0)
              .getLayoutParams();
          layoutParams.height = layoutParams.height + deltyY / 2;
          getChildAt(0).setLayoutParams(layoutParams);
        }
        // 画像が通常状態で、上にスライドするとき、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) {
  // 画像が拡大状態にあるときに手を離し、画像を緩やかに元の状態に縮小します
  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();
  }
  // 現在の画像が通常の状態で、画像が完全に隠れていない場合、手を離したときのスライド速度が惯性スライドの最小値を超えた場合、Viewに惯性スライド効果を発生させる
  if (getChildAt(1).getTop() == imageHeight
      && getScrollY() != imageHeight) {
    mVelocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
    int velocityY = (int) mVelocityTracker.getYVelocity();
    if (Math.abs(velocityY) > mMinimumVelocity) {
      fling(-velocityY);
    }
    recycleVelocityTracker();
  }

まとめ

ここには主に2つの学習ポイントがあります

1 画像の拡大処理、イベントのインターセプト

2 Viewの惯性スライド：主にOverScrollerの使用を結びつけています

これで本文のすべての内容が終わりました。皆様の学習に役立つことを願っています。また、呐喊教程を多くの皆様にサポートしていただけると嬉しいです。

声明：本文の内容はインターネットからネットワークで提供されています。著作権は原著者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードした内容であり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害を疑われる内容がある場合は、メールを送信して：notice#oldtoolbag.com（メールを送信する際、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害を疑われる内容を削除します。）