使用TextPaint实现自由加粗字体：BoldTextView，支持中粗

疑难杂症

安卓系统自带的Textview可以设置粗体、斜体、正常字体，但是设计经常设计想比普通字体粗一点(PingFangSC-Medium)又不想Bold效果那么粗，所谓的“中粗”。

IOS是支持的，之前安卓这边经常回设计的是：粗 或者 不粗，做一个选择。

寻找思路

难道安卓真的不能达到“中粗”的效果吗？其实是可以的。通过读TextView的源码可以看到，在onDraw（）中，最终使用mTextPaint 完成文字的绘制，而使用 mTextPaint 又实现文字颜色和是否粗细及文字大小等属性的控制。

mTextPaint.setFakeBoldText((need & Typeface.BOLD) != 0);

mTextPaint.setTextSize(size);

mTextPaint.setColor(color);

而TextPaint的父类是谁呢？是Paint，找到Paint后，就会发现Paint有一个方法是 setStrokeWidth，可以设置画笔的粗细。那么通过设置Paint的StrokeWidth，是否可以达到控制文字粗细的效果呢，其实是可以的。

只要在onDraw()之前调用getPaint()拿到mTextPaint，通过setStrokeWidth设置画笔的粗细，就可以达到控制TextView的文字粗细效果。

@Override
    protected void onDraw(Canvas canvas) {
        //获取当前控件的画笔
        TextPaint paint = getPaint();
        //设置画笔的描边宽度值
        paint.setStrokeWidth(mStrokeWidth);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        super.onDraw(canvas);
    }

完整代码及Demo

为了更好的使用，自定义BoldTextView 继承TextView，添加自定义属性stroke_width控制文字粗细，默认0.5比正常字体稍粗（0为正常不加粗）；0以上可实现逐渐加粗；0.5~1大概可以看到中粗的效果；2大约是Bold的效果。

代码

<!-- 加粗字体 -->
    <declare-styleable name="BoldTextView">
        <attr name="stroke_width" format="float"/>
    </declare-styleable>

/**
 * 加粗字体
 * @author by Zyq
 * @date 2022/3/15.
 */
public class BoldTextView extends AppCompatTextView {
    /**
     * 数值越大，字体越粗，0.0f表示常规画笔的宽度，相当于默认情况
     */
    private float mStrokeWidth = 0.5f;
    public BoldTextView(Context context) {
        this(context,null);
    }

    public BoldTextView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public BoldTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获取xml定义属性
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.BoldTextView,defStyleAttr,0);
        mStrokeWidth = array.getFloat(R.styleable.BoldTextView_stroke_width,mStrokeWidth);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //获取当前控件的画笔
        TextPaint paint = getPaint();
        //设置画笔的描边宽度值
        paint.setStrokeWidth(mStrokeWidth);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        super.onDraw(canvas);
    }

    public void setStrokeWidth(float mStrokeWidth) {
        this.mStrokeWidth = mStrokeWidth;
        invalidate();
    }

    public float getStrokeWidth() {
        return mStrokeWidth;
    }
}

使用

使用很简单

<cn.android.view.text.BoldTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginTop="20dp"
            android:text="看看加粗效果"
            android:textColor="#333333"
            android:textSize="20sp" />
<cn.android.view.text.BoldTextView
            android:text="看看加粗效果"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_alignParentRight="true"
            app:stroke_width="1"
            android:textColor="#333333"
            android:textSize="20sp"/>

多个实现对比加粗效果

示例代码

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".text.BoldTextActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp">
        <TextView
            android:text="常规文本"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#999999"
            android:textSize="10sp"/>
        <TextView
            android:text="看看加粗效果"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_alignParentRight="true"
            android:textColor="#333333"
            android:textSize="20sp"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_alignParentBottom="true"
            android:background="#e2e2e2"/>
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp">
        <TextView
            android:text="普通加粗文本:bold"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#999999"
            android:textSize="10sp"/>
        <TextView
            android:text="看看加粗效果"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:textStyle="bold"
            android:layout_alignParentRight="true"
            android:textColor="#333333"
            android:textSize="20sp"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_alignParentBottom="true"
            android:background="#e2e2e2"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="自定义BoldTextView:默认strokeWidth=0.5中粗"
            android:textColor="#999999"
            android:textSize="10sp" />

        <cn.android.view.text.BoldTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginTop="20dp"
            android:text="看看加粗效果"
            android:textColor="#333333"
            android:textSize="20sp" />
        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_alignParentBottom="true"
            android:background="#e2e2e2"/>
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp">
        <TextView
            android:text="自定义BoldTextView:strokeWidth=0.0不加粗"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#999999"
            android:textSize="10sp"/>
        <cn.android.view.text.BoldTextView
            android:text="看看加粗效果"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_alignParentRight="true"
            app:stroke_width="0"
            android:textColor="#333333"
            android:textSize="20sp"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_alignParentBottom="true"
            android:background="#e2e2e2"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="自定义BoldTextView:strokeWidth=2"
            android:textColor="#999999"
            android:textSize="10sp" />
        <cn.android.view.text.BoldTextView
            android:text="看看加粗效果"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_alignParentRight="true"
            app:stroke_width="2"
            android:textColor="#333333"
            android:textSize="20sp"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_alignParentBottom="true"
            android:background="#e2e2e2"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="自定义BoldTextView:点击右侧文本动态改变strokeWidth+0.5"
            android:textColor="#999999"
            android:textSize="10sp" />
        <TextView
            android:id="@+id/tvShowStoke"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="strokeWidth=0"
            android:layout_marginTop="30dp"
            android:textColor="#999999"
            android:textSize="10sp" />

        <cn.android.view.text.BoldTextView
            android:id="@+id/tvDynamicStoke"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginTop="20dp"
            android:text="看看加粗效果"
            android:textColor="#333333"
            android:textSize="20sp"
            app:stroke_width="0" />
        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_alignParentBottom="true"
            android:background="#e2e2e2"/>
    </RelativeLayout>


</LinearLayout>

/**
 * 加粗文本
 */
public class BoldTextActivity extends Activity {
    BoldTextView tvDynamicStoke;
    TextView tvShowStoke;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bold_text);
        tvShowStoke= (TextView) findViewById(R.id.tvShowStoke);
        tvDynamicStoke= (BoldTextView)findViewById(R.id.tvDynamicStoke);
        tvDynamicStoke.setOnClickListener((v)->{
            float strokeWidth = tvDynamicStoke.getStrokeWidth()+0.5f;
            tvShowStoke.setText("strokeWidth="+strokeWidth);
            tvDynamicStoke.setStrokeWidth(strokeWidth);
        });
    }
}

效果