English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

AndroidのDragImageViewでドラッグして画像を拡大する効果

DragImageViewを下にドラッグして画像を拡大します。まずは画像を示します：

主要なクラス：RelativeLayoutを継承し、RelativeLayout内にImageViewを追加し、Touchイベントを使用してImageViewの拡大縮小を変更します。拡大縮小時にはscaleを計算し、指がスクリーン底に移動したときに、画像の底もスクリーン底に達するようにします。指を離したときには、画像が少しずつ戻ります。

package com.example.dragimagescale; 
import android.annotation.SuppressLint; 
import android.app.Activity; 
import android.content.Context; 
import android.content.res.TypedArray; 
import android.graphics.Bitmap; 
import android.graphics.BitmapFactory; 
import android.graphics.Matrix; 
import android.graphics.PointF; 
import android.os.Handler; 
import android.os.Message; 
import android.util.AttributeSet; 
import android.util.DisplayMetrics; 
import android.util.Log; 
import android.view.MotionEvent; 
import android.view.WindowManager; 
import android.widget.ImageView; 
import android.widget.ImageView.ScaleType; 
import android.widget.RelativeLayout; 
public class DragScaleImageView extends RelativeLayout { 
 private String TAG = "DragScaleImageView"; 
 private static final int BACK_SCALE = 1010; 
 private Context mContext; 
 private AttributeSet attrs; 
 private int displayWidth = 0; 
 private int displayHeight = 0; 
 private int mImageId; 
 private Bitmap bmp; 
 private ImageView imageView; 
 /** バックルーム状態にいるかどうか */ 
 private boolean isBacking = false; 
 /** 画像をドラッグする際の移動座標位置を記録するため */ 
 private Matrix matrix = new Matrix(); 
 /** 画像をドラッグする際の座標位置を記録するため */ 
 private Matrix currentMatrix = new Matrix(); 
 private Matrix defaultMatrix = new Matrix(); 
 /** 画像の幅と高さ */ 
 private float imgHeight, imgWidth; 
 /** 初期状態 */ 
 private int mode = 0; 
 /** 画像をドラッグするモード */ 
 private final int MODE_DRAG = 1; 
 private float scaleY = 0; 
 /** 開始時の座標位置を記録するため */ 
 private PointF startPoint = new PointF(); 
 /** スクリーン全体のY座標位置を記録するため */ 
 private float startRawY = 0; 
 float scale = 1; 
 private TouchEventListener touchEventListener = null; 
 private BackScaleListener backScaleListener = null; 
 public DragScaleImageView(Context context, AttributeSet attrs) { 
  super(context, attrs); 
  // TODO 自動-generated constructor stub 
  this.mContext = context; 
  this.attrs = attrs; 
  initView(); 
 } 
 public DragScaleImageView(Context context) { 
  super(context); 
  // TODO 自動-generated constructor stub 
  this.mContext = context; 
  initView(); 
 } 
 public DragScaleImageView(Activity activity, Bitmap resBitmap, int width, 
   int height) { 
  super(activity); 
 } 
 /** 
  * 画像を初期化します 
  */ 
 private void initView() { 
  /* スクリーンの解像度を取得します */ 
  DisplayMetrics dm = new DisplayMetrics(); 
  WindowManager mWm = (WindowManager) mContext 
    .getSystemService(Context.WINDOW_SERVICE); 
  mWm.getDefaultDisplay().getMetrics(dm); 
  displayWidth = dm.widthPixels; 
  displayHeight = dm.heightPixels; 
  TypedArray a = mContext.obtainStyledAttributes(attrs, 
    R.styleable.DragScaleImageView); 
  mImageId = a.getResourceId(R.styleable.DragScaleImageView_scale_image, 
    0); 
  a.recycle(); 
  if (null == bmp && mImageId != 0) { 
   bmp = BitmapFactory.decodeResource(getResources(), mImageId); 
   float scale = (float) displayWidth; / (float) bmp.getWidth();// 1080/1800; 
   matrix.postScale(scale, scale, 0, 0); 
   imgHeight = scale; * bmp.getHeight(); 
   imgWidth = scale; * bmp.getWidth(); 
  } else { 
   imgHeight = displayWidth; 
   imgWidth = displayWidth; 
  } 
  initImageView(); 
 } 
 private void initImageView() { 
  imageView = new ImageView(mContext); 
  imageView.setImageMatrix(matrix); 
  defaultMatrix.set(matrix); 
  Log.w(TAG, "imgWidth :" + imgWidth); 
  Log.w(TAG, "imgHeight :" + imgHeight); 
  RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams( 
    (int) imgWidth, (int) imgHeight); 
  imageView.setLayoutParams(layoutParams); 
  imageView.setImageBitmap(bmp); 
  imageView.setScaleType(ScaleType.CENTER_CROP); 
  imageView.addView(imageView); 
 } 
 /** 
  * ImageViewの幅と高さを設定します 
  * 
  * @param width 
  * @param height 
  */ 
 public void setImageWidthAndHeight(int width, int height) { 
  imgWidth = width; 
  imgHeight = height; 
  RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams( 
    (int) imgWidth, (int) imgHeight); 
  imageView.setLayoutParams(layoutParams); 
 } 
 public boolean onTouchEvent(MotionEvent event) { 
  Log.w(TAG, "onTouchEvent :" + event.getAction()); 
  // このViewがScrollView内に配置されている場合、親のTouchイベントと衝突するため、このViewのタッチエリアをタッチしたときには、親が無効になります 
  if (event.getAction() == MotionEvent.ACTION_UP) { 
   getParent().requestDisallowInterceptTouchEvent(false); 
  } else { 
   getParent().requestDisallowInterceptTouchEvent(true);// trueは親クラスの無効を意味します; 
  } 
  switch (event.getAction() & MotionEvent.ACTION_MASK) { 
  // 指がスクリーンに押されました 
  case MotionEvent.ACTION_DOWN: 
   if (isBacking) { 
    return super.onTouchEvent(event); 
   } 
   int[] location = new int[2]; 
   imageView.getLocationInWindow(location); 
   if (location[1] >= 0) { 
    mode = MODE_DRAG; 
    // 記録ImageViewの現在の移動位置 
    currentMatrix.set(imageView.getImageMatrix()); 
    startPoint.set(event.getX(), event.getY()); 
    startRawY = event.getRawY(); 
    Log.w(TAG, "onTouchEvent startRawY:" + startRawY); 
   } 
   break; 
  // 指がスクリーン上で移動している場合、このイベントは繰り返し発生します 
  case MotionEvent.ACTION_MOVE: 
   // 画像をドラッグします 
   if (mode == MODE_DRAG) { 
//    float dx = event.getX() - startPoint.x; // x軸の移動距離を得ます 
    float dy = event.getY() - startPoint.y; // y軸の移動距離を得ます 
    // 移動する前に位置で移動します 
    if (dy > 0) { 
     matrix.set(currentMatrix); 
     Log.w(TAG, "onTouchEvent dy:" + dy); 
     scale = ((dy / (displayHeight - startRawY) * (displayHeight - imgHeight)) + imgHeight) 
       / imgHeight; // 得します拡大倍数、指がスクリーン底部に移動した場合、画像もスクリーン底部に達します 
     Log.w(TAG, "onTouchEvent scale:" + scale); 
     scaleY = dy; 
     RelativeLayout.LayoutParams relativeLayout = new RelativeLayout.LayoutParams( 
       (int) (scale * imgWidth), (int) (scale * imgHeight)); 
     imageView.setLayoutParams(relativeLayout); 
     matrix.postScale(scale, scale, imgWidth / 2, 0); 
     imageView.setImageMatrix(matrix); 
    } 
   } 
   break; 
  // 指がスクリーンから離れます 
  case MotionEvent.ACTION_UP: 
   // タッチポイントがスクリーンから離れた場合、画像を元に戻します 
   mHandler.sendEmptyMessage(BACK_SCALE); 
  case MotionEvent.ACTION_POINTER_UP: 
   // 二本指で移動している場合、画像の移動をキャンセルします 
   mode = 0; 
   break; 
  } 
  // 設定されたTouchリスナーイベント 
  if (touchEventListener != null) { 
   touchEventListener.onTouchEvent(event); 
  } 
  return true; 
 } 
 /** 段階的に回復 */ 
 @SuppressLint("HandlerLeak") 
 private Handler mHandler = new Handler() { 
  @Override 
  public void handleMessage(Message msg) { 
   // TODO 自動-生成されたメソッドスタブ 
   switch (msg.what) { 
   case BACK_SCALE: 
    scale = (scaleY / 2 + imgHeight) / (imgHeight);// 得します拡大倍数 
    if (scaleY > 0) { 
     isBacking = true; 
     matrix.set(currentMatrix); 
     RelativeLayout.LayoutParams relativeLayout = new RelativeLayout.LayoutParams( 
       (int) (scale * imgWidth), (int) (scale * imgHeight)); 
     imageView.setLayoutParams(relativeLayout); 
     matrix.postScale(scale, scale, imgWidth / 2, 0); 
     imageView.setImageMatrix(matrix); 
     scaleY = (float) (scaleY / 2 - 1); 
     mHandler.sendEmptyMessageDelayed(BACK_SCALE, 20);// 段階的に回復 
    } else { 
     scaleY = 0; 
     RelativeLayout.LayoutParams relativeLayout = new RelativeLayout.LayoutParams( 
       (int) imgWidth, (int) imgHeight); 
     imageView.setLayoutParams(relativeLayout); 
     matrix.set(defaultMatrix); 
     imageView.setImageMatrix(matrix); 
     isBacking = false; 
    } 
    if (backScaleListener != null) { 
     backScaleListener.onBackScale(); 
    } 
    break; 
   default: 
    break; 
   } 
   super.handleMessage(msg); 
  } 
 }; 
 public void setTouchEventListener(TouchEventListener touchEventListener) { 
  this.touchEventListener = touchEventListener; 
 } 
 public void setBackScaleListener(BackScaleListener backScaleListener) { 
  this.backScaleListener = backScaleListener; 
 } 
 /** タッチイベントリスナー */ 
 public interface TouchEventListener { 
  public void onTouchEvent(MotionEvent event); 
 } 
 /** バウンスイベントリスナー */ 
 public interface BackScaleListener { 
  public void onBackScale(); 
 } 
}

呼び出されるActivity：

package com.example.dragimagescale; 
import com.example.dragimagescale.DragScaleImageView.BackScaleListener; 
import com.example.dragimagescale.DragScaleImageView.TouchEventListener; 
import android.app.Activity; 
import android.os.Bundle; 
import android.view.MotionEvent; 
public class MainActivity extends Activity { 
 DragScaleImageView mDragScaleImageView; 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  setContentView(R.layout.activity_main); 
  mDragScaleImageView = (DragScaleImageView) findViewById(R.id.dragScaleImageView); 
  /** ImageViewの幅と高さをカスタマイズします。設定しない場合は、画像の幅と高さに合わせてスクリーンの幅に圧縮されます */ 
//  mDragScaleImageView.setImageWidthAndHeight(720, 300); 
  // タッチイベントリスナー 
  mDragScaleImageView.setTouchEventListener(new TouchEventListener() { 
   @Override 
   public void onTouchEvent(MotionEvent event) { 
    // TODO 自動-生成されたメソッドスタブ 
    // ここで何かを行います 
   } 
  }); 
  // バウンスイベントリスナー 
  mDragScaleImageView.setBackScaleListener(new BackScaleListener() { 
   @Override 
   public void onBackScale() { 
    // TODO 自動-生成されたメソッドスタブ 
    // ここで何かを行います 
   } 
  }); 
 } 
}

xml レイアウトファイル：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android 
 xmlns:tools="http://schemas.android.com/tools 
 xmlns:dragscaleimageview="http://schemas.android.com/apk/res/com.example.dragimagescale" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:background="#ffffff" > 
 <com.example.dragimagescale.DragScaleImageView 
  android:id="@"+id/dragScaleImageView" 
  android:layout_width="match_parent"   
  android:layout_height="wrap_content" 
  dragscaleimageview:scale_image="@drawable/image" 
  > 
 </com.example.dragimagescale.DragScaleImageView> 
</RelativeLayout>

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

これでこの記事は全てです。皆さんの学習に役立つことを願っています。また、ナイアラ教程を多くの皆様に支持していただけると嬉しいです。

声明：この記事の内容はインターネットから提供され、著作権者所有に帰属します。コンテンツはインターネットユーザーによって自発的に貢献し、自己でアップロードされました。このサイトは所有権を有しておらず、人間による編集は行われていません。著作権侵害を疑う内容がある場合は、メールで：notice#wまでお知らせください。3codebox.com（メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとれましたら、このサイトは即座に侵害疑いの内容を削除します。）

基本教程
おすすめ