Comment dessiner une chaîne avec fractionnés Canvas.drawText dans Android

Question

Je veux dessiner un SpannedString à un 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); 

L'exemple ci-dessus a été dessiné à l'aide d'un TextView, qui à son tour utilise un Layout pour dessiner le texte avec des portées. Je sais que using a Layout is the recommended way pour dessiner du texte sur la toile. Cependant, je suis en train de créer ma propre mise en page de texte, donc j'ai besoin de la mettre en œuvre moi-même.

Faire quelque chose comme cela ne fonctionne pas

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

parce que drawText obtient le texte de la spannableString, aucun des travées. Les couleurs de dessin sont gérées séparément par TextPaint.

Comment est-ce que j'utilise canvas.drawText (ou drawTextRun) pour dessiner l'information d'envergure (spécifiquement la couleur de premier plan et d'arrière-plan ici)?

connexes

• 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()?

Plan pour une solution

J'allais faire directement une auto réponse mais cela se avère être plus diff icult que je pensais. Donc, je vais poster d'abord, puis ajouter une réponse chaque fois que je peux le comprendre. (Je bien sûr la bienvenue à quiconque de répondre à la première.)

Voici les pièces que j'ai jusqu'à présent:

• Draw each span range as a separate text run
• Utilisez drawTextRun pour dessiner le texte (examples) (mise à jour : non ajouté jusqu'à API 23)
• Utilisez getRunAdvance pour mesurer par où commencer le prochain passage de texte (mise à jour: non ajouté jusqu'à API 23, utilisez measureText à la place)
• La couleur de fond devra probablement être utilisée séparément (avec drawRect ou drawPath peut-être? Voir here, here et here.)
• code source pour TextView, StaticLayout et TextLine

Answer 1

Pour la plupart des gens qui viennent à cette question, vous devriez probablement utiliser un StaticLayout pour dessiner votre texte étalonnés. Voir this answer pour de l'aide avec ça.

Cependant, si vous avez réellement besoin de dessiner vous-même le texte, alors vous devrez loop through all the spanned ranges et dessiner chacun séparément. Vous devez également mesurer la longueur du texte dans chaque intervalle afin de savoir où commencer à dessiner l'intervalle suivant. Le code ci-dessous traite BackgroundColorSpan et 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; 
} 

La chaîne supérieure de l'image ci-dessous a été dessinée avec le code ci-dessus. La chaîne du bas a été dessinée avec un TextView (qui utilise un StaticLayout).