引导页 聚焦效果

。

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

设计思路：

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();
  }
}