引导页 聚焦效果

偶尔在知乎上看到 豌豆荚工作氛围和企业文化都比較好，有归属感，多写写博客，希望能被豌豆荚发现。

如题，引导页 聚焦效果，用于标注某个区域的功能，假设感觉有点意思，请给个赞。如图：

设计思路：

1、得到想聚焦View的位置location；

2、遮罩层（一个圆圈，其它地方半透），用SurfaceView实现，包括两张图片，一张圆形，一张半透的方形。

      

先在Canvas上画出镂空圆孔，然后在该圆形图片的上下左右4个矩形区域画上那张半透的方形图片，就组成了遮罩层；

3、依照View的location，能够计算得到圆形图片的位置；

4、监听遮罩层的OnTouch事件，每次touch，将依据下一个locaton，重绘SurfaceView；

5、当没有下一个location时，再次点击，遮罩层消失。

源代码分析：

包括3部分，GuideIndexActivity.java、GuideView.java、MainActivity.java。

注：可改动去掉GuideIndexActivity.java，将GuideView在Activity中显示。

MainActivity.java:

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}

	public void showGuide(View v) {
		Button hereBtn = (Button) findViewById(R.id.btn_here);
		TextView godlikeTv = (TextView) findViewById(R.id.tv_godlike);
		ImageView launcherIv = (ImageView) findViewById(R.id.iv_launcher);
		Intent intent = new Intent(MainActivity.this, GuideIndexActivity.class);

		intent.putExtra("ArrayPoints",
				guidePoints(hereBtn, godlikeTv, launcherIv));
		startActivity(intent);
	}
	
	private String guidePoints(View... views) {
		int size = views.length;
		JSONArray array = new JSONArray();
		for (int i = 0; i < size; i++) {
			array.put(viewPoint(views[i]));
		}
		return array.toString();
	}
	
	private JSONObject viewPoint(View view) {
		JSONObject json = new JSONObject();
		int[] location = new int[2];
		view.getLocationOnScreen(location);
		try {
				json.put("x", location[0] + view.getWidth() / 2);
				json.put("y", location[1] + view.getHeight() / 2);
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return json;
	}
}

JSONObject viewPoint(View view) 获取到某View的位置。

String guidePoints(View... views)  将全部的View的位置信息转为JSONArray字符串。

GuideView.java:

public class GuideView extends SurfaceView implements SurfaceHolder.Callback {
	private SurfaceHolder holder;
	private Bitmap focus = BitmapFactory.decodeResource(getResources(),
			R.drawable.bg_guide_focus);
	private Bitmap bg = BitmapFactory.decodeResource(getResources(),
			R.drawable.bg_guide);
	private float focusW, focusH;
	private Context mContext;
	private int ScreenWidth;
	private int ScreenHeight;
	private JSONArray arrayPoints;
	private int step = 0;
	private boolean flag = false;

	public GuideView(Context context) {
		super(context);
		this.mContext = context;
		this.focusH = focus.getHeight();
		this.focusW = focus.getWidth();
		this.holder = this.getHolder();
		Display mDisplay = ((Activity) context).getWindowManager()
				.getDefaultDisplay();
		ScreenWidth = mDisplay.getWidth();
		ScreenHeight = mDisplay.getHeight();
		holder.addCallback(this);
		getHolder().setFormat(PixelFormat.TRANSLUCENT);
	}

	public GuideView(Context context, AttributeSet attributeSet) {
		super(context, attributeSet);
		this.mContext = context;
		this.focusH = focus.getHeight();
		this.focusW = focus.getWidth();
		this.holder = this.getHolder();
		Display mDisplay = ((Activity) context).getWindowManager()
				.getDefaultDisplay();
		ScreenWidth = mDisplay.getWidth();
		ScreenHeight = mDisplay.getHeight();
		holder.addCallback(this);
		getHolder().setFormat(PixelFormat.TRANSLUCENT);
	}

	public void setArrayPoint(JSONArray arrayPoints) {
		this.setVisibility(View.VISIBLE);
		this.arrayPoints = arrayPoints;
		flag = true;
		invalidate();
	}

	@Override
	public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
		// TODO Auto-generated method stub

	}

	@Override
	public void surfaceCreated(SurfaceHolder arg0) {
		// TODO Auto-generated method stub
		if (flag) {
			doDraw(step);
		}
	}

	@Override
	public void surfaceDestroyed(SurfaceHolder arg0) {
		// TODO Auto-generated method stub
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		if (flag) {
			if (step <= arrayPoints.length()) {
				doDraw(step);
			} else {
				((Activity) mContext).finish();
				focus.recycle();
				bg.recycle();
			}
		}
		return super.onTouchEvent(event);
	}

	private void doDraw(int step) {
		// TODO Auto-generated method stub
		Canvas canvas = getHolder().lockCanvas();
		canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
		Rect src = new Rect(0, 0, bg.getWidth(), bg.getHeight());
		if(step < arrayPoints.length()){
		Point point = new Point();
		try {
			JSONObject json = arrayPoints.getJSONObject(step);
			point.x = json.getInt("x");
			point.y = json.getInt("y");
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		int left = (int) (point.x - focusW / 2);
		int top = (int) (point.y - focusH / 2);
		int right = (int) (left + focusW);
		int bottom = (int) (top + focusH);
		canvas.drawBitmap(focus, left, top, null);
		Rect dstTop = new Rect(0, 0, ScreenWidth, top);
		Rect dstBottom = new Rect(0, bottom, ScreenWidth, ScreenHeight);
		Rect dstLeft = new Rect(0, top, left, bottom);
		Rect dstRight = new Rect(right, top, ScreenWidth, bottom);
		canvas.drawBitmap(bg, src, dstTop, null);
		canvas.drawBitmap(bg, src, dstBottom, null);
		canvas.drawBitmap(bg, src, dstLeft, null);
		canvas.drawBitmap(bg, src, dstRight, null);
		switch (step) {
		case 0:
			// first to do something
			break;
		case 1:
			// second to do something
			break;
		case 2:
			// third to do something
			break;
		default:
			break;
		}
		}else if(step == 3){
			
		}
		this.step++;
		getHolder().unlockCanvasAndPost(canvas);
	}

	class Point {
		int x;
		int y;
	}

GuideIndexActivity.java:

public class GuideIndexActivity extends Activity{
	private GuideView guideView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		guideView = new GuideView(this);
		setContentView(guideView);
	}
	
	@Override
	protected void onResume() {
		// TODO Auto-generated method stub
		JSONArray arrayPoints;
		try {
			arrayPoints = new JSONArray(getIntent().getStringExtra("ArrayPoints"));
			guideView.setArrayPoint(arrayPoints);
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		super.onResume();
	}
}

源代码下载地址：http://download.csdn.net/detail/toyuexinshangwan/7603509
转载请标明：http://blog.csdn.net/toyuexinshangwan/article/details/37508619