自定义控件 imageview 双击显示红色边框

在项目中用到了一个如下功能：双击自定义imageview控件，然后控件显示一个红色边框，表示该控件处于可编辑状态，再次双击边框消失，控件不可再被编辑。现把双击和画线部分单独摘出来，希望能帮到别人。

首先是自定义控件的代码：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.ImageView;

public class MyImageView extends ImageView {

	private boolean isDisplay = false;//是否显示边框
	private int imgId;//序列属性

	/** 构造方法 **/
	public MyImageView(Context context) {
		super(context);
	}

	public MyImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	/**编辑状态下图片周围画一圈红线**/
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		if (isDisplay) {
			Paint paint = new Paint();
			paint.setColor(android.graphics.Color.RED);//线条颜色
			paint.setStrokeWidth(3);//线条宽度

			/** 画四条线 **/
			canvas.drawLine(0, 1, this.getWidth() - 1, 1, paint);
			canvas.drawLine(1, 0, 1, this.getHeight() - 1, paint);
			canvas.drawLine(this.getWidth() - 2, 0, this.getWidth() - 2,
					this.getHeight() - 1, paint);
			canvas.drawLine(0, this.getHeight() - 2, this.getWidth() - 1,
					this.getHeight() - 2, paint);
		}
	}

	/** 设定边框是否显示 **/
	public void setDisplayable(boolean isEditable) {
		this.isDisplay = isEditable;
		postInvalidate();//调用onDraw，重新画线
	}

	/** 获取边框是否显示 **/
	public boolean getDisplayable() {
		return isDisplay;
	}

	/** 设定图片ID **/
	public void setimgId(int img_ID) {
		this.imgId = img_ID;
	}

	/** 获取图片ID **/
	public int getimgId() {
		return imgId;
	}
}

比较简单，画线是在onDraw方法中实现的，postInvalidate方法可以调用onDraw方法，每次更改isDisplay时都需要重新画线。

下面是主程序代码：

import view.MyImageView;
import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

public class MainActivity extends Activity {
	private MyImageView img1, img2, img3;
	private MyImageView imgArray[] = { img1, img2, img3 };
	private int imgNum = 3;//图片数量
	private int currentId,lastId = 4;//当前图片标识和上次操作的图片标识
	private GestureDetector mGestureDetector;// 双击手势监器
	private ImgClickListener imgClicklistener = new ImgClickListener();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mGestureDetector = new GestureDetector(MainActivity.this,
				new LearnGestureListener());
		imgArray[0]=(MyImageView)findViewById(R.id.myImageView1);
		imgArray[1]=(MyImageView)findViewById(R.id.myImageView2);
		imgArray[2]=(MyImageView)findViewById(R.id.myImageView3);

		for(int i=0;i<imgNum;i++){
			imgArray[i].setimgId(i);
			imgArray[i].setOnTouchListener(imgClicklistener);
			imgArray[i].setClickable(true);//允许双击操作（必须要有）
		}
	}

	/* 单击操作监听 */
	private class ImgClickListener implements OnTouchListener {
		@Override
		public boolean onTouch(View v, MotionEvent event) {
			switch (event.getAction() & MotionEvent.ACTION_MASK) {
			case MotionEvent.ACTION_DOWN:
				currentId = ((MyImageView) v).getimgId();// 获取当前操作图片的ID
				break;
			}
			mGestureDetector.onTouchEvent(event);// 执行双击手势操作
			return false;
		}
	}

	/* 双击操作监听 */
	class LearnGestureListener extends GestureDetector.SimpleOnGestureListener {
		@Override
		public boolean onDoubleTap(MotionEvent arg0) {
				if (lastId != currentId) {

					/** 同一图片在可编辑和不可编辑状态切换 **/

					for (int i = 0; i < imgNum; i++) {
						imgArray[i].setDisplayable(false);
					}
					imgArray[currentId].setDisplayable(true);
					lastId = currentId;
				} else {

					/** 不同图片在可编辑和不可编辑状态切换**/
					if (imgArray[currentId].getDisplayable()) {
						for (int i = 0; i < imgNum; i++) {
							imgArray[i].setDisplayable(false);
						}
					} else {
						for (int i = 0; i < imgNum; i++) {
							imgArray[i].setDisplayable(false);
						}
						imgArray[currentId].setDisplayable(true);
					}

				}
			return false;
		}
	}
}

基本原理比较简单，就是把所有的控件都存在数组中，这样的话很多操作通过遍历就可以实现，比较方便。初始化的时候给每一个图片一个唯一的ID，在程序运行中通过该ID来识别操作的图片是哪一个。在执行双击操作时首先会有一个ACTION_DOWN的操作，在这个操作执行的时候先把当前操作的图片的ID记录在currentId变量中，然后在双击操作执行的时候比较该ID和lastId变量，再进行相应的操作。

我的程序是在平板中实现的，跟在手机中实现的原理是完全一样的，有问题可以留言

源代码下载链接：点击打开链接 http://download.csdn.net/detail/yxg190221/7551473

自定义控件 imageview 双击显示红色边框