AndroidでカスタムscrollViewを実装してトップ画像をドラッグして拡大する

この記事では、scrollViewでトップ画像をドラッグダウンして拡大する具体的なコードを共有しました。ご参照ください。具体的な内容は以下の通りです。

以前のscrollViewのトップ画像をドラッグダウンして拡大する機能は、後のプロジェクトで何度か使いましたが、それぞれActivityに書くのは面倒くさくて、再利用しにくいです。この数日間は暇だったので、カスタムscrollViewを使用してこの効果を実現することにしました。原理は以前と基本的に同じなので、詳しくは言いません。直接コードを上げます。

package com.example.myapplication.dropzoom; 
import android.animation.ObjectAnimator; 
import android.animation.ValueAnimator; 
import android.content.Context; 
import android.util.AttributeSet; 
import android.view.MotionEvent; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ScrollView; 
/** 
 * Created by Liujinhua on 2016/3/25. 
 * 下拉放大scrollView 
 */ 
public class DropZoomScrollView extends ScrollView implements View.OnTouchListener { 
  // 记录首次按下位置 
  private float mFirstPosition = 0; 
  // 是否正在放大 
  private Boolean mScaling = false; 
  private View dropZoomView; 
  private int dropZoomViewWidth; 
  private int dropZoomViewHeight; 
  public DropZoomScrollView(Context context) { 
    super(context); 
  } 
  public DropZoomScrollView(Context context, AttributeSet attrs) { 
    super(context, attrs); 
  } 
  public DropZoomScrollView(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
  } 
  @Override 
  protected void onFinishInflate() { 
    super.onFinishInflate(); 
    init(); 
  } 
  @Override 
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
  } 
  private void init() { 
    setOverScrollMode(OVER_SCROLL_NEVER); 
    if (getChildAt(0) != null) { 
      ViewGroup vg = (ViewGroup) getChildAt(0); 
      if (vg.getChildAt(0) != null) { 
        dropZoomView = vg.getChildAt(0); 
        setOnTouchListener(this); 
      } 
    } 
  } 
  @Override 
  public boolean onTouch(View v, MotionEvent event) { 
    if (dropZoomViewWidth <= 0 || dropZoomViewHeight <= 0) { 
      dropZoomViewWidth = dropZoomView.getMeasuredWidth(); 
      dropZoomViewHeight = dropZoomView.getMeasuredHeight(); 
    } 
    switch (event.getAction()) { 
      case MotionEvent.ACTION_UP: 
        //指が離れた後、画像を復元 
        mScaling = false; 
        replyImage(); 
        break; 
      case MotionEvent.ACTION_MOVE: 
        if (!mScaling) { 
          if (getScrollY() == 0) { 
            mFirstPosition = event.getY();// 先頭にスクロールした場合位置を記録し、それ以外は通常に戻る 
          } else { 
            break; 
          } 
        } 
        int distance = (int) ((event.getY() - mFirstPosition) * 0.6); // スクロール距離を係数で乗算 
        if (distance < 0) { // 現在位置が記録位置よりも小さい場合、通常に戻ります 
          break; 
        } 
        // 拡大処理 
        mScaling = true; 
        setZoom(1 + distance); 
        return true; // trueを返すと、タッチイベントが完了し、再処理されないことを示します 
    } 
    return false; 
  } 
  // バウンドアニメーション（属性アニメーションを使用） 
  public void replyImage() { 
    final float distance = dropZoomView.getMeasuredWidth() - dropZoomViewWidth; 
    // アニメーションを設定 
    ValueAnimator anim = ObjectAnimator.ofFloat(0.0F, 1.0F).setDuration((long) (distance * 0.7)); 
    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
      @Override 
      public void onAnimationUpdate(ValueAnimator animation) { 
        float cVal = (Float) animation.getAnimatedValue(); 
        setZoom(distance - ((distance) * cVal)); 
      } 
    }); 
    anim.start(); 
  } 
  //拡大 
  public void setZoom(float s) { 
    if (dropZoomViewHeight <= 0 || dropZoomViewWidth <= 0) { 
      return; 
    } 
    ViewGroup.LayoutParams lp = dropZoomView.getLayoutParams(); 
    lp.width = (int) (dropZoomViewWidth + s); 
    lp.height = (int) (dropZoomViewHeight * ((dropZoomViewWidth + s) / dropZoomViewWidth)); 
    dropZoomView.setLayoutParams(lp); 
  } 
} 

使用の際には非常に簡単です

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:orientation="vertical"> 
  <com.example.myapplication.dropzoom.DropZoomScrollView 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical"> 
      <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:src="@drawable/bg" /> 
      <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:src="@drawable/home_bg" /> 
      <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:src="@drawable/home_bg" /> 
      <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:src="@drawable/home_bg" /> 
      <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:src="@drawable/home_bg" /> 
    </LinearLayout> 
  </com.example.myapplication.dropzoom.DropZoomScrollView> 
</LinearLayout> 

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

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