DragImageView下拉拖動(dòng)圖片放大,先上圖:
在成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)過(guò)程中,需要針對(duì)客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析,以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。成都創(chuàng)新互聯(lián)還需要根據(jù)客戶的需求進(jìn)行功能模塊的開發(fā)和設(shè)計(jì),包括內(nèi)容管理、前臺(tái)展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。
主要的類:繼承了RelativeLayout,再在RelativeLayout里面添加ImageView,通過(guò)Touch事件來(lái)改變ImageView的縮放,縮放時(shí)計(jì)算scale,使其在手指移動(dòng)到屏幕底部時(shí),圖片底部也剛好到達(dá)屏幕底部,手指松開時(shí),圖片逐步回彈。
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; /** 是否處在回彈狀態(tài) */ private boolean isBacking = false; /** 用于記錄拖拉圖片移動(dòng)的坐標(biāo)位置 */ private Matrix matrix = new Matrix(); /** 用于記錄圖片要進(jìn)行拖拉時(shí)候的坐標(biāo)位置 */ private Matrix currentMatrix = new Matrix(); private Matrix defaultMatrix = new Matrix(); /** 圖片的寬高 */ private float imgHeight, imgWidth; /** 初始狀態(tài) */ private int mode = 0; /** 拖拉照片模式 */ private final int MODE_DRAG = 1; private float scaleY = 0; /** 用于記錄開始時(shí)候的坐標(biāo)位置 */ private PointF startPoint = new PointF(); /** 用于記錄開始時(shí)候的在整個(gè)屏幕中的Y坐標(biāo)位置 */ 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); } /** * 設(shè)置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()); // 當(dāng)該View放置在ScrollView里面時(shí),會(huì)與父控件Touch事件沖突,所以touch該控件區(qū)域時(shí),父控件不可用 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當(dāng)前的移動(dòng)位置 currentMatrix.set(imageView.getImageMatrix()); startPoint.set(event.getX(), event.getY()); startRawY = event.getRawY(); Log.w(TAG, "onTouchEvent startRawY:" + startRawY); } break; // 手指在屏幕上移動(dòng),改事件會(huì)被不斷觸發(fā) case MotionEvent.ACTION_MOVE: // 拖拉圖片 if (mode == MODE_DRAG) { // float dx = event.getX() - startPoint.x; // 得到x軸的移動(dòng)距離 float dy = event.getY() - startPoint.y; // 得到y(tǒng)軸的移動(dòng)距離 // 在沒(méi)有移動(dòng)之前的位置上進(jìn)行移動(dòng) if (dy > 0) { matrix.set(currentMatrix); Log.w(TAG, "onTouchEvent dy:" + dy); scale = ((dy / (displayHeight - startRawY) * (displayHeight - imgHeight)) + imgHeight) / imgHeight; // 得到縮放倍數(shù),當(dāng)手指移動(dòng)到屏幕底部時(shí),圖片也達(dá)到屏幕底部 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: // 當(dāng)觸點(diǎn)離開屏幕,圖片還原 mHandler.sendEmptyMessage(BACK_SCALE); case MotionEvent.ACTION_POINTER_UP: // 當(dāng)兩個(gè)手指移動(dòng)時(shí),取消移動(dòng)圖片 mode = 0; break; } // 設(shè)置的Touch監(jiān)聽(tīng)事件 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);// 得到縮放倍數(shù) 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事件監(jiān)聽(tīng) */ public interface TouchEventListener { public void onTouchEvent(MotionEvent event); } /** 回彈事件監(jiān)聽(tīng) */ public interface BackScaleListener { public void onBackScale(); } }
調(diào)用的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的寬高,若不設(shè)置則按圖片寬高壓縮至屏幕寬度 */ // mDragScaleImageView.setImageWidthAndHeight(720, 300); // Touch事件監(jiān)聽(tīng) mDragScaleImageView.setTouchEventListener(new TouchEventListener() { @Override public void onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub // do something here } }); // 回彈事件監(jiān)聽(tīng) mDragScaleImageView.setBackScaleListener(new BackScaleListener() { @Override public void onBackScale() { // TODO Auto-generated method stub // do something here } }); } }
xml 布局文件:
下載:源碼
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。