IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 使用TextPaint实现自由加粗字体:BoldTextView,支持中粗 -> 正文阅读

[移动开发]使用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);
        });
    }
}

效果

?

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-04-15 00:12:54  更:2022-04-15 00:14:43 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 20:39:58-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码