【TextView分段顯示不同顏色的字體——基礎篇】

【TextView分段顯示不同顏色的字體——進階篇】封裝

廢話不多說，先上效果圖

相應代碼：

安卓自帶的解析HTML：

 val strHtmlContent1 =
            "1.分段顯示不同顏色<font color='#FF7200'>通過解析HTML來實現</font>" + "關鍵方法：Html.fromHtml";
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
            tv01.setText(
                Html.fromHtml(
                    strHtmlContent1,
                    HtmlCompat.FROM_HTML_MODE_LEGACY
                )
            )
        } else {
            tv01.setText(Html.fromHtml(strHtmlContent1))
        }

        val strHtmlContent2 =
            "<img src='" + R.mipmap.ic_huo_yan + "'>" + " " + getString(R.string.html2);

        tv011.setText(Html.fromHtml(strHtmlContent2, object : Html.ImageGetter {
            override fun getDrawable(source: String?): Drawable {
                val id = Integer.parseInt(source!!)
                val drawable = ContextCompat.getDrawable(this@MainActivity, id);
                drawable!!.setBounds(0, 0, drawable.intrinsicWidth, drawable.intrinsicHeight)
                return drawable
            }

        }, null))

第三方框架解析HTML，很不錯：

  html_text.setHtml(
            "<h2>Hello wold</h2>" + "<ul><li>cats</li><li>dogs</li></ul>" + "<img src=\"ic_huo_yan\"/>", HtmlResImageGetter(this@MainActivity));

安卓原生的方法：

   //字體顏色
        val strContent2 = tv02.text.toString();
        val spannableString2 = SpannableString(strContent2);
        val mForegroundColorSpan = ForegroundColorSpan(Color.GREEN);
        spannableString2.setSpan(mForegroundColorSpan, 0, 7, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        tv02.text = spannableString2;


        //字體背景顏色
        val strContent3 = tv03.text.toString();
        val spannableString3 = SpannableString(strContent3);
        val mBackgroundColorSpan = BackgroundColorSpan(Color.RED);
        spannableString3.setSpan(mBackgroundColorSpan, 0, 7, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        tv03.text = spannableString3;


        //字體大小
        val strContent4 = tv04.text.toString();
        val spannableString4 = SpannableString(strContent4);
        val mAbsoluteSizeSpan = AbsoluteSizeSpan(11, true);
        spannableString4.setSpan(mAbsoluteSizeSpan, 0, 7, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        tv04.text = spannableString4;


        //相對的字體大小，就是字體大小的多少倍
        val strContent5 = tv05.text.toString();
        val spannableString5 = SpannableString(strContent5);
        val mRelativeSizeSpan = RelativeSizeSpan(1.5f);
        spannableString5.setSpan(mRelativeSizeSpan, 0, 7, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        tv05.text = spannableString5;

        //刪除線
        val strContent6 = tv06.text.toString();
        val spannableString6 = SpannableString(strContent6);
        val mStrikethroughSpan = StrikethroughSpan();
        spannableString6.setSpan(mStrikethroughSpan, 2, 7, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        tv06.text = spannableString6;

        //下劃線
        val strContent7 = tv07.text.toString();
        val spannableString7 = SpannableString(strContent7);
        val mUnderlineSpan = UnderlineSpan();
        spannableString7.setSpan(mUnderlineSpan, 2, 7, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        tv07.text = spannableString7;

        //顯示圖標,受行間距的影響
        val strContent8 = tv08.text.toString();
        val spannableString8 = SpannableString("  $strContent8");
        val mImageSpan = ImageSpan(this, R.mipmap.ic_huo_yan);
        spannableString8.setSpan(mImageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        tv08.text = spannableString8;

        //顯示圖標，不受行間距的影響
        val strContent9 = tv09.text.toString();
        val spannableString9 = SpannableString("  $strContent9");
        val mCenteredImageSpan = CenteredImageSpan(this, R.mipmap.ic_huo_yan);
        spannableString9.setSpan(mCenteredImageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        tv09.text = spannableString9;

        //點擊事件
        val strContent10 = tv10.text.toString();
        val spannableString10 = SpannableString(strContent10);
        val clickableSpan = object : YpkClickableSpan() {
            override fun onClick(widget: View) {
                Toast.makeText(application, "ClickableSpan", Toast.LENGTH_LONG).show();
            }
        }
        spannableString10.setSpan(clickableSpan, 2, 13, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        tv10.movementMethod = LinkMovementMethod.getInstance()
        tv10.text = spannableString10;

        //效果疊加
        val strContent11 = tv11.text.toString();
        val spannableString11 = SpannableStringBuilder(strContent11);
        val mForegroundColorSpan11 = ForegroundColorSpan(Color.GREEN);
        spannableString11.setSpan(mForegroundColorSpan11, 0, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        val mAbsoluteSizeSpan12 = AbsoluteSizeSpan(11, true);
        spannableString11.setSpan(mAbsoluteSizeSpan12, 0, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        tv11.text = spannableString11;

自定義ImageSpan CenteredImageSpan

/**
 * ypk
 * 自定義 TextView 的ImageSpan
 * 能解決text中圖標居中對齊問題（無論TextView是否設置行距）
 */
public class CenteredImageSpan extends ImageSpan {

    private int drawableSize, drawableWidth, drawableHeight;

    public CenteredImageSpan(Context context, final int drawableRes) {
        super(context, drawableRes);
    }


    public CenteredImageSpan(Context context, final int drawableRes, int drawableSize) {
        super(context, drawableRes);
        this.drawableSize = drawableSize;
    }

    public CenteredImageSpan(Context context, final int drawableRes, int drawableWidth, int drawableHeight) {
        super(context, drawableRes);
        this.drawableWidth = drawableWidth;
        this.drawableHeight = drawableHeight;
    }

    @Override
    public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, @NonNull Paint paint) {
        // image to draw
        Drawable b = getDrawable();
        //這是drawable的寬和高
        if (drawableSize != 0) {
            b.setBounds(0, 0, drawableSize, drawableSize);
        } else if (drawableWidth != 0 && drawableHeight != 0) {
            b.setBounds(0, 0, drawableWidth, drawableHeight);
        }


        // font metrics of text to be replaced
        Paint.FontMetricsInt fm = paint.getFontMetricsInt();
        int transY = (y + fm.descent + y + fm.ascent) / 2 - b.getBounds().bottom / 2;

        canvas.save();
        canvas.translate(x, transY);
        b.draw(canvas);
        canvas.restore();
    }
}

YpkClickableSpan

public class YpkClickableSpan extends ClickableSpan {


    @Override
    public void updateDrawState(@NonNull TextPaint ds) {
       // super.updateDrawState(ds);
        ds.setColor(Color.BLUE);
        ds.setUnderlineText(false);
    }

    @Override
    public void onClick(@NonNull View widget) {

    }
}

---

相關博客：
html-textview

Android中SpannableString使用（二）

Android之TextView的樣式類Span的使用詳解