一个功能引导页面的实现思路（效果参考：美丽说app）

2015-12-08 一个功能引导页面的实现思路（效果参考：美丽说app）

原型

美丽说app的首页引导效果图如下：

美丽说首页引导

下载美丽说的apk，解压后，找到切图如下：

这里写图片描述

可以看到，由于切图右下角留出白色透明圆圈，所以有了上面的效果。

进一步思考

由于android屏幕尺寸的碎片化，所以如果我们要做一张固定的切图，把透过来的部分留在固定位置并不是一个好的解决方案。所以可以考虑把“我”上面的圆圈用代码来绘制，如果要给让某一个控件透过压黑的背景显示出来，必须要精确控制背景要透明的效果。

实施

获取控件的位置

关键代码：

ImageView t = (ImageView)findViewById(R.id.l);
  t.getLocationOnScreen(location);
  int x = location[0];
  int y = location[1];
  System.out.println("x:" + x + "y:" + y);
  System.out.println("图片各个角Left：" + t.getLeft() + "Right：" + t.getRight()
  + "Top：" + t.getTop() + "Bottom：" + t.getBottom());

制作屏幕宽高的图片

  /**
  * 生成对应颜色的全屏图像
  * @param context
  * @param color
  * @return
  */
  public static Bitmap createColorWallpaer(Context context, int color) {
  WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
  Point outSize = new Point();
  wm.getDefaultDisplay().getSize(outSize);
  Bitmap bitmap = Bitmap.createBitmap(outSize.x, outSize.y, Bitmap.Config.ARGB_8888);
  if (bitmap != null) {
  bitmap.eraseColor(color);
  }
  return bitmap;
  }

outSize就是屏幕的尺寸。

获取状态栏高度

因为制作背景图的时候，不要把状态栏算在内，所以制作背景图时，需要把状态栏的尺寸高度刨掉。

Rect frame = new Rect();
getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
int statusBarHeight = frame.top;

decorView是window中的最顶层view，可以从window中获取到decorView，然后decorView有个getWindowVisibleDisplayFrame方法可以获取到程序显示的区域，包括标题栏，但不包括状态栏。
于是，我们就可以算出状态栏的高度了。

生成我们需要的Bitmap

  /**
  * 创建引导图像，在指定位置显示一个圆圈和圆角矩形
  * @param context
  * @param color
  * @return
  */
  public static Bitmap createTipsWallpaer(Context context, int color) {
  Bitmap bitmap = createColorWallpaer(context, color);
  // 创建画笔
  Paint p = new Paint();
  p.setColor(Color.TRANSPARENT);
  //设置图像的叠加模式
  p.setXfermode(new PorterDuffXfermode(Mode.SRC));
  Canvas canvas = new Canvas(bitmap);
  canvas.drawCircle(150, 150, 100, p);// 小圆
  //画圆角矩形
  p.setStyle(Paint.Style.FILL);//充满
  p.setAntiAlias(true);// 设置画笔的锯齿效果
  canvas.drawText("画圆角矩形:", 10, 260, p);
  RectF oval3 = new RectF(80, 260, 200, 300);// 设置个新的长方形
  canvas.drawRoundRect(oval3, 10, 10, p);//第二个参数是x半径，第三个参数是y半径
  try {
  saveMyBitmap("yiyixiaozhi", bitmap);
  } catch (IOException e) {
  // TODO Auto-generated catch block
  e.printStackTrace();
  }
  return bitmap;
  }
  /**
  * 保存Bitmap为本地文件
  * @param bitName
  * @param bmp
  * @throws IOException
  */
  public static void saveMyBitmap(String bitName, Bitmap bmp) throws IOException {
  File f = new File("/sdcard/Note/" + bitName + ".png");
  f.createNewFile();
  FileOutputStream fOut = null;
  try {
  fOut = new FileOutputStream(f);
  } catch (FileNotFoundException e) {
  e.printStackTrace();
  }
  bmp.compress(Bitmap.CompressFormat.PNG, 100, fOut);
  try {
  fOut.flush();
  } catch (IOException e) {
  e.printStackTrace();
  }
  try {
  fOut.close();
  } catch (IOException e) {
  e.printStackTrace();
  }
  }

下来我们用picasa打开本地保存的文件，成功了，效果如下：

这里写图片描述

注意，如果不对paint应用Mode.SRC（显示上层图像），是无法显示出来透明的部分的，截图如下：

这里写图片描述

如有兴趣进一步探讨，欢迎订阅我的微信公众号（yiyixiaozhi）留言给我。或者在此博客下方进行评论。

这里写图片描述

参考网址：

• Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
• Android得到控件在屏幕中的坐标
• Android bitmap图片处理
• android中Bitmap对象怎么保存为文件?
• android 状态栏、标题栏、屏幕高度