Android进阶之路 - 字体加粗，定制化字体粗度

已于 2024-08-06 17:20:02 修改
阅读量1.4k 收藏 17
点赞数 25
分类专栏： Android进阶之路 Android入门之路 # 项目开发知识点归纳 文章标签： Android 字体粗度 加粗效果 字体加粗
于 2024-08-06 15:45:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20451879/article/details/131396252
版权

在客户端中不论是PC端，还是移动端主要价值之一就体现在用户交互方面，也就是用户体验了，接下来讲的是很常见的字体加粗问题

UI大找茬

在开发中经常会遇到设计说某个文本字体粗度不对，需要重一点，或者轻一点，这时候当系统控件原属性不满足需求时，就需要我们定制化处理一下

虽然看起来写了不少，但其实核心只在于获取当前控件的 Paint（画笔）后重新设置strokeWidth、style属性 ，然后重新绘制即可！

tip：差点忘记说了，如果通过该篇未满足你的诉求，你可以看一下设计是否使用了字体库，一般字体库也会提供常规字体和加粗字体，关于字体库方面的知识，可以直接前往 深入浅出字体、字体库

基础讲解

设计比较喜欢拿 Android 与 IOS 做对比，所以经常会遇到一些 IOS 分分钟解决的问题，Android 却需要花多倍的时间来处理，以前经常会遇到 1 IOS = 1.5||2 Android 的场景，现在这环境可能比较这样的场景也比较少咯

关于字体粗度的实际设置，主要是在体现其 字重(字体粗细)，因字重等级不同，带来的效果也有所不同

Andoird 提供的字体粗度主要有俩种

  • normal 默认正常字体（0）
  • bold 加粗字体（1）

相对于Android 提供的 regular-400，bold-700 两种字重（设置600以下均以400字重效果来显示；设置700才会显示出加粗文字）- 源码中常以 0 - 1设置字重 ；iOS系统原生字体字重等级全面，从100-600都有，效果也更全一些，网上找了一个对比图如下

在这里插入图片描述

由于 Andoird 的开源性，在国内有着众多厂商，不同厂商有时候也会设计自已品牌的系统字体包，所以即便是相同的代码，也可能在不同的安卓手机上呈现的效果也可能不相同，因此我们往往需要通过一些自定义控件来尽量保持效果的一致性！

系统自带 - 原始版（粗度固定，无扩展）

Android 为 TextView、EditText 提供了 textStyle 属性用于设置字体粗度

  <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="字体粗度"
      android:textStyle="bold" />

实现效果
在这里插入图片描述
在这里插入图片描述

关于 textStyle 属性值，主要提供了以下三种类型

  • normal 默认正常字体
  • bold 加粗字体
  • italic 斜体
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MediumTextView">
        <attr name="mediumState" format="boolean" />
    </declare-styleable>

</resources>

自定义控件 - 基础版（扩展不足，基本够用）

首先在 attr/attrs 添加自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MediumTextView">
        <attr name="mediumState" format="boolean" />
    </declare-styleable>
</resources>

实现效果

在这里插入图片描述

Tip：以下俩种方式均可正常使用，建议使用优化后的减少无效逻辑

优化前

package com.example.boldtext

import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.support.v7.widget.AppCompatTextView
import android.util.AttributeSet

class MediumOldTextView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : AppCompatTextView(context, attrs, defStyleAttr) {

    private var mediumState: Boolean = false

    init {
        val array = context.obtainStyledAttributes(attrs, R.styleable.MediumTextView)
        mediumState = array.getBoolean(R.styleable.MediumTextView_mediumState, false)
        array.recycle()
    }

    override fun onDraw(canvas: Canvas?) {
        if (mediumState) {
            val strokeWidth = paint.strokeWidth
            val style = paint.style
            paint.strokeWidth = 0.6f
            paint.style = Paint.Style.FILL_AND_STROKE
            super.onDraw(canvas)
            paint.strokeWidth = strokeWidth
            paint.style = style
        } else {
            super.onDraw(canvas)
        }
    }

    fun setMediumState(mediumState: Boolean) {
        this.mediumState = mediumState
        requestLayout()
    }

}

优化后

去除一些无用逻辑、代码

package com.example.boldtext


import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.support.v7.widget.AppCompatTextView
import android.util.AttributeSet

class MediumTextView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : AppCompatTextView(context, attrs, defStyleAttr) {

    private var mediumState: Boolean = false

    init {
        val array = context.obtainStyledAttributes(attrs, R.styleable.MediumTextView)
        mediumState = array.getBoolean(R.styleable.MediumTextView_mediumState, false)
        array.recycle()
    }

    override fun onDraw(canvas: Canvas?) {
        if (mediumState) {
        	//可通过设置该数值改变加粗字重
            paint.strokeWidth = 0.6f
            paint.style = Paint.Style.FILL_AND_STROKE
        }
        super.onDraw(canvas)
    }

    fun setMediumText(mediumText: Boolean) {
        this.mediumState = mediumText
        requestLayout()
//        postInvalidate()
    }

}

使用方式

静态为 xml 设置，动态为代码设置

静态设置

<com.example.boldtext.MediumTextView
    android:id="@+id/medium_view"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:gravity="center"
    android:text="加粗字体"
    app:mediumState="true" />

动态设置

package com.example.boldtext

import android.support.v7.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val mediumView = findViewById<MediumTextView>(R.id.medium_view)
        //设置加粗
        mediumView.setMediumState(true)
    }
}

自定义控件 - 进阶版（推荐：可自行扩展，定制化高）

实现效果

在这里插入图片描述

仅支持动态设置

Tip：假设别的组件也有字体加粗的需求，可以尝试继承该组件

创建 - 自定义组件

package com.example.boldtext

import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.support.v7.widget.AppCompatTextView
import android.util.AttributeSet

open class TypefaceTextView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    AppCompatTextView(context, attrs, defStyleAttr) {

    private var mTypefaceScale: Float = 0.0f

    enum class TypefaceScale {
        MEDIUM, MEDIUM_SMALL, DEFAULT,
    }

    override fun onDraw(canvas: Canvas?) {
        if (mTypefaceScale == 0f) {
            return super.onDraw(canvas)
        }
        val strokeWidth = paint.strokeWidth
        val style = paint.style
        paint.strokeWidth = mTypefaceScale
        paint.style = Paint.Style.FILL_AND_STROKE
        super.onDraw(canvas)
        paint.strokeWidth = strokeWidth
        paint.style = style
    }

    fun setTypefaceScale(scale: TypefaceScale = TypefaceScale.DEFAULT) {
        mTypefaceScale = when (scale) {
            TypefaceScale.DEFAULT -> 0.0f
            TypefaceScale.MEDIUM_SMALL -> 0.6f
            TypefaceScale.MEDIUM -> 1.1f
        }
        postInvalidate()
    }

}

使用方式

package com.example.boldtext

import android.support.v7.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val typefaceView = findViewById<TypefaceTextView>(R.id.typeface_view)
        //设置加粗
        typefaceView.setTypefaceScale(TypefaceTextView.TypefaceScale.MEDIUM_SMALL)
    }
}

控件引入

    <com.example.boldtext.TypefaceTextView
        android:id="@+id/typeface_view"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:gravity="center"
        android:text="TypefaceTextView 加粗字体" />

扩展：因为我们用的是 splitties 三方的一个布局组件，所以分享、记录一些扩展函数，逐步分析、学习

布局方式

   add(lParams(), typefaceTextView {
       gravity = gravityEnd
       typefaceScale = TypefaceScale.MEDIUM_SMALL
       textSize = 14f
       textColor = "#333333".toColorInt()
   })

add函数 将子布局添加到对应ViewGroup中

import android.view.View
import android.view.ViewGroup


inline fun <V : View> ViewGroup.add(lp: ViewGroup.LayoutParams, view: V): V = view.also { addView(it, lp) }

splitties - lParams 函数

inline fun LinearLayout.lParams(
    width: Int = wrapContent,
    height: Int = wrapContent,
    initParams: LinearLayout.LayoutParams.() -> Unit = {}
): LinearLayout.LayoutParams {
    contract { callsInPlace(initParams, InvocationKind.EXACTLY_ONCE) }
    return LinearLayout.LayoutParams(width, height).apply(initParams)
}

inline fun LinearLayout.lParams(
    width: Int = wrapContent,
    height: Int = wrapContent,
    gravity: Int = -1,
    weight: Float = 0f,
    initParams: LinearLayout.LayoutParams.() -> Unit = {}
): LinearLayout.LayoutParams {
    contract { callsInPlace(initParams, InvocationKind.EXACTLY_ONCE) }
    return LinearLayout.LayoutParams(width, height).also {
        it.gravity = gravity
        it.weight = weight
    }.apply(initParams)
}

View - typefaceTextView 函数

// TypefaceTextView 防苹果系统的字体加粗------------------------------------------------------------------
inline fun Context.typefaceTextView(
    @IdRes id: Int = View.NO_ID,
    @StyleRes theme: Int = NO_THEME,
    initView: TypefaceTextView.() -> Unit = {}
): TypefaceTextView {
    return view(::TypefaceTextView, id, theme, initView)
}

inline fun View.typefaceTextView(
    @IdRes id: Int = View.NO_ID,
    @StyleRes theme: Int = NO_THEME,
    initView: TypefaceTextView.() -> Unit = {}
): TypefaceTextView {
    return context.typefaceTextView(id, theme, initView)
}

inline fun Ui.typefaceTextView(
    @IdRes id: Int = View.NO_ID,
    @StyleRes theme: Int = NO_THEME,
    initView: TypefaceTextView.() -> Unit = {}
): TypefaceTextView {
    return ctx.typefaceTextView(id, theme, initView)
}
// -------------------------------------------------------------------------------------------------------

typefaceTextView - typefaceScale 加粗类型函数

enum class TypefaceScale {
//    MEDIUM,
    MEDIUM_SMALL,
    DEFAULT,
}

var TypefaceTextView.typefaceScale: TypefaceScale
    @Deprecated(NO_GETTER, level = DeprecationLevel.HIDDEN) get() = noGetter
    set(value) {
        val scale = when (value) {
//            TypefaceScale.MEDIUM -> TypefaceTextView.TypefaceScale.MEDIUM
            TypefaceScale.MEDIUM_SMALL -> TypefaceTextView.TypefaceScale.MEDIUM_SMALL
            TypefaceScale.DEFAULT -> TypefaceTextView.TypefaceScale.DEFAULT
        }
        setTypefaceScale(scale)
    }

支持动态、静态设置

为了方便直接在 xml 中使字体加粗，需要在控件上引入自定义属性，故需添加以下属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TypefaceTextView">
        <attr name="fontScale" format="enum">
            <enum name="normal" value="0" />
            <enum name="medium" value="1" />
            <enum name="bold" value="2" />
        </attr>
    </declare-styleable>
</resources>

创建 - 自定义组件

package com.example.boldtext

import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.support.v7.widget.AppCompatTextView
import android.util.AttributeSet

class TypefaceTextView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    AppCompatTextView(context, attrs, defStyleAttr) {

    private var mTypefaceScale: Float = 0.0f

    init {
        if (attrs != null) {
            val array = context.obtainStyledAttributes(attrs, R.styleable.TypefaceTextView)
            val typefaceScale = array.getInt(R.styleable.TypefaceTextView_fontScale, 0)
            mTypefaceScale = when (typefaceScale) {
                1 -> 0.6f
                2 -> 1.1f
                else -> 0.0f
            }
            array.recycle()
        }
    }

    enum class TypefaceScale {
        MEDIUM, DEFAULT, BOLD
    }

    override fun onDraw(canvas: Canvas?) {
        if (mTypefaceScale == 0f) {
            return super.onDraw(canvas)
        }
        val strokeWidth = paint.strokeWidth
        val style = paint.style
        paint.strokeWidth = mTypefaceScale
        paint.style = Paint.Style.FILL_AND_STROKE
        super.onDraw(canvas)
        paint.strokeWidth = strokeWidth
        paint.style = style
    }

    internal fun setTypefaceScale(scale: TypefaceScale = TypefaceScale.DEFAULT) {
        mTypefaceScale = when (scale) {
            TypefaceScale.DEFAULT -> 0.0f
            TypefaceScale.MEDIUM -> 0.6f
            TypefaceScale.BOLD -> 1.1f
        }
        invalidate()
    }

}
静态设置

静态设置 fontScale 属性为枚举类型中的其一

    <com.example.boldtext.TypefaceTextView
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:gravity="center"
        app:fontScale="bold"
        android:text="TypefaceTextView 加粗字体" />
动态设置
package com.example.boldtext

import android.support.v7.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val typefaceView = findViewById<TypefaceLTextView>(R.id.typeface_view)
        //设置加粗
        typefaceView.setTypefaceScale(TypefaceLTextView.TypefaceScale.MEDIUM)
    }
}

只能设置我们声明的枚举类型，如果项目需要扩展到更多粗度的话，可以自行增加！

在这里插入图片描述

远方那座山
关注
  • 25
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
android中文字体加粗,android TextView设置中文字体加粗实现方法
weixin_28040125的博客
05-25 4681
android TextView设置中文字体加粗实现方法英文设置加粗可以在xml里面设置:复制代码 代码如下:android:textStyle="bold"英文还可以直接在String文件里面直接这样填写:复制代码 代码如下:Plain, bold, italic, bold-italicb代码加粗,i代表倾斜中文设置加粗就需要在代码中获取到当前TextView在进行设置:复制代码 代码如下:T...
WinForm绘制文本--字体加粗、倾斜、下划线
weixin_30467087的博客
02-02 2602
WinForm绘制文本--字体加粗、倾斜、下划线 　　　　 Graphics g; Font font; Brush brush; string fontString = ""; private void button1_Click(object sender, E...
Android中文字体加粗
给力生活，天天向上！
04-27 303
一、在xml文件中使用android:textStyle=”bold”   二、但是不能将中文设置成粗体，将中文设置成粗体的方法是：  TextView tv = (TextView)findViewById(R.id.TextView01); TextPaint tp = tv.getPaint(); tp.setFakeBoldText(true); ...
TextView 中文字体加粗
Jasonshieh
09-06 143
在xml文件中使用android:textStyle=”bold” 可以将英文设置成粗体， 但是不能将中文设置成粗体， 将中文设置成粗体的方法是： TextView tv = (TextView)findViewById(R.id.TextView01); TextPaint tp = tv.getPaint(); tp.setFakeBoldText(true); ...
android 字体加粗
Venus 的博客
03-06 8558
1、英文字体加粗 1）直接在XML文件修改 android:textStyle=&quot;bold&quot; 2、中文字体加粗 不能直接在xml文件修改 1）一种方法 TextView textView= (TextView)findViewById(R.id.textView); TextPaint paint = textView.getPaint(); paint.setF...
android字体加粗的方法
叶子一哥
09-09 3111
android字体加粗 android字体加粗  一、英文字体加粗     在xml文件中使用android:textStyle="bold"  二、中字体加粗  不能通过xml文件将中文设置成粗体，将中文设置成粗体的方法是：  TextView tv = (TextView)findViewById(R.id.TextView01);  TextPaint tp =
Android中字体加粗
热门推荐
to_cm的专栏
11-11 9万+
Android中字体加粗
Unity UGUI 字体加粗特效
YzlCoder的记事本
03-26 8541
Unity UGUI 字体加粗特效1.前言2.优化(一)3.优化(二) 1.前言 在项目组无可厚非会在一些描述的文本中加入粗体，比如标题或者是重要文字，然而Unity本身UGUI提供的Text的Bold属性在某些字体达到的效果并不尽人意，可以先看下原本Unity的效果： 2.优化(一) 原本的效果肯定是不满足美术需求的，我们需要通过字体渲染方面重新实现字体加粗效果，在本文中核心算法其实就是将文本...
粗上加粗的IE10字体宽到超出原本的容器
09-25
2. **使用相对加粗度**：如果确实需要更粗的字体，可以使用数值来指定`font-weight`，例如`font-weight: 900;`，而不是`bold`，这样可以避免与`<strong>`标签冲突。 3. **条件注释或特性检测**：对于仅针对IE10的...
glow-sans：SHSans派生的CJK字体家族，具有更简洁，更现代的外观。未来荧黑·未来荧黑·ヒカリ角ゴ：基于思源黑体改造，拥有粗度和宽度系列，更加简明现代的超大字体家族
02-05
笔画细节上处理得更加干净，简洁而平直化。您可以下载来预览未来荧黑的设计。 字体的制作并没有使用字体设计软件，而是用一个Web实现的来确定字体参数。 下载 版本更新与下载链接会更新在如果您使用。 macOS操作系统...
Android Html支持字体大小和加粗样式(可扩展)
09-17
Android Html标签中支持,size,font-size,font-weight属性.如果系统中不支持的也可以在这基础上扩展.
android TextView设置中文字体加粗实现方法
01-04
英文设置加粗可以在xml里面设置: 代码如下: <SPAN xss=removed>android:textStyle=”bold”</SPAN> 英文还可以直接在String文件里面直接这样填写: 代码如下: <string name=”styled_text”>Plain, <b>bold</b>, <i>italic</i>, <b><i>bold-italic</i></b></string> b代码加粗,i代表倾斜 中文设置加粗就需要在代码中获取到当前TextView在进行设置: 代码如下: TextView tv = (TextView)findV
Android字体加粗
pingqingbo的专栏
09-21 1062
在Android上实现英文字体加粗还是比较容易的，我们只需要布置一个TextView控件，然后在上面写写style就可以，但是我们如何实现中文字体加粗呢? 英文字体加粗         布局文件中这样设置即可： XML/HTML代码 android:textStyle="bold"   中文字体加粗         中文字体加粗需要在代码中实现：
android 设置文本加粗,如何在Android中将文本更改为粗体？
weixin_39614060的博客
05-29 5539
如何在Android中将文本更改为粗体？如何更改Android TextView中的文本/字体设置？ 例如，如何使文本变粗？15个解决方案482 votes要在Typeface文件中执行此操作：android:textStyle例子：android:textStyle="bold|italic"以编程方式，该方法是：setTypeface(Typeface tf)设置应显示文本的字体和样式。 请注...
Android将字体加粗
jodan179的专栏
10-24 1069
一、PS中常用的技巧，用阴影、描边代替加粗，这里借鉴，非原创 android:shadowColor="#000000" android:shadowDx="0.2" android:shadowDy="0.0" android:shadowRadius="0.2" 转自：http://www.eoeandroid.com/thread-75171-1-1.html 二、在xml文
html美化字体颜色
最新发布
08-12
在前端美化字体颜色方面，有多种方法可以实现。一种方法是使用CSS的font-weight属性来设置字体的粗细，可以通过关键字100~900为字体指定9级加粗度，其中100对应最细的字体变形（lighter），900对应最粗的字体变形（bolder）。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

远方那座山

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值