The magic of SpannableString by Samuel Dionne

Slide 1

Slide 1 text

Spannable Magic What are spans and what can we do with them

Slide 2

Slide 2 text

Outline What is are Span and Spannable strings What can we do with them How do they work How to create a custom span Questions

Slide 3

Slide 3 text

What are Spans and Spannable strings

Slide 4

Slide 4 text

Diﬀerents ways to style text Changing all the text at once Here is my example text

Slide 5

Slide 5 text

Diﬀerents ways to style text Changing only part of the text Here is my example text

Slide 6

Slide 6 text

Here come the Span Spans are a way to apply style to different part of a strings

Slide 7

Slide 7 text

Here come the Span Spans are a way to apply style to different part of a strings Here is my example text

Slide 8

Slide 8 text

Here come the Span Spans are a way to apply style to different part of a strings Here is my example text SpannableString str = new SpannableString(“Here is my example”); str.setSpan(new UnderlineSpan(), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); str.setSpan(new ForegroundColorSpan(0xffff0000), 8, 10, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); str.setSpan(new StyleSpan(BOLC), 19, 23, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

Slide 9

Slide 9 text

Here come the Span str.setSpan(new UnderlineSpan(), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); Span: what style we want Span Start index End index Flags

Slide 10

Slide 10 text

Here come the Span str.setSpan(new UnderlineSpan(), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); Span: what style we want Start index: where to start from Span Start index End index Flags

Slide 11

Slide 11 text

Here come the Span str.setSpan(new UnderlineSpan(), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); Span: what style we want Start index: where to start from End index: where to end Span Start index End index Flags

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Text change behaviours Here is my text Spannable.SPAN_EXCLUSIVE_EXCLUSIVE Spannable.SPAN_INCLUSIVE_EXCLUSIVE Spannable.SPAN_EXCLUSIVE_INCLUSIVE Spannable.SPAN_INCLUSIVE_INCLUSIVE Here is my super-text-er Here is my super-text-er Here is my super-text-er Here is my super-text-er Here is my super-text-er

Slide 14

Slide 14 text

How to apply span? It depends of what part can change

Slide 15

Slide 15 text

How to apply span? It depends of what part can change SpannedString Text is immutable Spans are immutables

Slide 16

Slide 16 text

How to apply span? It depends of what part can change SpannedString Text is immutable Spans are immutables SpannableString Text is immutable Spans are mutables

Slide 17

Slide 17 text

How to apply span? It depends of what part can change SpannedString Text is immutable Spans are immutables SpannableString Text is immutable Spans are mutables SpannableStringBuilder Text is mutable Spans are mutables

Slide 18

Slide 18 text

What can we do with them

Slide 19

Slide 19 text

Provided spans AbsoluteSizeSpan AlignmentSpan.Standard BackgroundColorSpan BulletSpan CharacterStyle ClickableSpan DrawableMarginSpan DynamicDrawableSpan EasyEditSpan ForegroundColorSpan IconMarginSpan ImageSpan LeadingMarginSpan.Standard MaskFilterSpan MetricAffectingSpan QuoteSpan RelativeSizeSpan ReplacementSpan ScaleXSpan StrikethroughSpan StyleSpan SubscriptSpan SuggestionSpan SuperscriptSpan TabStopSpan.Standard TextAppearanceSpan

Slide 20

Slide 20 text

Provided spans AbsoluteSizeSpan AlignmentSpan.Standard BackgroundColorSpan BulletSpan CharacterStyle ClickableSpan DrawableMarginSpan DynamicDrawableSpan EasyEditSpan ForegroundColorSpan IconMarginSpan ImageSpan MaskFilterSpan MetricAffectingSpan QuoteSpan RelativeSizeSpan ReplacementSpan ScaleXSpan StrikethroughSpan StyleSpan SubscriptSpan SuggestionSpan SuperscriptSpan TabStopSpan.Standard TextAppearanceSpan

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Provided spans AbsoluteSizeSpan AlignmentSpan.Standard BackgroundColorSpan • BulletSpan CharacterStyle ClickableSpan DrawableMarginSpan DynamicDrawableSpan EasyEditSpan ForegroundColorSpan IconMarginSpan ImageSpan LeadingMarginSpan.Standard MaskFilterSpan MetricAffectingSpan QuoteSpan RelativeSizeSpan ReplacementSpan ScaleXSpan StrikethroughSpan StyleSpan SubscriptSpan SuggestionSpan SuperscriptSpan TabStopSpan.Standard TextAppearanceSpan

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Provided spans AbsoluteSizeSpan AlignmentSpan.Standard BackgroundColorSpan BulletSpan CharacterStyle ClickableSpan DrawableMarginSpan DynamicDrawableSpan EasyEditSpan ForegroundColorSpan IconMarginSpan ImageSpan LeadingMarginSpan.Standard MaskFilterSpan MetricAffectingSpan QuoteSpan RelativeSizeSpan ReplacementSpan ScaleXSpan StrikethroughSpan StyleSpan S ubscriptSpan SuggestionSpan SuperscriptSpan TabStopSpan.Standard TextAppearanceSpan

Slide 26

Slide 26 text

Slide 27

Slide 27 text

How do they work

Slide 28

Slide 28 text

3 types of Spans

Slide 29

Slide 29 text

3 types of Spans Character Affecting Spans Appearance Affecting Spans Only affect the style No effect on the layout Example: ForegroundColorSpan

Slide 30

Slide 30 text

3 types of Spans Character Affecting Spans Appearance Affecting Spans Only affect the style No effect on the layout Metric Affecting Spans Affect the dimensions of the text Example: AbsoluteSizeSpan

Slide 31

Slide 31 text

3 types of Spans Character Affecting Spans Appearance Affecting Spans Only affect the style No effect on the layout Metric Affecting Spans Affect the dimensions of the text Paragraph Affecting Spans A paragraph is delimited by \n Example: QuoteSpan

Slide 32

Slide 32 text

How to create a custom span

Slide 33

Slide 33 text

Mise en scène 01 Julia UI Designer

Slide 34

Slide 34 text

1 Mise en scène 02 2 min 10 min 1 h 25 min

Slide 35

Slide 35 text

1 Mise en scène 03 2 min

Slide 36

Slide 36 text

1 Mise en scène 03 2 min AbsoluteSizeSpan

Slide 37

Slide 37 text

1 Mise en scène 03 2 min AbsoluteSizeSpan StyleSpan

Slide 38

Slide 38 text

1 Mise en scène 03 2 min AbsoluteSizeSpan StyleSpan ImageSpan

Slide 39

Slide 39 text

1 Mise en scène 04 2 min AbsoluteSizeSpan StyleSpan ImageSpan

Slide 40

Slide 40 text

1 Mise en scène 04 2 min AbsoluteSizeSpan StyleSpan ImageSpan

Slide 41

Slide 41 text

1 Solution 2 min AbsoluteSizeSpan StyleSpan SuperscriptImageSpan

Slide 42

Slide 42 text

SuperscriptImageSpan.java public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm); public void draw(Canvas canvas, CharSequence text, int start, int end, ﬂoat x, int top, int y, int bottom, Paint paint);

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Paint.FontMetricsInt

Slide 46

Slide 46 text

SuperscriptImageSpan.java public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) { Rect rect = drawable.getBounds(); if (fm != null) { fm.top = fm.ascent - rect.bottom / 2; } return rect.right; }

Slide 47

Slide 47 text

SuperscriptImageSpan.java public void draw(Canvas canvas, CharSequence text, int start, int end, ﬂoat x, int top, int y, int bottom, Paint paint) { canvas.save(); canvas.translate(x, drawable.getBounds().bottom / 2); drawable.draw(canvas); canvas.restore(); }

Slide 48

Slide 48 text

1 Finally 2 min AbsoluteSizeSpan StyleSpan SuperscriptImageSpan

Slide 49

Slide 49 text

Questions

Slide 50

Slide 50 text

Thank you!

Slide 51

Slide 51 text

References Spantastic text styling with Spans String Manipulation Using SpannableString Android Developer Doc