疑难杂症
安卓系统自带的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);
});
}
}
效果
?
|