android自定义ImageView实现缩放,回弹效果

话不多说上代码:
MainActivity.java
public class MainActivity extends Activity{
private LinearLayout ll_viewArea;
private LinearLayout.LayoutParams parm;
private ViewArea viewArea;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//去除title
requestWindowFeature(Window.FEATURE_NO_TITLE);
//去掉Activity上面的状态栏
getWindow().setFlags(WindowManager.LayoutParams. FLAG_FULLSCREEN,
WindowManager.LayoutParams. FLAG_FULLSCREEN);

setContentView(R.layout.main);

ll_viewArea = (LinearLayout) findViewById(R.id.ll_viewArea);
parm = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);
viewArea = new ViewArea(MainActivity.this,R.drawable.psu); //自定义布局控件,用来初始化并存放自定义imageView
ll_viewArea.addView(viewArea,parm);

}
}
这段代码中要注意的问题是去掉title和状态栏两句代码必须放到 setContentView(R.layout.main);话的前面。而且这两句话必须有,因为后面计算回弹距离是根据全屏计算的(我的i9000就是480x800),如果不去掉title和状态栏,后面的回弹会有误差,总是回弹不到想要的位置。

下面看看ViewArea.java文件。就是用来存放和初始化自定义imageView的地方。将来的自定义ImageView被限制在其内部移动缩放。
public class ViewArea extends FrameLayout{ //前面说了ViewArea是一个布局, 所以这里当然要继承一个布局了。LinearLayout也可以
private int imgDisplayW;
private int imgDisplayH;
private int imgW;
private int imgH;
private TouchView touchView;
private DisplayMetrics dm;
//resId为图片资源id
public ViewArea(Context context,int resId) { //第二个参数是图片的资源ID,当然也可以用别的方式获取图片
/* dm = new DisplayMetrics();
((Activity)context).getWindowManager().getDefaultDisplay().getMetrics(dm);
imgDisplayW = dm.widthPixels;
imgDisplayH = dm.heightPixels;*//这种方式获取的屏幕大小和下面的方式结果是一样的,都是480x800(i9000分辨率)
super(context);
imgDisplayW = ((Activity)context).getWindowManager().getDefaultDisplay().getWidth();//这里的宽高要和xml中的LinearLayout大小一致,如果要指定大小。xml中 LinearLayout的宽高一定要用px像素单位,因为这里的宽高是像素,用dp会有误差!
imgDisplayH = ((Activity)context).getWindowManager().getDefaultDisplay().getHeight();

touchView = new TouchView(context,imgDisplayW,imgDisplayH);//这句就是我们的自定义ImageView
touchView.setImageResource(resId);//给我们的自定义imageView设置要显示的图片
Bitmap img = BitmapFactory.decodeResource(context.getResources(), resId);
imgW = img.getWidth();
imgH = img.getHeight();
//图片第一次加载进来,判断图片大小从而确定第一次图片的显示方式。
int layout_w = imgW>imgDisplayW?imgDisplayW:imgW;
int layout_h = imgH>imgDisplayH?imgDisplayH:imgH;

//下面的代码是判断图片初始显示样式的,当然可以根据你的想法随意显示,我这里是将宽大于高的图片按照宽缩小的比例把高压缩,前提必须是宽度超出了屏幕大小,相反,如果高大于宽,我将图片按照高缩小的比例把宽压缩,前提必须是高度超出了屏幕大小
if(imgW>=imgH) {
if(layout_w==imgDisplayW){
layout_h = (int) (imgH*((float)imgDisplayW/imgW));
}
}else {
if(layout_h==imgDisplayH){
layout_w = (int) (imgW*((float)imgDisplayH/imgH));
}
}
//这里需要注意的是,采用FreamLayout或者LinearLayout的好处是,如果压缩后的图片扔有一个边大于屏幕,那么只显示在屏幕内的部分,可以通过移动后看见外部(不会裁剪掉图片),如果采用RelativeLayout布局,图片会始终完整显示在屏幕内部,不会有超出屏幕的现象。如果图片不是完全占满屏幕,那么在屏幕上没有图片的地方拖动,图片也会移动,这样的体验不太好,建议用FreamLayout或者LinearLayout。
touchView.setLayoutParams(new FrameLayout.LayoutParams(layout_w,layout_h));//这是自定义imageView的大小,也就是触摸范围
this.addView(touchView);
}

}

下面来看我们最后一个文件,也是最关键的核心文件,自定义ImageView.java.是不是等了很久?!
public class TouchView extends ImageView
{
static final int NONE = 0;//表示当前没有状态
static final int DRAG = 1; //表示当前处于移动状态
static final int ZOOM = 2; //表示当前处于缩放状态
static final int BIGGER = 3; //表示放大图片
static final int SMALLER = 4; //表示缩小图片
private int mode = NONE; //mode用于标示当前处于什么状态

private float beforeLenght; //第一次触摸两点的距离
private float afterLenght; //移动后两点的距离
private float scale = 0.04f; //缩放因子

private int screenW;//下面两句图片的移动范围,及ViewArea的范围,也就是linearLayout的范围,也就是屏幕方位(都是填满父控件属性)
private int screenH;


private int start_x;//开始触摸点
private int start_y;
private int stop_x ;//结束触摸点
private int stop_y ;
private TranslateAnimation trans; //回弹动画

public TouchView(Context context,int w,int h)//这里传进来的w,h就是图片的移动范围
{
super(context);
this.setPadding(0, 0, 0, 0);
screenW = w;
screenH = h;
}
//用来计算2个触摸点的距离
private float spacing(MotionEvent event) {
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
return FloatMath.sqrt(x * x + y * y);
}


@Override
public boolean onTouchEvent(MotionEvent event)
{
switch (event.getAction() & MotionEvent.ACTION_MASK) {MotionEvent.ACTION_MASK表示多点触控事件
case MotionEvent.ACTION_DOWN:
mode = DRAG;
stop_x = (int) event.getRawX();//表示相对于屏幕左上角为原点的坐标
stop_y = (int) event.getRawY();//同上
start_x = stop_x - this.getLeft();//用(int) event.getX();一样,表示相对于当前点击Widget(控件)左上角的坐标,这里就是相对于自定义imageView左上角的坐标.建议用前者,如果不是全屏拖动,而是指定范围内,一样适用!
start_y = stop_y - this.getTop();用(int) event.getY();一样,this.getTop()表示其顶部相对于父控件的距离

if(event.getPointerCount()==2)
beforeLenght = spacing(event);
break;
case MotionEvent.ACTION_POINTER_DOWN:
if (spacing(event) > 10f) {
mode = ZOOM;
beforeLenght = spacing(event);
}
break;
case MotionEvent.ACTION_UP:

int disX = 0;
int disY = 0;
if(getHeight()<=screenH )//
{
if(this.getTop()<0 )
{
disY = getTop();
//layout(left , top, right,bottom)函数表示设置view的位置。
this.layout(this.getLeft(), 0, this.getRight(), 0 + this.getHeight());

}
else if(this.getBottom()>=screenH)
{
disY = getHeight()- screenH+getTop();
this.layout(this.getLeft(), screenH-getHeight(), this.getRight(), screenH);
}
}else{
int Y1 = getTop();
int Y2 = getHeight()- screenH+getTop();
if(Y1>0)
{
disY= Y1;
this.layout(this.getLeft(), 0, this.getRight(), 0 + this.getHeight());
}else if(Y2<0){
disY = Y2;
this.layout(this.getLeft(), screenH-getHeight(), this.getRight(), screenH);
}
}
if(getWidth()<=screenW)
{
if(this.getLeft()<0)
{
disX = getLeft();
this.layout(0, this.getTop(), 0+getWidth(), this.getBottom());
}
else if(this.getRight()>screenW)
{
disX = getWidth()-screenW+getLeft();
this.layout(screenW-getWidth(), this.getTop(), screenW, this.getBottom());
}
}else {
int X1 = getLeft();
int X2 = getWidth()-screenW+getLeft();
if(X1>0) {
disX = X1;
this.layout(0, this.getTop(), 0+getWidth(), this.getBottom());
}else if(X2<0) {
disX = X2;
this.layout(screenW-getWidth(), this.getTop(), screenW, this.getBottom());
}

}
//如果图片缩放到宽高任意一个小于100,那么自动放大,直到大于100.
while(getHeight()<100||getWidth()<100) {

setScale(scale,BIGGER);
}
//根据disX和disY的偏移量采用移动动画回弹归位,动画时间为500毫秒。
if(disX!=0 || disY!=0)
{
trans = new TranslateAnimation(disX, 0, disY, 0);
trans.setDuration(500);
this.startAnimation(trans);
}
mode = NONE;
break;
case MotionEvent.ACTION_POINTER_UP:
mode = NONE;
break;
case MotionEvent.ACTION_MOVE:

if (mode == DRAG) {
//执行拖动事件的时,不断变换自定义imageView的位置从而达到拖动效果
this.setPosition(stop_x - start_x, stop_y - start_y, stop_x + this.getWidth() - start_x, stop_y - start_y + this.getHeight());
stop_x = (int) event.getRawX();
stop_y = (int) event.getRawY();

} else if (mode == ZOOM) {
if(spacing(event)>10f)
{
afterLenght = spacing(event);
float gapLenght = afterLenght - beforeLenght;
if(gapLenght == 0) {
break;
}
//图片宽度(也就是自定义imageView)必须大于70才可以缩放
else if(Math.abs(gapLenght)>5f&&getWidth()>70)
{
if(gapLenght>0) {
this.setScale(scale,BIGGER);
}else {
this.setScale(scale,SMALLER);
}
beforeLenght = afterLenght; //这句不能少。
}
}
}
break;
}
return true;
}


private void setScale(float temp,int flag) {

if(flag==BIGGER) {
//setFrame(left , top, right,bottom)函数表示改变当前view的框架,也就是大小。
this.setFrame(this.getLeft()-(int)(temp*this.getWidth()),
this.getTop()-(int)(temp*this.getHeight()),
this.getRight()+(int)(temp*this.getWidth()),
this.getBottom()+(int)(temp*this.getHeight()));
}else if(flag==SMALLER){
this.setFrame(this.getLeft()+(int)(temp*this.getWidth()),
this.getTop()+(int)(temp*this.getHeight()),
this.getRight()-(int)(temp*this.getWidth()),
this.getBottom()-(int)(temp*this.getHeight()));
}
}


private void setPosition(int left,int top,int right,int bottom) {
this.layout(left,top,right,bottom);
}

}
最后看下简单的main.xml文件。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/ll_viewArea">
</LinearLayout>

</RelativeLayout>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现这个要求,你可以自定义一个继承自 ImageView 的类,并在其中重写 onMeasure 方法来控制 ImageView 的最大长度和高度。同时,在加载图片时,你可以根据图片的宽高比例来计算缩放比例,然后使用 Matrix 对图片进行缩放操作。 下面是一个示例代码: ```java public class CustomImageView extends ImageView { private int mMaxWidth; // 最大宽度 private int mMaxHeight; // 最大高度 public CustomImageView(Context context) { super(context); init(); } public CustomImageView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public CustomImageView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { // 设置默认的最大宽度和高度 mMaxWidth = Integer.MAX_VALUE; mMaxHeight = Integer.MAX_VALUE; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // 获取 ImageView 的测量模式和尺寸 int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); // 计算根据最大宽度和高度得到的宽度和高度 int maxWidth = Math.min(widthSize, mMaxWidth); int maxHeight = Math.min(heightSize, mMaxHeight); int scaledWidth = widthSize; int scaledHeight = heightSize; // 根据图片的宽高比例计算缩放比例 Drawable drawable = getDrawable(); if (drawable != null) { int imageWidth = drawable.getIntrinsicWidth(); int imageHeight = drawable.getIntrinsicHeight(); float scale = Math.min((float) maxWidth / imageWidth, (float) maxHeight / imageHeight); scaledWidth = (int) (imageWidth * scale); scaledHeight = (int) (imageHeight * scale); } // 根据测量模式设置最终的宽度和高度 int finalWidth = (widthMode == MeasureSpec.EXACTLY) ? widthSize : scaledWidth; int finalHeight = (heightMode == MeasureSpec.EXACTLY) ? heightSize : scaledHeight; // 设置最终的宽度和高度 setMeasuredDimension(finalWidth, finalHeight); } public void setMaxSize(int maxWidth, int maxHeight) { mMaxWidth = maxWidth; mMaxHeight = maxHeight; } } ``` 你可以在布局文件中使用这个自定义ImageView,然后通过调用 `setMaxSize()` 方法来设置最大宽度和高度。当加载图片时,ImageView 会按照比例缩放图片来适应最大的宽度和高度限制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值