如何在Android中使用Canvas.drawText繪製一個Spanned字符串

Question

我想畫一個SpannedString爲Canvas。

SpannableString spannableString = new SpannableString("Hello World!"); 
ForegroundColorSpan foregroundSpan = new ForegroundColorSpan(Color.RED); 
BackgroundColorSpan backgroundSpan = new BackgroundColorSpan(Color.YELLOW); 
spannableString.setSpan(foregroundSpan, 1, 8, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
spannableString.setSpan(backgroundSpan, 3, spannableString.length() - 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
textView.setText(spannableString); 

上面的例子是使用TextView，這反過來使用Layout繪製文本與跨度繪製。我知道using a Layout is the recommended way將文本繪製到畫布上。不過，我正在從頭開始自己的文本佈局，所以我需要自己實現這一點。

做這樣的事情不工作

canvas.drawText(spannableString, 0, spannableString.length(), 0, 0, mTextPaint); 

因爲drawText只能從spannableString獲取文本，沒有任何的跨度。繪圖顏色由TextPaint單獨處理。

如何使用canvas.drawText（或drawTextRun）繪製跨度信息（特別是前景色和背景色）？

相關

• How to loop through the spans in a SpannedString or SpannableString in Android
• Is it possible to display multi-color text with one call to Canvas.drawText()?

計劃的解決方案

我要直接做一個自我的答案，但這個是談到了差異更大比我想象的要困難。所以我會先發帖，然後每當我能弄明白的時候添加一個答案。 （我當然會歡迎任何搶先回答。）

下面是我到目前爲止的作品：

• Draw each span range as a separate text run
• 使用drawTextRun繪製文本（examples）（更新 ：直到API 23時才添加）
• 使用getRunAdvance來測量從何處開始下一次文本運行（更新：未添加到API 23，請使用改爲）
• 背景顏色可能需要單獨繪製（使用drawRect或者drawPath？見here，here和here。）
• 源代碼TextView，StaticLayout和TextLine

Answer 1

對於大多數人來這個問題，你應該使用一個StaticLayout提請您跨越文本。請參閱this answer尋求幫助。

但是，如果你實際上需要繪製自己的跨區文本，那麼你就需要loop through all the spanned ranges並分別繪製每一個。您還需要測量每個跨度中文本的長度，以便您知道從哪裏開始繪製下一個跨度。

下面的代碼處理BackgroundColorSpan和ForegroundColorSpan。

// set up the spanned string 
SpannableString spannableString = new SpannableString("Hello World!"); 
ForegroundColorSpan foregroundSpan = new ForegroundColorSpan(Color.RED); 
BackgroundColorSpan backgroundSpan = new BackgroundColorSpan(Color.YELLOW); 
spannableString.setSpan(foregroundSpan, 1, 8, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
spannableString.setSpan(backgroundSpan, 3, spannableString.length() - 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 

// draw each span one at a time 
int next; 
float xStart = 0; 
float xEnd; 
for (int i = 0; i < spannableString.length(); i = next) { 

    // find the next span transition 
    next = spannableString.nextSpanTransition(i, spannableString.length(), CharacterStyle.class); 

    // measure the length of the span 
    xEnd = xStart + mTextPaint.measureText(spannableString, i, next); 

    // draw the highlight (background color) first 
    BackgroundColorSpan[] bgSpans = spannableString.getSpans(i, next, BackgroundColorSpan.class); 
    if (bgSpans.length > 0) { 
     mHighlightPaint.setColor(bgSpans[0].getBackgroundColor()); 
     canvas.drawRect(xStart, mTextPaint.getFontMetrics().top, xEnd, mTextPaint.getFontMetrics().bottom, mHighlightPaint); 
    } 

    // draw the text with an optional foreground color 
    ForegroundColorSpan[] fgSpans = spannableString.getSpans(i, next, ForegroundColorSpan.class); 
    if (fgSpans.length > 0) { 
     int saveColor = mTextPaint.getColor(); 
     mTextPaint.setColor(fgSpans[0].getForegroundColor()); 
     canvas.drawText(spannableString, i, next, xStart, 0, mTextPaint); 
     mTextPaint.setColor(saveColor); 
    } else { 
     canvas.drawText(spannableString, i, next, xStart, 0, mTextPaint); 
    } 

    xStart = xEnd; 
} 

下圖中的頂部字符串是用上面的代碼繪製的。底部的字符串是用常規的TextView（使用StaticLayout）繪製的。