2011.10.09——— android ImageView放大缩小(2)

2011.10.09——— android ImageView放大缩小(2)

参考：http://www.eoeandroid.com/thread-54846-1-1.html
http://blog.csdn.net/lishubing1126/article/details/4926770

需求：
在一个ListView里面 做一个展示图片的效果 点击item图片后 放大到屏幕中间，再点击缩小
实现：
刚开始 就仿照上一篇博客写 不久行了嘛

随之 遇见的问题接踵而来

1、在listview里面 放大的时候 只会显示在item里面 撑大item那怎么办呢？
    这个图片本来就是在item里面 我又不可能让它不在item里面 所以 这个就很郁闷了
这时 我想到了以前做拖拽的时候 通过getDrawingCache()来得到缓存图片 然后把它加到最外层的layout里面 不久可以了吗 哈哈哈

2、因为图片要展示在中间 所以应该有一个移动的过程 就需要TranslateAnimation了 当然我们需要AnimationSet来整个两个动画效果

但是 TranslateAnimation里面 是需要计算偏移量的 这时候 就不能用clickListener了 我用了setOnTouchListener

具体代码如下：

package com.lp;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.view.animation.Animation.AnimationListener;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;

class ListItemInf{
	int cImg;
};




public class MainActivity extends Activity {

	private ArrayList<ListItemInf> mData;
	MyAdapter adapter;
	
	private boolean isClick = false;
	
	private ListView lv;
	private LinearLayout ll;
	private RelativeLayout rl;
	private Context mContext;
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);//全屏
		setContentView(R.layout.main);
		findView();
		mData = getData();
		adapter = new MyAdapter(this);
		lv.setAdapter(adapter);
	}
	
	private void findView(){
		lv = (ListView)findViewById(R.id.lv);
		ll = (LinearLayout)findViewById(R.id.ll);
		rl = (RelativeLayout)findViewById(R.id.rl);
		mContext = this;
	}

	private ArrayList<ListItemInf> getData() {
		ArrayList<ListItemInf> list = new ArrayList<ListItemInf>();
		ListItemInf map = new ListItemInf();
        for(int i=0;i<8;i++){
    	map = new ListItemInf();
		map.cImg = R.drawable.aa;
		list.add(map);

		map = new ListItemInf();
		map.cImg = R.drawable.bb;
		list.add(map);

		map = new ListItemInf();
		map.cImg = R.drawable.cc;
		list.add(map);
        }
		return list;
	
	}


	public final class ViewHolder {
		public ImageView img;
	}

	public class MyAdapter extends BaseAdapter {

		private LayoutInflater mInflater;

		public MyAdapter(Context context) {
			this.mInflater = LayoutInflater.from(context);
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return mData.size();
		}

		@Override
		public Object getItem(int arg0) {
			// TODO Auto-generated method stub
			return null;
		}

		@Override
		public long getItemId(int arg0) {
			// TODO Auto-generated method stub
			return 0;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {

			ViewHolder holder = null;
			if (convertView == null) {
				holder = new ViewHolder();
				convertView = mInflater.inflate(R.layout.vlist2, null);
				holder.img = (ImageView) convertView.findViewById(R.id.img);
				
				convertView.setTag(holder);

			} else {

				holder = (ViewHolder) convertView.getTag();
			}
			
			holder.img.setImageResource((Integer) mData.get(position).cImg);
			holder.img.setOnTouchListener(new OnTouchListener() {
				
				@Override
				public boolean onTouch(View v, MotionEvent event) {
					if(event.getAction()==MotionEvent.ACTION_DOWN && !isClick){
						isClick = true;
						int x = (int)event.getX();
						int y = (int)event.getY();
						
						
						//得到左上角的坐标
						int pointX = (int)(event.getRawX() - x);
						final int pointY = (int)(event.getRawY() - y);
						
						
						
						System.out.println(pointX+"   "+pointY);
						LayoutParams params2 = new LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);
						params2.topMargin = pointY;
						//params2.leftMargin = pointX;
						params2.width = v.getWidth();
						params2.height = v.getHeight();
						final ImageView iv = new ImageView(mContext);
						v.setDrawingCacheEnabled(true);
						final Bitmap bitmap = v.getDrawingCache();
						iv.setImageBitmap(bitmap);
						rl.addView(iv, params2);
						
						
						DisplayMetrics metric = new DisplayMetrics();
				        getWindowManager().getDefaultDisplay().getMetrics(metric);
				        int width = metric.widthPixels;  // 屏幕宽度（像素）
				        int height = metric.heightPixels;  // 屏幕高度（像素）
						System.out.println(width+"*"+height);
						
						Animation b = AnimationUtils.loadAnimation(MainActivity.this, R.anim.bg_zoomout);
						AnimationSet as = new AnimationSet(true);
						TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.ABSOLUTE, 90, Animation.RELATIVE_TO_SELF, 0, Animation.ABSOLUTE, 200 - pointY);
						ta.setDuration(2000);
						//以左上角为原点放大
						ScaleAnimation sa = new ScaleAnimation(1,2f,1,2f,
								 Animation.ABSOLUTE,90,   
							      Animation.ABSOLUTE,200 - pointY);
					    sa.setDuration(2000);
					    sa.setFillAfter(true); //让其保持动画结束时的状态。
					    as.addAnimation(ta);
					    as.addAnimation(sa);
					    as.setFillAfter(true);
						iv.startAnimation(as);
						ll.setBackgroundColor(Color.BLACK);
						ll.startAnimation(b);
						
						
						
						final LayoutParams params3 = new LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);
						params3.topMargin = 200;
						params3.leftMargin = 90;
						params3.width = v.getWidth()*2;
						params3.height = v.getHeight()*2;
						as.setAnimationListener(new AnimationListener() {
							
							@Override
							public void onAnimationStart(Animation animation) {
								// TODO Auto-generated method stub
								
							}
							
							@Override
							public void onAnimationRepeat(Animation animation) {
								// TODO Auto-generated method stub
								
							}
							
							@Override
							public void onAnimationEnd(Animation animation) {
								
								final ImageView iv2 = new ImageView(mContext);
								iv2.setImageBitmap(bitmap);
								iv2.setOnClickListener(new OnClickListener() {
									
									@Override
									public void onClick(View v) {
										isClick = false;
										Animation b = AnimationUtils.loadAnimation(MainActivity.this, R.anim.bg_zoomin);
										
										AnimationSet as = new AnimationSet(true);
										TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.ABSOLUTE, 0 - 90, Animation.RELATIVE_TO_SELF, 0, Animation.ABSOLUTE, pointY-200);
										ta.setDuration(2000);
										//以左上角为原点放大
										ScaleAnimation sa = new ScaleAnimation(1,0.5f,1,0.5f,
												 Animation.ABSOLUTE,0-90,   
											      Animation.ABSOLUTE,pointY-200);
									    sa.setDuration(2000);
									    sa.setFillAfter(true); //让其保持动画结束时的状态。
									    as.addAnimation(ta);
									    as.addAnimation(sa);
									    as.setFillAfter(true);
										
										iv2.startAnimation(as);
										ll.startAnimation(b);
										
										as.setAnimationListener(new AnimationListener() {

											@Override
											public void onAnimationStart(Animation animation) {
												// TODO Auto-generated method stub
												
											}

											@Override
											public void onAnimationRepeat(Animation animation) {
												// TODO Auto-generated method stub

											}

											@Override
											public void onAnimationEnd(Animation animation) {
												// TODO Auto-generated method stub
												rl.removeView(iv2);
												ll.setBackgroundColor(Color.TRANSPARENT);
											}
										});
										
									}
								});
								rl.removeView(iv);
								rl.addView(iv2, params3);
							}
						});
						
					}
					return false;
				}
			});
			return convertView;
		}
		
	}

}

注意一个非常重要的问题：

AnimationSet只能并行，不能串行  所以会导致动画运行后的结果和我们想要得到的结果不一样  这里有个地方需要注意

ScaleAnimation的中心点 一定要和TranslateAnimationid移动的x y值一样

例如：

TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.ABSOLUTE, 90, Animation.RELATIVE_TO_SELF, 0, Animation.ABSOLUTE, 200 - pointY);
ScaleAnimation sa = new ScaleAnimation(1,2f,1,2f,Animation.ABSOLUTE,90,Animation.ABSOLUTE,200 - pointY);

listview效果：


放大中：



放大后：



缩小中：





代码见附件：