text spans: what, why and how?

Presented at the Android Meetup (GDG-SP).

References:

https://academy.realm.io/posts/360-andev-2017-stacy-devino-spannables/
http://flavienlaurent.com/blog/2014/01/31/spans/
https://www.youtube.com/watch?v=q2GtM1_RmMw
https://www.youtube.com/watch?v=7GFRpP9a-eQ
https://blog.stylingandroid.com/introduction-to-spans/
https://docs.google.com/document/d/1uRkb_w2OCKhsNBtHQ3uJBx9G7lUBY8dsIUp74iX6k9c/edit?usp=sharing
http://chiuki.github.io/advanced-android-textview/
https://medium.com/@tokudu/android-adding-padding-to-backgroundcolorspan-179ab4fae187
https://stackoverflow.com/a/41949135/1538992
https://developer.android.com/reference/android/text/style/TtsSpan.html

Transcript

1. text spans: what, why and how? Matheus C. Candido Android @ Concrete
3. 1 layout bound!
5. spans: objects that hold style information and mark-up of pieces of text
6. spanned x spannable
7. TextView Layout TextLine
8. TextView Layout TextLine basic and global attrs: padding, margin, background, etc. also text selection and highlight. paragraph styling: bullet points, line breaking, line backgrounds. character level styling.
9. paragraph level spans
10. bullet span val spacing = 20 // px! val items = arrayOf("Item 1", "Item 2", "Item 3") val builder = SpannableStringBuilder() items.forEach { val line = SpannableString(it) line.setSpan(BulletSpan(spacing), 0, it.length, SPAN_EXCLUSIVE_EXCLUSIVE) builder.appendln(line) } textView.text = builder
11. quote span val quote = "I'm selfish,…” val author = "Marilyn Monroe" val quoteSpan = SpannableString(quote) quoteSpan.setSpan(QuoteSpan(), 0, quote.length, SPAN_EXCLUSIVE_EXCLUSIVE) val finalText = SpannableStringBuilder() finalText.appendln(quoteSpan) finalText.append(author) textView.text = finalText
12. class CustomQuoteSpan : LeadingMarginSpan { val gap = 200 val quoteSize = 300 val leftQuote = "\u201C" val paint = TextPaint() init { paint.textSize = 240f } override fun drawLeadingMargin(canvas: Canvas, paint: Paint, x: Int, dir: Int, top: Int, baseline: Int, bottom: Int, text: CharSequence, start: Int, end: Int, first: Boolean, layout: Layout) { if ((text as Spanned).getSpanStart(this) == start) { canvas.drawText(leftQuote, x, top + quoteSize, this.paint) } } override fun getLeadingMargin(p0: Boolean): Int = gap } custom quote span
13. custom quote span val quote = "I'm selfish,…” val author = "Marilyn Monroe" val quoteSpan = SpannableString(quote) quoteSpan.setSpan(CustomQuoteSpan(), 0, quote.length, SPAN_EXCLUSIVE_EXCLUSIVE) val finalText = SpannableStringBuilder() finalText.appendln(quoteSpan) finalText.append(author) textView.text = finalText
14. alignment span //... val authorSpan = SpannableString(author) authorSpan.setSpan(AlignmentSpan.Standard(ALIGN_OPPOSITE), 0, author.length, SPAN_EXCLUSIVE_EXCLUSIVE) val finalText = SpannableStringBuilder() finalText .appendln(quoteSpan) .appendln() .append(authorSpan) textView.text = finalText
15. LineBackgroundSpan Source: Anton L.’s blog post
16. character level spans
17. character style and replacement span
18. character style and replacement span Delegated to TextPaint!
19. style span //... quoteSpan.setSpan(StyleSpan(Typeface.ITALIC), 0, quote.length, SPAN_EXCLUSIVE_EXCLUSIVE) //... authorSpan.setSpan(StyleSpan(Typeface.BOLD), 0, author.length, SPAN_EXCLUSIVE_EXCLUSIVE) textView.text = builder
20. foreground color span //... val selfish = "selfish" val impatient = "impatient" val insecure = "insecure" //... quoteSpan.setSpan(ForegroundColorSpan(myPinkColorInt), quote.indexOf(selfish), quote.indexOf(selfish) + selfish.length, SPAN_EXCLUSIVE_EXCLUSIVE) //... textView.text = builder
21. relative size span //... val sureAsHell = "sure as hell" //... quoteSpan.setSpan(RelativeSizeSpan(1.5f), quote.indexOf(sureAsHell), quote.indexOf(sureAsHell) + sureAsHell.length, SPAN_EXCLUSIVE_EXCLUSIVE) //... textView.text = builder
22. background color span //... quoteSpan.setSpan(BackgroundColorSpan(myPinkColor), quote.indexOf(sureAsHell), quote.indexOf(sureAsHell) + sureAsHell.length, SPAN_EXCLUSIVE_EXCLUSIVE) quoteSpan.setSpan(ForegroundColorSpan(myWhiteColor), quote.indexOf(sureAsHell), quote.indexOf(sureAsHell) + sureAsHell.length, SPAN_EXCLUSIVE_EXCLUSIVE) //... textView.text = builder
23. custom typeface span class CustomTypefaceSpan(val typeface: Typeface) : MetricAffectingSpan() { override fun updateMeasureState(paint: TextPaint) { paint.typeface = typeface } override fun updateDrawState(paint: TextPaint) { paint.typeface = typeface } }
24. custom typeface span //... val italicTypeface = ResourcesCompat .getFont(this, R.font.alegreya_italic)!! val boldTypeface = ResourcesCompat .getFont(this, R.font.alegreya_bold)!! quoteSpan.setSpan(CustomTypefaceSpan(italicTypeface), 0, quote.length, SPAN_EXCLUSIVE_EXCLUSIVE) authorSpan.setSpan(CustomTypefaceSpan(boldTypeface), 0, author.length, SPAN_EXCLUSIVE_EXCLUSIVE) textView.text = builder
25. custom letter spacing span class LetterSpacingSpan(val spacing: Float) : CharacterStyle() { override fun updateDrawState(paint: TextPaint) { if (SDK_INT >= LOLLIPOP) paint.letterSpacing = spacing } } authorSpan.setSpan(LetterSpacingSpan(0.15f), 0, author.length, SPAN_EXCLUSIVE_EXCLUSIVE)
26. clickable span class CustomClickSpan : ClickableSpan() { override fun onClick(view: View) { // action view.showToast("Clicked!", LENGTH_SHORT) } override fun updateDrawState(textPaint: TextPaint) { // do whatever with the textPaint textPaint.isUnderlineText = true } }
27. clickable span //... authorSpan.setSpan(CustomClickSpan(), 0, author.length, SPAN_EXCLUSIVE_EXCLUSIVE)
28. replacement span
29. image span val imageHolder = SpannableString(" ") val image = getDrawable(this, R.drawable.monroe) image.setBounds(0, 0, 100, 100) val imageSpan = ImageSpan(image, ImageSpan.ALIGN_BOTTOM) imageHolder.setSpan(imageSpan, 0, 1, SPAN_EXCLUSIVE_EXCLUSIVE) finalText .appendln(quoteSpan) .appendln() .append(authorSpan) .append(" ") .append(imageHolder) textView.text = finalText
31. accessibility •the TtsSpan supplies extra information (meta-data) used for when text-to-speech is scanning •there are numerous types of TtsSpan •TYPE_DIGITS •TYPE_TELEPHONE •TYPE_TIME •TYPE_MONEY •and others
32. custom spans Source: @chiuki’s adv textview talk
33. animating spans Possible changing property values of spans using ObjectAnimator! Source: @chiuki’s adv textview talk
34. font metrics
35. span flags Flags control the span behavior of text inserted later (using the insert method for example).
36. resources and others at bit.cassiano.me/ spans
37. thanks to: lisa wray stacy devino chiu-ki chan flavien laurent