前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android DragImageView实现下拉拖动图片放大效果

Android DragImageView实现下拉拖动图片放大效果

作者头像
砸漏
发布2020-10-28 19:45:56
1.8K0
发布2020-10-28 19:45:56
举报
文章被收录于专栏:恩蓝脚本

DragImageView下拉拖动图片放大,先上图:

主要的类:继承了RelativeLayout,再在RelativeLayout里面添加ImageView,通过Touch事件来改变ImageView的缩放,缩放时计算scale,使其在手指移动到屏幕底部时,图片底部也刚好到达屏幕底部,手指松开时,图片逐步回弹。

代码语言:javascript
复制
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 Auto-generated constructor stub 
this.mContext = context; 
this.attrs = attrs; 
initView(); 
} 
public DragScaleImageView(Context context) { 
super(context); 
// TODO Auto-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); 
this.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事件冲突,所以touch该控件区域时,父控件不可用 
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 Auto-generated method stub 
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; 
} 
/** Touch事件监听 */ 
public interface TouchEventListener { 
public void onTouchEvent(MotionEvent event); 
} 
/** 回弹事件监听 */ 
public interface BackScaleListener { 
public void onBackScale(); 
} 
} 

调用的Activity:

代码语言:javascript
复制
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); 
// Touch事件监听 
mDragScaleImageView.setTouchEventListener(new TouchEventListener() { 
@Override 
public void onTouchEvent(MotionEvent event) { 
// TODO Auto-generated method stub 
// do something here 
} 
}); 
// 回弹事件监听 
mDragScaleImageView.setBackScaleListener(new BackScaleListener() { 
@Override 
public void onBackScale() { 
// TODO Auto-generated method stub 
// do something here 
} 
}); 
} 
} 

xml 布局文件:

代码语言:javascript
复制
<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  

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档