發現自己平時寫的小demo存電腦里經常各種找不到。。。還是不能偷懶啊,好記性不如爛筆頭
Paint有個方法用來設置圖像混合模式。
setXfermode(Xfermode xfermode)
至于什么是圖像混合模式,在PS中,圖像混合模式會影響是將兩個圖層疊加后的效果,其中涉及到的圖形算法我們程序員一般不需要知道,具體還是掌握使用方法
通過查看API發現有三個子類
AvoidXfermode
PixelXorXfermode
PorterDuffXfermode
我們要用到的是PorterDuffXfermode,相信很多人都不陌生了,許多炫酷都效果都是使用它來實現的,像我們經常用到的效果:圓形圖片、圓角矩形圖片都可以使用它來實現。
系統為我們提供了18種圖形混合的模式,不同模式下,圖片混合得到的結果也大不相同,下面這種經典的圖片可以說明各種混合模式的效果
下面通過例子來展示下,兩種圖形效果疊加的的混合效果
private Bitmap createDstBitmap(){
Paint circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap target = Bitmap.createBitmap(getMeasuredWidth(),getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(target);
canvas.drawCircle(150,150,95,circlePaint);
return target;
}
private Bitmap createSrcBitmap(){
Paint imageBitmapPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap target = Bitmap.createBitmap(getMeasuredWidth(),getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(target);
Bitmap source = BitmapFactory.decodeResource(getResources(),R.mipmap.bg);
canvas.drawBitmap(source,0,0,imageBitmapPaint);
return target;
}```
```java
@Override
protected void onDraw(Canvas canvas) {
//dst
canvas.drawBitmap(createDstBitmap(),0,0,mPaint);
Xfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
mPaint.setXfermode(mXfermode);
//src
canvas.drawBitmap(createSrcBitmap(),0,0,mPaint);
}
這樣可以簡單的實現圓形圖片的效果~
其他效果就不演示了,照著圖試一下就行了
實測下來發現硬件加速會影響混合的效果,所以最好還是把它關了
我們看看下面這種效果~
(圖片來著網絡,如有侵權請與我聯系)
在app中經常可以看到,下面說說實現思路
1,自定義一個FrameLayout,用來繪制遮罩層和用戶引導
2,得到需要高亮的控件的位置信息
3,繪制一個半透明的遮罩層,設置Xfermode,然后根據2得到的位置信息,畫出高亮顯示的圖形(如上圖是一個圓)
4,開放接口,讓用戶可以控制用戶引導的位置
5,開放接口讓用戶可以自定義高亮的圖形
6,點擊事件回調
其實像這種需求,網上已經很多輪子了,我看了一下hongyang 大神的杰作,基本也是差不多,下面我就拿hongyang大神的開源項目Highlight,拆開輪子看一看
文章后面我也基礎這個項目做了一些擴展
先來實現一個簡單版本的
自定義View三部曲~
public class MyTipLightView extends FrameLayout {
private Bitmap mMaskBitmap;//遮罩層
private static final PorterDuffXfermode MODE_DST_OUT = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT);
private int maskColor = 0xCC000000;//暫時寫死
private Paint mPaint;
private View mLightView;//需要高亮的View
public MyTipLightView(Context context,View view) {
super(context);
setWillNotDraw(false);
this.mLightView = view;
mPaint = new Paint();
mPaint.setDither(true);
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom)
{
super.onLayout(changed, left, top, right, bottom);
if (changed){
buildMask();
}
}
private void buildMask() {
mMaskBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(mMaskBitmap);
canvas.drawColor(maskColor);
mPaint.setXfermode(MODE_DST_OUT);
//這個工具類可以找到控件占據的矩形區域的矩形坐標,后面會給出
RectF rect = new RectF(ViewUtils.getLocationInView((ViewGroup) mLightView.getParent(),mLightView));
//根據獲取到的控件的矩形坐標,繪制一個圓角矩形高亮顯示
canvas.drawRoundRect(rect,6,6,mPaint);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(mMaskBitmap, 0, 0, null);
super.onDraw(canvas);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
measureChildren(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),//
MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
setMeasuredDimension(width, height);
}
}```
另外在封裝一個工具類對外面提供方法來操作高亮顯示
目前較為簡單,只有一個顯示的方法
```java
/**
*
* @param parentlayout 顯示遮罩層的容器
* @param targetView 需要高亮的控件
*/
public class TipLightViewUtils {
public void showLightView(View parentlayout,View targetView){
MyTipLightView myTipLightView = new MyTipLightView(mContext,targetView);
if (parentlayout instanceof FrameLayout)
{
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams
(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
//添加到FrameLayout的最外層布局
((ViewGroup) parentlayout).addView(myTipLightView, ((ViewGroup) parentlayout).getChildCount(), lp);
} else
{
FrameLayout frameLayout = new FrameLayout(this);
ViewGroup parent = (ViewGroup) parentlayout.getParent();
parent.removeView(parentlayout);
parent.addView(frameLayout, parentlayout.getLayoutParams());
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams
(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
frameLayout.addView(parentlayout, lp);
frameLayout.addView(myTipLightView);
}
}```
調用showLightView就能實現如下效果

但是這里還是有很多問題的。
沒有顯示用戶自定義的引導提示界面。。
沒有點擊回調
無法高亮多個控件。。
需要高亮顯示多個控件的話,那么在我們自定義的Framelayout里應該有個集合用來保存所有高亮的控件
每一個需要進行高亮顯示的控件
需要具備,自定義的引導頁面、高亮控件的位置信息,另外應保羅一個接口,讓外面可以控制引導界面的顯示位置
那么我們根據這些屬性,建立相應的實體類已偏操作~
```java
public class ViewPosInfo {
public int layoutId = -1;//用戶自定義的引導提示布局
public RectF rectF; //高亮控件的位置信息
public MarginInfo marginInfo; //引導界面的位置信息
public View view; //需要高亮的控件
public OnPosCallback onPosCallback; //引導界面的位置控制接口
public interface OnPosCallback
{
void getPos(float rightMargin, float bottomMargin, RectF rectF, MarginInfo marginInfo);
}
}
MarginInfo只是封裝了一些margin
public class MarginInfo {
public float topMargin;
public float leftMargin;
public float rightMargin;
public float bottomMargin;
}```
提供接口用來設置高亮引導的布局的位置
```java
public interface OnPosCallback
{
/**
* @param rightMargin 高亮view在anchor中的右邊距
* @param bottomMargin 高亮view在anchor中的下邊距
* @param rectF 高亮view的l,t,r,b,w,h都有
* @param marginInfo 設置你的布局的位置,一般設置l,t或者r,b
*/
void getPos(float rightMargin, float bottomMargin, RectF rectF, MarginInfo marginInfo);
}
下面改造一下自定義的FrameLayout,不再只是接受一個單一的高亮View了,使用一個數組集合來保存所有需要高亮的View
private List<TipLightViewUtils.ViewPosInfo> viewRects;
public MyTipLightView(Context context,List<TipLightViewUtils.ViewPosInfo> viewRects) {
super(context);
this.viewRects = viewRects;
init();
}
public void init(){
setWillNotDraw(false);
mPaint = new Paint();
mPaint.setDither(true);
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
//繪制高亮的布局
addViewForTip();
}
private void addViewForTip(){
for(TipLightViewUtils.ViewPosInfo viewPosInfo : viewRects){
View view = LayoutInflater.from(getContext()).inflate(viewPosInfo.layoutId,this,false);
FrameLayout.LayoutParams lp = (LayoutParams) view.getLayoutParams();
//將用戶傳遞的高亮布局添加到當前Framelayout中,通過margin的方式來設定所處位置
lp.width = ViewGroup.LayoutParams.WRAP_CONTENT;
lp.height = ViewGroup.LayoutParams.WRAP_CONTENT;
lp.leftMargin = (int) viewPosInfo.marginInfo.leftMargin;
lp.topMargin = (int) viewPosInfo.marginInfo.topMargin;
lp.rightMargin = (int) viewPosInfo.marginInfo.rightMargin;
lp.bottomMargin = (int) viewPosInfo.marginInfo.bottomMargin;
if(lp.rightMargin != 0){
//如果設置了rightmargin,那么,說明布局是要往左邊放,這樣內部的控件應向右對其
lp.gravity = Gravity.RIGHT;
}else {
lp.gravity = Gravity.LEFT;
}
if(lp.bottomMargin != 0){
lp.gravity |= Gravity.BOTTOM;
}else {
lp.gravity |= Gravity.TOP;
}
addView(view,lp);
}
}```
繪制部分~
```java
private void buildMask() {
mMaskBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(mMaskBitmap);
canvas.drawColor(maskColor);
mPaint.setXfermode(MODE_DST_OUT);
for(TipLightViewUtils.ViewPosInfo viewPosInfo : viewRects){
canvas.drawRoundRect(viewPosInfo.rectF,6,6,mPaint);
}
}```
TipLightViewUtils把add和show的邏輯分開
```java
public TipLightViewUtils addHighLight(int viewId, int decorLayoutId, OnPosCallback onPosCallback){
ViewGroup viewGroup = (ViewGroup) mAnchor;
View view = viewGroup.findViewById(viewId);
addHighLight(view,decorLayoutId,onPosCallback);
return this;
}
public TipLightViewUtils addHighLight(View view,int decorLayoutId, OnPosCallback onPosCallback){
ViewGroup parent = (ViewGroup) mAnchor;
ViewPosInfo viewPosInfo = new ViewPosInfo();
viewPosInfo.view = view;
viewPosInfo.rectF = new RectF(ViewUtils.getLocationInView(mAnchor,view));
viewPosInfo.layoutId = decorLayoutId;
MarginInfo marginInfo = new MarginInfo();
onPosCallback.getPos(parent.getWidth() - viewPosInfo.rectF.right,
parent.getHeight() - viewPosInfo.rectF.bottom,viewPosInfo.rectF,marginInfo);
viewPosInfo.marginInfo = marginInfo;
viewPosInfo.onPosCallback = onPosCallback;
viewRects.add(viewPosInfo);
return this;
}
public void show(){
MyTipLightView tipLightView = new MyTipLightView(mContext,viewRects);
if (mAnchor instanceof FrameLayout)
{
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams
(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
//添加到FrameLayout的最外層布局
((ViewGroup) mAnchor).addView(tipLightView, ((ViewGroup) mAnchor).getChildCount(), lp);
} else
{
FrameLayout frameLayout = new FrameLayout(mContext);
ViewGroup parent = (ViewGroup) mAnchor.getParent();
parent.removeView(mAnchor);
parent.addView(frameLayout, mAnchor.getLayoutParams());
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams
(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
frameLayout.addView(mAnchor, lp);
frameLayout.addView(tipLightView);
}
}```
相當簡單,這時我們運行看看效果~
加張背景圖讓遮罩效果看起來更明顯一些~

還有一個用戶可以自定義高亮的圖形的功能的,前面我們寫死了
```java
canvas.drawRoundRect(viewPosInfo.rectF,6,6,mPaint);
下面我們就把接口抽取出來~
怎么抽取呢?
前面我們在畫高亮顯示的區域時,是直接將圖形寫在了mMaskBitmap上,我們可以另外定義多一個Bitmap,讓大家可以在上面繪制自己需要的高亮的顯示圖片~
so~
//你想怎么顯示~就怎么畫,任性~
public static interface LightShape{
public void shape(Bitmap bitmap,ViewPosInfo viewPosInfo);
}```
在viewPosInfo新增一個lightShape來保存用戶自定義的圖形接口
添加高亮控件的方法addHightlight里對拿到用戶定義的LightShape~
```java
public HighLight addHighLight(View view, int decorLayoutId, OnPosCallback onPosCallback,
LightShape lightShape)
{
//省略。。。。
//新增部分
viewPosInfo.lightShape = lightShape == null?new RectLightShape():lightShape;
mViewRects.add(viewPosInfo);
return this;
}```
再將繪制方法改一下就OK拉。
```java
private void buildMask()
{
mMaskBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(mMaskBitmap);
canvas.drawColor(maskColor);
mPaint.setXfermode(MODE_DST_OUT);
mHighLight.updateInfo();
mLightBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
for (HighLight.ViewPosInfo viewPosInfo : mViewRects) {
viewPosInfo.lightShape.shape(mLightBitmap,viewPosInfo);
}
canvas.drawBitmap(mLightBitmap,0,0,mPaint);
}```
舉個例子,我們實現一個圓形的高亮圖案~
```java
public class CircleLightShape implements HighLight.LightShape {
@Override
public void shape(Bitmap bitmap, HighLight.ViewPosInfo viewPosInfo) {
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setDither(true);
paint.setAntiAlias(true);
paint.setMaskFilter(new BlurMaskFilter(15, BlurMaskFilter.Blur.SOLID));
RectF rectF = viewPosInfo.rectF;
canvas.drawCircle(rectF.left+(rectF.width()/2),rectF.top+(rectF.height()/2),
Math.max(rectF.width(),rectF.height())/2,paint);
}
}
在addHightlight時傳入即可~
看看效果
大概就是醬紫剩下的就是對常用位置(上下左右)進行封裝了,這個比較簡單,看看源碼就知道了