版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】如何在Android頁(yè)面中使用引導(dǎo)蒙層
今天就跟大家聊聊有關(guān)如何在Android頁(yè)面中使用引導(dǎo)蒙層，可能很多人都不太了解，為了讓大家更加了解，在下給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。public
class
GuideView
extends
RelativeLayout
implements
ViewTreeObserver.OnGlobalLayoutListener
{
private
final
String
TAG
=
getClass().getSimpleName();
private
Context
mContent;
private
List<View>
mViews;
private
boolean
first
=
true;
/**
*
targetView前綴。SHOW_GUIDE_PREFIX
+
targetView.getId()作為保存在SP文件的key。
*/
private
static
final
String
SHOW_GUIDE_PREFIX
=
"show_guide_on_view_";
/**
*
GuideView
偏移量
*/
private
int
offsetX,
offsetY;
/**
*
targetView
的外切圓半徑
*/
private
int
radius;
/**
*
需要顯示提示信息的View
*/
private
View
targetView;
/**
*
自定義View
*/
private
View
customGuideView;
/**
*
透明圓形畫筆
*/
private
Paint
mCirclePaint;
/**
*
背景色畫筆
*/
private
Paint
mBackgroundPaint;
/**
*
targetView是否已測(cè)量
*/
private
boolean
isMeasured;
/**
*
targetView圓心
*/
private
int[]
center;
/**
*
繪圖層疊模式
*/
private
PorterDuffXfermode
porterDuffXfermode;
/**
*
繪制前景bitmap
*/
private
Bitmap
bitmap;
/**
*
背景色和透明度，格式
#aarrggbb
*/
private
int
backgroundColor;
/**
*
Canvas,繪制bitmap
*/
private
Canvas
temp;
/**
*
相對(duì)于targetView的位置.在target的那個(gè)方向
*/
private
Direction
direction;
/**
*
形狀
*/
private
MyShape
myShape;
/**
*
targetView左上角坐標(biāo)
*/
private
int[]
location;
private
boolean
onClickExit;
private
OnClickCallback
onclickListener;
private
RelativeLayout
guideViewLayout;
public
void
restoreState()
{
Log.v(TAG,
"restoreState");
offsetX
=
offsetY
=
0;
radius
=
0;
mCirclePaint
=
null;
mBackgroundPaint
=
null;
isMeasured
=
false;
center
=
null;
porterDuffXfermode
=
null;
bitmap
=
null;
needDraw
=
true;
//
backgroundColor
=
Color.parseColor("#00000000");
temp
=
null;
//
direction
=
null;
}
public
int[]
getLocation()
{
return
location;
}
public
void
setLocation(int[]
location)
{
this.location
=
location;
}
public
GuideView(Context
context)
{
super(context);
this.mContent
=
context;
init();
}
public
int
getRadius()
{
return
radius;
}
public
void
setRadius(int
radius)
{
this.radius
=
radius;
}
public
void
setOffsetX(int
offsetX)
{
this.offsetX
=
offsetX;
}
public
void
setOffsetY(int
offsetY)
{
this.offsetY
=
offsetY;
}
public
void
setDirection(Direction
direction)
{
this.direction
=
direction;
}
public
void
setShape(MyShape
shape)
{
this.myShape
=
shape;
}
public
void
setCustomGuideView(View
customGuideView)
{
this.customGuideView
=
customGuideView;
if
(!first)
{
restoreState();
}
}
public
void
setBgColor(int
background_color)
{
this.backgroundColor
=
background_color;
}
public
View
getTargetView()
{
return
targetView;
}
public
void
setTargetView(View
targetView)
{
this.targetView
=
targetView;
//
restoreState();
if
(!first)
{
//
guideViewLayout.removeAllViews();
}
}
private
void
init()
{
}
public
void
showOnce()
{
if
(targetView
!=
null)
{
mContent.getSharedPreferences(TAG,
Context.MODE_PRIVATE).edit().putBoolean(generateUniqId(targetView),
true).commit();
}
}
private
boolean
hasShown()
{
if
(targetView
==
null)
return
true;
return
mContent.getSharedPreferences(TAG,
Context.MODE_PRIVATE).getBoolean(generateUniqId(targetView),
false);
}
private
String
generateUniqId(View
v)
{
return
SHOW_GUIDE_PREFIX
+
v.getId();
}
public
int[]
getCenter()
{
return
center;
}
public
void
setCenter(int[]
center)
{
this.center
=
center;
}
public
void
hide()
{
Log.v(TAG,
"hide");
if
(customGuideView
!=
null)
{
targetView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
this.removeAllViews();
((FrameLayout)
((Activity)
mContent).getWindow().getDecorView()).removeView(this);
restoreState();
}
}
public
void
show()
{
Log.v(TAG,
"show");
if
(hasShown())
return;
if
(targetView
!=
null)
{
targetView.getViewTreeObserver().addOnGlobalLayoutListener(this);
}
this.setBackgroundResource(R.color.transparent);
((FrameLayout)
((Activity)
mContent).getWindow().getDecorView()).addView(this);
first
=
false;
}
/**
*
添加提示文字，位置在targetView的下邊
*
在屏幕窗口，添加蒙層，蒙層繪制總背景和透明圓形，圓形下邊繪制說(shuō)明文字
*/
private
void
createGuideView()
{
Log.v(TAG,
"createGuideView");
//
添加到蒙層
//
if
(guideViewLayout
==
null)
{
//
guideViewLayout
=
new
RelativeLayout(mContent);
//
}
//
Tips布局參數(shù)
LayoutParams
guideViewParams;
guideViewParams
=
new
LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
guideViewParams.setMargins(0,
center[1]
+
radius
+
10,
0,
0);
if
(customGuideView
!=
null)
{
//
LayoutParams
guideViewParams
=
new
LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
if
(direction
!=
null)
{
int
width
=
this.getWidth();
int
height
=
this.getHeight();
int
left
=
center[0]
-
radius;
int
right
=
center[0]
+
radius;
int
top
=
center[1]
-
radius;
int
bottom
=
center[1]
+
radius;
switch
(direction)
{
case
TOP:
this.setGravity(Gravity.BOTTOM
|
Gravity.CENTER_HORIZONTAL);
guideViewParams.setMargins(offsetX,
offsetY
-
height
+
top,
-offsetX,
height
-
top
-
offsetY);
break;
case
LEFT:
this.setGravity(Gravity.RIGHT);
guideViewParams.setMargins(offsetX
-
width
+
left,
top
+
offsetY,
width
-
left
-
offsetX,
-top
-
offsetY);
break;
case
BOTTOM:
this.setGravity(Gravity.CENTER_HORIZONTAL);
guideViewParams.setMargins(offsetX,
bottom
+
offsetY,
-offsetX,
-bottom
-
offsetY);
break;
case
RIGHT:
guideViewParams.setMargins(right
+
offsetX,
top
+
offsetY,
-right
-
offsetX,
-top
-
offsetY);
break;
case
LEFT_TOP:
this.setGravity(Gravity.RIGHT
|
Gravity.BOTTOM);
guideViewParams.setMargins(offsetX
-
width
+
left,
offsetY
-
height
+
top,
width
-
left
-
offsetX,
height
-
top
-
offsetY);
break;
case
LEFT_BOTTOM:
this.setGravity(Gravity.RIGHT);
guideViewParams.setMargins(offsetX
-
width
+
left,
bottom
+
offsetY,
width
-
left
-
offsetX,
-bottom
-
offsetY);
break;
case
RIGHT_TOP:
this.setGravity(Gravity.BOTTOM);
guideViewParams.setMargins(right
+
offsetX,
offsetY
-
height
+
top,
-right
-
offsetX,
height
-
top
-
offsetY);
break;
case
RIGHT_BOTTOM:
guideViewParams.setMargins(right
+
offsetX,
bottom
+
offsetY,
-right
-
offsetX,
-top
-
offsetY);
break;
}
}
else
{
guideViewParams
=
new
LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
guideViewParams.setMargins(offsetX,
offsetY,
-offsetX,
-offsetY);
}
//
guideViewLayout.addView(customGuideView);
this.addView(customGuideView,
guideViewParams);
}
}
/**
*
獲得targetView
的寬高，如果未測(cè)量，返回｛-1，
-1｝
*
*
@return
*/
private
int[]
getTargetViewSize()
{
int[]
location
=
{-1,
-1};
if
(isMeasured)
{
location[0]
=
targetView.getWidth();
location[1]
=
targetView.getHeight();
}
return
location;
}
/**
*
獲得targetView
的半徑
*
*
@return
*/
private
int
getTargetViewRadius()
{
if
(isMeasured)
{
int[]
size
=
getTargetViewSize();
int
x
=
size[0];
int
y
=
size[1];
return
(int)
(Math.sqrt(x
*
x
+
y
*
y)
/
2);
}
return
-1;
}
boolean
needDraw
=
true;
@Override
protected
void
onDraw(Canvas
canvas)
{
super.onDraw(canvas);
Log.v(TAG,
"onDraw");
if
(!isMeasured)
return;
if
(targetView
==
null)
return;
//
if
(!needDraw)
return;
drawBackground(canvas);
}
private
void
drawBackground(Canvas
canvas)
{
Log.v(TAG,
"drawBackground");
needDraw
=
false;
//
先繪制bitmap，再將bitmap繪制到屏幕
bitmap
=
Bitmap.createBitmap(canvas.getWidth(),
canvas.getHeight(),
Bitmap.Config.ARGB_8888);
temp
=
new
Canvas(bitmap);
//
背景畫筆
Paint
bgPaint
=
new
Paint();
if
(backgroundColor
!=
0)
bgPaint.setColor(backgroundColor);
else
bgPaint.setColor(getResources().getColor(R.color.shadow));
//
繪制屏幕背景
temp.drawRect(0,
0,
temp.getWidth(),
temp.getHeight(),
bgPaint);
//
targetView
的透明圓形畫筆
if
(mCirclePaint
==
null)
mCirclePaint
=
new
Paint();
porterDuffXfermode
=
new
PorterDuffXfermode(PorterDuff.Mode.SRC_OUT);//
或者CLEAR
mCirclePaint.setXfermode(porterDuffXfermode);
mCirclePaint.setAntiAlias(true);
if
(myShape
!=
null)
{
RectF
oval
=
new
RectF();
switch
(myShape)
{
case
CIRCULAR://圓形
temp.drawCircle(center[0],
center[1],
radius,
mCirclePaint);//繪制圓形
break;
case
ELLIPSE://橢圓
//RectF對(duì)象
oval.left
=
center[0]
-
150;
//左邊
oval.top
=
center[1]
-
50;
//上邊
oval.right
=
center[0]
+
150;
//右邊
oval.bottom
=
center[1]
+
50;
//下邊
temp.drawOval(oval,
mCirclePaint);
//繪制橢圓
break;
case
RECTANGULAR://圓角矩形
//RectF對(duì)象
oval.left
=
center[0]
-
150;
//左邊
oval.top
=
center[1]
-
50;
//上邊
oval.right
=
center[0]
+
150;
//右邊
oval.bottom
=
center[1]
+
50;
//下邊
temp.drawRoundRect(oval,
radius,
radius,
mCirclePaint);
//繪制圓角矩形
break;
}
}
else
{
temp.drawCircle(center[0],
center[1],
radius,
mCirclePaint);//繪制圓形
}
//
繪制到屏幕
canvas.drawBitmap(bitmap,
0,
0,
bgPaint);
bitmap.recycle();
}
public
void
setOnClickExit(boolean
onClickExit)
{
this.onClickExit
=
onClickExit;
}
public
void
setOnclickListener(OnClickCallback
onclickListener)
{
this.onclickListener
=
onclickListener;
}
private
void
setClickInfo()
{
final
boolean
exit
=
onClickExit;
setOnClickListener(new
OnClickListener()
{
@Override
public
void
onClick(View
v)
{
if
(onclickListener
!=
null)
{
onclickListener.onClickedGuideView();
}
if
(exit)
{
hide();
}
}
});
}
@Override
public
void
onGlobalLayout()
{
if
(isMeasured)
return;
if
(targetView.getHeight()
>
0
&&
targetView.getWidth()
>
0)
{
isMeasured
=
true;
}
//
獲取targetView的中心坐標(biāo)
if
(center
==
null)
{
//
獲取右上角坐標(biāo)
location
=
new
int[2];
targetView.getLocationInWindow(location);
center
=
new
int[2];
//
獲取中心坐標(biāo)
center[0]
=
location[0]
+
targetView.getWidth()
/
2;
center[1]
=
location[1]
+
targetView.getHeight()
/
2;
}
//
獲取targetView外切圓半徑
if
(radius
==
0)
{
radius
=
getTargetViewRadius();
}
//
添加GuideView
createGuideView();
}
/**
*
定義GuideView相對(duì)于targetView的方位，共八種。不設(shè)置則默認(rèn)在targetView下方
*/
enum
Direction
{
LEFT,
TOP,
RIGHT,
BOTTOM,
LEFT_TOP,
LEFT_BOTTOM,
RIGHT_TOP,
RIGHT_BOTTOM
}
/**
*
定義目標(biāo)控件的形狀，共3種。圓形，橢圓，帶圓角的矩形（可以設(shè)置圓角大小），不設(shè)置則默認(rèn)是圓形
*/
enum
MyShape
{
CIRCULAR,
ELLIPSE,
RECTANGULAR
}
/**
*
GuideView點(diǎn)擊Callback
*/
interface
OnClickCallback
{
void
onClickedGuideView();
}
public
static
class
Builder
{
static
GuideView
guiderView;
static
Builder
instance
=
new
Builder();
Context
mContext;
private
Builder()
{
}
public
Builder(Context
ctx)
{
mContext
=
ctx;
}
public
static
Builder
newInstance(Context
ctx)
{
guiderView
=
new
GuideView(ctx);
return
instance;
}
public
Builder
setTargetView(View
target)
{
guiderView.setTargetView(target);
return
instance;
}
public
Builder
setBgColor(int
color)
{
guiderView.setBgColor(color);
return
instance;
}
public
Builder
setDirction(Direction
dir)
{
guiderView.setDirection(dir);
return
instance;
}
public
Builder
setShape(MyShape
shape)
{
guiderView.setShape(shape);
return
instance;
}
public
Builder
setOffset(int
x,
int
y)
{
guiderView.setOffsetX(x);
guiderView.setOffsetY(y);
return
instance;
}
public
Builder
setRadius(int
radius)
{
guiderView.s
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 生物化學(xué)（第4版）課件 第2章 核酸化學(xué)
- 氣候變化所致小島國(guó)損失損害補(bǔ)償責(zé)任問(wèn)題研究
- 基于STSE教育理念的初中化學(xué)金屬和金屬材料的教學(xué)實(shí)踐研究
- 下雨天安全教育
- 關(guān)愛(ài)婦女心理健康：現(xiàn)狀與行動(dòng)指南
- 頸椎間盤的護(hù)理課件
- 爆炸安全知識(shí)培訓(xùn)
- 人事勞資培訓(xùn)
- 項(xiàng)目管理人員安全教育培訓(xùn)
- 項(xiàng)目介紹課件模版
- 毀林毀草違規(guī)行為集中整治實(shí)施方案
- 日本2025年食品過(guò)敏原培訓(xùn)
- 中新天津生態(tài)城教育系統(tǒng)招聘教職人員筆試真題2024
- GB/T 45817-2025消費(fèi)品質(zhì)量分級(jí)陶瓷磚
- DB37∕T 5302-2024 既有城市橋梁現(xiàn)場(chǎng)檢測(cè)及承載能力評(píng)估技術(shù)標(biāo)準(zhǔn)
- 安徽省池州市貴池區(qū)2024-2025學(xué)年八年級(jí)下學(xué)期數(shù)學(xué)期末檢測(cè)試卷（含答案）
- 正畸接診標(biāo)準(zhǔn)化流程
- 中心靜脈壓（CVP）監(jiān)測(cè)與護(hù)理
- 酒店前臺(tái)接待禮儀與溝通技巧練習(xí)題
- 床上用品采購(gòu) 投標(biāo)方案
- 口腔工藝管理課件
評(píng)論
0/150
提交評(píng)論