原型

美麗說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（顯示上層影象），是無法顯示出來透明的部分的，截圖如下：