前言:
本来朋友问我镂空字体怎么实现,刚开始以为是简简单单调整背景色和透明度,后来发现是我想多了。记录一下
效果图:
看了几个整体思路都是
- 自定义HolloTextView继承自View,重写onDraw方法,绘制背景,使用PorterDuff.Mode.DST_OUT的画笔调用canvas.drawText方法绘制文字
其实有些背景可以用别的方法实现:
透明背景可以用
binding.btMySignOut.setTextColor(Color.alpha(100));等等
alpha范围是0-250
第一步:
1、创建HollowTextView
public class HollowTextView extends AppCompatTextView {
private Paint mTextPaint, mBackgroundPaint;
private Bitmap mBackgroundBitmap, mTextBitmap;
private Canvas mBackgroundCanvas, mTextCanvas;
private RectF mBackgroundRect;
private int mBackgroundColor;
private float mCornerRadius;
public HollowTextView(Context context) {
this(context, null);
}
public HollowTextView(Context context, AttributeSet attrs) {
super(context, attrs);
initAttrs(attrs, 0);
initPaint();
}
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 typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.HollowTextView, defStyleAttr, 0);
mBackgroundColor = typedArray.getColor(R.styleable.HollowTextView_hollowTextView_background_color, Color.TRANSPARENT);
mCornerRadius = typedArray.getDimension(R.styleable.HollowTextView_hollowTextView_corner_radius, 0);
typedArray.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);
}
}
}
第二步:创建values下styleable的xml(attrs)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="HollowTextView">
<attr name="hollowTextView_background_color" format="color|reference"/>
<attr name="hollowTextView_corner_radius" format="dimension|reference"/>
</declare-styleable>
</resources>
最后就是引用HollowTextView
<com.test.aaa.activitys.HollowTextView
android:id="@+id/hollowtext"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:gravity="center"
android:text="镂空文本"
android:textSize="30sp"
android:layout_marginTop="230dp"
android:layout_marginLeft="@dimen/dp_200"
android:layout_marginRight="50dp"
android:textStyle="bold"
app:hollowTextView_background_color="#4CAF50"
app:hollowTextView_corner_radius="5dp"/>