TextView文字描邊實現

需求描述

文字顯示在圖片的上面，圖片的內容是不確定了，為了防止文字與圖片的顏色相近導致用戶看不到或者看不清文字的問題，所以顯示文字描邊，避免問題。

實現

實現思想

使用TextPaint繪制相同文字在TextView的底部，TextPaint的字顯示要比原始的字大一些，這樣看起來就像是有描邊的文字。

代碼

1.attrs.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- 有描邊的自定義TextView-->
    <declare-styleable name="StrokeTextView">
        <!--描邊的顏色 -->
        <attr name="stroke_color" format="color" />
        <!-- 描邊的寬度 -->
        <attr name="stroke_width" format="dimension" />
    </declare-styleable>

</resources>
 

2.StrokeTextView的實現

package com.zm.autostroketextview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * 文字內容有描邊的TextView
 * Author: zhangmiao
 * Date: 2018/4/13
 */
public class StrokeTextView extends TextView {

    private TextView outlineTextView = null;

    public StrokeTextView(Context context) {
        this(context, null);
    }

    public StrokeTextView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public StrokeTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        outlineTextView = new TextView(context, attrs, defStyleAttr);
        init(attrs);
    }

    private void init(AttributeSet attrs) {
        //1.獲取參數
        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.StrokeTextView);
        int stroke_color = ta.getColor(R.styleable.StrokeTextView_stroke_color, Color.WHITE);
        float stroke_width = ta.getDimension(R.styleable.StrokeTextView_stroke_width, 2);

        //2.初始化TextPaint
        TextPaint paint = outlineTextView.getPaint();
        paint.setStrokeWidth(stroke_width);
        paint.setStyle(Paint.Style.STROKE);
        outlineTextView.setTextColor(stroke_color);
        outlineTextView.setGravity(getGravity());
    }

    @Override
    public void setLayoutParams(ViewGroup.LayoutParams params) {
        super.setLayoutParams(params);
        outlineTextView.setLayoutParams(params);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //設置輪廓文字
        CharSequence outlineText = outlineTextView.getText();

        if (outlineText == null || !outlineText.equals(getText())) {
            outlineTextView.setText(getText());
            postInvalidate();
        }
        outlineTextView.measure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        outlineTextView.layout(left, top, right, bottom);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        outlineTextView.draw(canvas);
        super.onDraw(canvas);
    }
}
 

3.布局文件中StrokeTextView的使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary">

    <com.zm.autostroketextview.StrokeTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:stroke_color="@android:color/white"
        app:stroke_width="2dp" />

</LinearLayout>
 

4.結果顯示

TextView文字描邊實現