如何實現 “中間這幾個字要加粗，但是不要太粗，比較纖細的那種粗” ？

振之發表於2019-03-04

分享一個最近做業務遇到的簡單又蠻有意思的的文字顯示處理過程。具體就是有這麼一段文字，類似“轉盤抽獎獲得跑車x1，點選領取～”，用TextView顯示。

設計師：“能讓文字加粗嗎？”

“可以”，然後加上了粗體屬性android:textStyle=”bold”。

<TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textStyle="bold"
            android:textColor="#252525"
            android:textSize="19sp"/>複製程式碼

不放截圖了，效果你知道的。

設計師：“不不不，不是整體加粗，只要中間這幾個字，就跑車x1加粗，其他文字不變。哦?，或者前面的加上下花線”

“OK”，因為變成了文字分段顯示成不同樣式了，所以我換用了span來處理。

Spanny spanny = new Spanny("Underline text", new UnderlineSpan())
                .append("
Bold text", new StyleSpan(Typeface.BOLD))
                .append("
Plain text");
textView.setText(spanny);複製程式碼

這裡的Spanny是個很好用的Span工具類Spanny，可以便捷地將span設定到String上，順便推薦一下。如果不用Spanny，效果自己按原生Api拼接也是一樣的。

設計師：“為什麼加粗會這麼粗，iOS沒有這麼粗啊，不要這麼粗，要纖細的那種粗！”

“@¥#%@@*&！微笑?”
為什麼會比iOS的粗，因為是系統字型不一樣的原因，iOS 用的是Helvetica，安卓字型是Roboto，其字型本身就設計加粗效果就是這麼粗。就沒有辦法了嗎？有的。

  1. 可以換字型，比如light字型。但是不支援區域性的加粗，總不能把文字切成3個textview來顯示吧，不實際。×

  2. span+畫筆處理。 √ 

    //沒錯，就幾行程式碼這麼簡單
public class FakeBoldSpan extends CharacterStyle {

 @Override
 public void updateDrawState(TextPaint tp) {
     tp.setFakeBoldText(true);//一種偽粗體效果，比原字型加粗的效果弱一點
     // tp.setStyle(Paint.Style.FILL_AND_STROKE);
     // tp.setColor(Color.RED);//字型顏色
     // tp.setStrokeWidth(10);//控制字型加粗的程度
 }
}
//使用:
fakeBoldText.setText(new Spanny().append("FakeBold",new FakeBoldSpan()));複製程式碼

    如圖，依次是普通字型，加粗字型，比較纖細的那種粗——

2017.07.31 更新，有評論問到中文加粗怎麼搞？
設定一下Span的畫筆：

        tp.setStyle(Paint.Style.FILL_AND_STROKE);
        tp.setColor(Color.RED);//字型顏色
        tp.setStrokeWidth(10);//控制字型加粗的程度複製程式碼

這裡控制的是字型加粗的程度。有空再寫個方便隨意控制粗細度的方法吧。

相關文章