2015-12-8-一個功能引導頁面的實現思路(效果參考:美麗說app)
阿新 • • 發佈:2019-01-30
原型
美麗說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(顯示上層影象),是無法顯示出來透明的部分的,截圖如下: