androidのScrollViewでトップ画像をドラッグして拡大する実装

前書き

プロジェクトを開発していたとき、微博の個人ページに似たScrollViewの効果を実現する必要がありました。トップに到達したらさらにドラッグダウンするとトップの画像が拡大します。それから、オンラインで関連する実装を見つけ、効果が非常に良く、コードもシンプルで理解しやすいでした。(リンク: 自定义scrollView实现顶部图片下拉放大)。そこで、この基础上少しだけ修正を行いました。例えば、コードで画像の中央を制御、動的に拡大するコントロールを追加、カスタムの最大拡大倍数を使用するなど、非常にシンプルな修正を行い、スライドのリスナーを追加しました(プロジェクトが必要)。

効果は以下の通りです:

考え方

まず考え方について説明します。コードよりも考え方がもっと重要です。具体的な手順は以下の通りです：
1. 放大するコントロールを取得し、その幅高さを取得します；
2. 顶部に到達したらさらに下にドラッグダウンし、LayoutParamsを変更してコントロールの幅高さを変更します；
3. 手指が離れたときに各パラメータを初期化し、属性アニメーションでコントロールのリバウンドを行います。

実装

コードを見てください

public class HeadZoomScrollView extends ScrollView {
 public HeadZoomScrollView(Context context) {
  super(context);
 }
 public HeadZoomScrollView(Context context, AttributeSet attrs) {
  super(context, attrs);
 }
 public HeadZoomScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
 }
 // ドラッグダウン位置を記録するため
 private float y = 0f;
 // zoomView本来の幅高さ
 private int zoomViewWidth = 0;
 private int zoomViewHeight = 0;
 // 是否正在放大
 private boolean mScaling = false;
 // 放大的view，默认为第一个子view
 private View zoomView;
 public void setZoomView(View zoomView) {
  this.zoomView = zoomView;
 }
 // 滑动放大系数，系数越大，滑动时放大程度越大
 private float mScaleRatio = 0.4f;
 public void setmScaleRatio(float mScaleRatio) {
  this.mScaleRatio = mScaleRatio;
 }
 // 最大的放大倍数
 private float mScaleTimes = 2f;
 public void setmScaleTimes(int mScaleTimes) {
  this.mScaleTimes = mScaleTimes;
 }
 // 回弹时间系数，系数越小，回弹越快
 private float mReplyRatio = 0.5f;
 public void setmReplyRatio(float mReplyRatio) {
  this.mReplyRatio = mReplyRatio;
 }
 @Override
 protected void onFinishInflate() {
  super.onFinishInflate();
//  不可过度滚动，否则上移后下拉会出现部分空白的情况
  setOverScrollMode(OVER_SCROLL_NEVER);
//  获得默认第一个view
  if (getChildAt(0) != null && getChildAt(0) instanceof ViewGroup && zoomView == null) {
   ViewGroup vg = (ViewGroup) getChildAt(0);
   if (vg.getChildCount() > 0) {
    zoomView = vg.getChildAt(0);
   }
  }
 }
 @Override
 public boolean onTouchEvent(MotionEvent ev) {
  if (zoomViewWidth <= 0 || zoomViewHeight <=0) {
   zoomViewWidth = zoomView.getMeasuredWidth();
   zoomViewHeight = zoomView.getMeasuredHeight();
  }
  if (zoomView == null || zoomViewWidth <= 0 || zoomViewHeight <= 0) {
   return super.onTouchEvent(ev);
  }
  switch (ev.getAction()) {
   case MotionEvent.ACTION_MOVE:
    if (!mScaling) {
     if (getScrollY() == 0) {
      y = ev.getY();//滑动到顶部时，記錄位置
     } else {
      break;
     }
    }
    int distance = (int) ((ev.getY() - y)*mScaleRatio);
    if (distance < 0) break;//若往下滑動
    mScaling = true;
    setZoom(distance);
    return true;
   case MotionEvent.ACTION_UP:
    mScaling = false;
    replyView();
    break;
  }
  return super.onTouchEvent(ev);
 }
 /**拡大view*/
 private void setZoom(float s) {
  float scaleTimes = (float) ((zoomViewWidth+s)/(zoomViewWidth*1.0));
//  如超過最大拡大倍数，直接返回
  if (scaleTimes > mScaleTimes) return;
  ViewGroup.LayoutParams layoutParams = zoomView.getLayoutParams();
  layoutParams.width = (int) (zoomViewWidth + s);
  layoutParams.height = (int)(zoomViewHeight*((zoomViewWidth+s)/zoomViewWidth));
//  設定控件水平居中
  ((MarginLayoutParams) layoutParams).setMargins(-(layoutParams.width) - zoomViewWidth) / 2, 0, 0, 0);
  zoomView.setLayoutParams(layoutParams);
 }
 /**バウンド*/
 private void replyView() {
  final float distance = zoomView.getMeasuredWidth() - zoomViewWidth;
  // アニメーションを設定
  ValueAnimator anim = ObjectAnimator.ofFloat(distance, 0.0F).setDuration((long) (distance * mReplyRatio));
  anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   @Override
   public void onAnimationUpdate(ValueAnimator animation) {
    setZoom((Float) animation.getAnimatedValue());
   }
  });
  anim.start();
 }
 @Override
 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  super.onScrollChanged(l, t, oldl, oldt);
  if (onScrollListener!=null) onScrollListener.onScroll(l,t,oldl,oldt);
 }
 private OnScrollListener onScrollListener;
 public void setOnScrollListener(OnScrollListener onScrollListener) {
  this.onScrollListener = onScrollListener;
 }
 /**スライドリスナー*/
 public interface OnScrollListener{
  void onScroll(int scrollX,int scrollY,int oldScrollX, int oldScrollY);
 }
}

onTouchEventメソッドでは、まず現在が拡大状態かどうかを確認し、そうでない場合は、顶部にいる場合にタッチイベントの場所を記録します。ACTION_DOWNイベントにこれを書くこともできますが、顶部にいない場合は処理しません。

その後、スライドの距離を計算します。下にスライドする場合は処理しません。注意点は、この距離は現在の位置と最初のACTION_DOWN動作の位置の距離であり、したがって距離が0以下の場合は、「拡大していない&&下にスライド」です。この場合、スクロールビューをスライドさせるべきです。もちろん、距離が0以上の場合、コントロールを拡大し始めます。setZoomメソッドが呼び出されることが見られます。ここでは、コントロールの下げて拡大、引き上げて元に戻す、戻るすべてが行われました。また、戻るもこのメソッドが呼び出されます。

手を上げたときに戻る、これ以上の説明は必要ありません。

コード全体としては比較的簡単ですが、他の実装が必要な場合は、簡単に追加することもできます。例えば、微博のように画像を拡大する場合や、手を離したときにデータを更新する場合など、以下の方法で完全に実装できます。
onTouchEventにコールバックインターフェースを追加し、外部で具体的なロジックを実装すれば良いだけです。

使用方法

普通のScollViewのように直接使用できます。これ以上の説明は不要です。

ソースコード：ダウンロード先

これでこの記事はすべて終わりです。皆様の学習に役立つことを願っています。また、ナイアラ教程を多くの皆様にサポートしていただければ幸いです。

声明：この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このサイトは所有権を持ちません。人工的に編集されていないため、法的責任を負いません。著作権に疑問がある場合は、以下のメールアドレスにご連絡ください：notice#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、このサイトは即座に侵害する可能性のあるコンテンツを削除します。）