偶尔在知乎上看到 豌豆荚工作氛围和企业文化都比較好，有归属感，多写写博客，希望能被豌豆荚发现
。
如题，引导页 聚焦效果，用于标注某个区域的功能，假设感觉有点意思，请给个赞。如图：
设计思路：
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