Android中TextView文字镂空效果的实现

最近在做需求的时候，设计小姐姐提了个效果，说需要TextView展示文字的时候要镂空效果，也就是文字和背景相交的地方是透明的效果就像下边这张图
虽然我刚开始没有什么思路，但是我可以google一下啊，于是我找到了一个实现的方式，效果也和预期的一样，我参考的就是这篇文章介绍的android如何实现镂空文字，于是Android中TextView文字镂空效果的实现就完成了，到此结束谢谢大家的阅读～

镂空.jpg
开个玩笑，这片文章的思路其实就是使用了PorterDuff.Mode的方式来混合图片，如果对PorterDuff.Mode不熟悉的可以看下这篇文章各个击破搞明白PorterDuff.Mode
我看了几篇关于镂空文字的文章，基本的思路都是如下：

自定义了HolloTextView继承自View
重写onDraw方法
绘制背景
使用PorterDuff.Mode.DST_OUT的画笔调用canvas.drawText方法绘制文字

基本通过上面的方法就可做到了文字的镂空效果，但是我觉得有两点不太妥当的地方：

HolloTextView继承的View，如果原来xml使用的是TextView这样替换的话如果代码里的引用的对象没有替换，容易造成崩溃
因为是通过canvas的drawText方法绘制的文字，TextView原有的各种属性全部都失效了，textSize、textStyle、padding等等，如果想实现这些属性，需要自定义大量的属性不是很方便

为了解决这两个不方便的地方，我想了一下解决的方法，也是主要分为下面这几步:

HollowTextView继承自TextView
自定义两个Bitmap，一个用于绘制文字，一个用于绘制背景
定义两个Canvas，分别在new的时候传入上面两个bitmap
重写onDraw方法绘制文字和背景

这里主要着重说一下这个onDraw方法是如何重写的，既然我们想解决上面的第二个问题，那就需要我们能够支持TextView的一些基本的属性，我们知道TextView的一些基本属性最后都是在onDraw方法绘制出来的，那么我们能不能利用HollowTextView的super.onDraw(Canvas)方法把那些属性保存下来呢？答案是可以的，这里我用了一个取巧的办法，在onDraw里面调用super.onDraw(Canvas)时，传入的Canvas是之前定义的传入了TextBitmap的TextCanvas，这样所有有关TextView的基本属性就都绘制到了TextBitmap这个Bitmap上，然后我们在onDraw方法里可以先绘制背景，然后在使用PorterDuff.Mode.DST_OUT模式的Paint绘制TextBitmap，这样就很轻松的实现了文字的镂空效果
关于PorterDuff.Mode.DST_OUT的效果，在我提到的那篇介绍的文章里有说明，我可以在这里引用一下

DST_OUT
[Da * (1 - Sa), Dc * (1 - Sa)]，可以类比SRC_OUT , 在不相交的地方绘制目标图像，相交处根据源图像alpha进行过滤，完全不透明处则完全过滤，完全透明则不过滤

说这么多不如看一下代码来的痛快，下面给出我实现的代码:

public class HollowTextView extends AppCompatTextView{  private Paint mTextPaint, mBackgroundPaint;  private Bitmap mBackgroundBitmap,mTextBitmap;  private Canvas mBackgroundCanvas,mTextCanvas;  private RectF mBackgroundRect;  private int mBackgroundColor;  private int mCornerRadius;  public HollowTextView(Context context) {    this(context,null);  }  public HollowTextView(Context context, AttributeSet attrs) {    this(context, attrs,-1);  }  public HollowTextView(Context context, AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);    initAttrs(attrs,defStyleAttr);    initPaint();  }  private void initAttrs(AttributeSet attrs,int defStyleAttr){    if(attrs == null){      return;    }    TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.HollowTextView, defStyleAttr, 0);    mBackgroundColor = a.getColor(R.styleable.HollowTextView_background_color,Color.TRANSPARENT);    mCornerRadius = a.getDimensionPixelOffset(R.styleable.HollowTextView_corner_radius,0);    a.recycle();  }  /***   * 初始化画笔属性   */  private void initPaint() {    //画文字的paint    mTextPaint = new Paint();    //这是镂空的关键    mTextPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));    mTextPaint.setAntiAlias(true);    mBackgroundPaint = new Paint();    mBackgroundPaint.setColor(mBackgroundColor);    mBackgroundPaint.setAntiAlias(true);  }  @Override  protected void onSizeChanged(int w, int h, int oldw, int oldh) {    super.onSizeChanged(w, h, oldw, oldh);    mBackgroundBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_4444);    mBackgroundCanvas = new Canvas(mBackgroundBitmap);    mTextBitmap = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_4444);    mTextCanvas = new Canvas(mTextBitmap);    mBackgroundRect = new RectF(0,0,getWidth(),getHeight());  }  @Override  protected void onDraw(Canvas canvas) {    //这里给super传入的是mTextCanvas，把一些基本属性都支持进去    super.onDraw(mTextCanvas);    drawBackground(mBackgroundCanvas);    int sc;    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ){       sc = canvas.saveLayer(0,0,getMeasuredWidth(),getMeasuredHeight(),null);    }else {       sc = canvas.saveLayer(0,0,getMeasuredWidth(),getMeasuredHeight(),null,Canvas.ALL_SAVE_FLAG);    }    canvas.drawBitmap(mBackgroundBitmap,0,0,null);    canvas.drawBitmap(mTextBitmap, 0, 0, mTextPaint);    canvas.restoreToCount(sc);  }  private void drawBackground(Canvas canvas){    if(mCornerRadius > 0){      canvas.drawRoundRect(mBackgroundRect,mCornerRadius,mCornerRadius, mBackgroundPaint);    }else {      canvas.drawColor(mBackgroundColor);    }  }}

这样就实现了镂空文字的效果，什么粗体字啊、换字体啊、margin、padding的都不用我们再去考虑了，但是我这里还有一个问题没有想到好的解决办法，就是TextView的backgroud属性没有办法通过xml来支持，因为混合模式需要除了文字部分都要透明，而backgroud属性会破坏这个规则，所以我这里自己定义了background_color属性，希望有兴趣的小伙伴可以思考一下这个问题然后交流一下～

更多相关文章

随机推荐