Skip to content

Latest commit

 

History

History
87 lines (61 loc) · 5.17 KB

README.md

File metadata and controls

87 lines (61 loc) · 5.17 KB

Zeplin Spannable String Extension

Generates Spannable Strings for texts with multiple styles.

Supported spans are:

You can add the extension to your project from here.

Options

Language

Supports both Kotlin and Java languages. Default language is Kotlin but you can change it from extension settings on Zeplin.

Span Flag

One of the following span flags is used while generating code:

Samples

Kotlin Output

val spannableString = SpannableString("This is a layer containing multiple text styles")

spannableString.setSpan(AbsoluteSizeSpan(24, true), 0, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(ForegroundColorSpan(Color.argb(255, 0, 0, 0)), 0, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(StyleSpan(Typeface.NORMAL), 0, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(TypefaceSpan("sans-serif"), 0, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

spannableString.setSpan(AbsoluteSizeSpan(20, true), 8, 15, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(ForegroundColorSpan(Color.argb(255, 208, 2, 27)), 8, 15, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(StyleSpan(Typeface.BOLD), 8, 15, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(TypefaceSpan("sans-serif-condensed"), 8, 15, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

spannableString.setSpan(AbsoluteSizeSpan(26, true), 16, 35, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(ForegroundColorSpan(Color.argb(255, 245, 166, 35)), 16, 35, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(StyleSpan(Typeface.ITALIC), 16, 35, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(TypefaceSpan("monospace"), 16, 35, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

spannableString.setSpan(AbsoluteSizeSpan(30, true), 36, 46, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(ForegroundColorSpan(Color.argb(255, 126, 211, 33)), 36, 46, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(StyleSpan(Typeface.BOLD_ITALIC), 36, 46, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(TypefaceSpan("sans-serif"), 36, 46, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

Java Output

SpannableString spannableString = new SpannableString("This is a layer containing multiple text styles");

spannableString.setSpan(new AbsoluteSizeSpan(24, true), 0, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new ForegroundColorSpan(Color.argb(255, 0, 0, 0)), 0, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new StyleSpan(Typeface.NORMAL), 0, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new TypefaceSpan("sans-serif"), 0, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

spannableString.setSpan(new AbsoluteSizeSpan(20, true), 8, 15, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new ForegroundColorSpan(Color.argb(255, 208, 2, 27)), 8, 15, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new StyleSpan(Typeface.BOLD), 8, 15, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new TypefaceSpan("sans-serif-condensed"), 8, 15, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

spannableString.setSpan(new AbsoluteSizeSpan(26, true), 16, 35, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new ForegroundColorSpan(Color.argb(255, 245, 166, 35)), 16, 35, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new StyleSpan(Typeface.ITALIC), 16, 35, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new TypefaceSpan("monospace"), 16, 35, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

spannableString.setSpan(new AbsoluteSizeSpan(30, true), 36, 46, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new ForegroundColorSpan(Color.argb(255, 126, 211, 33)), 36, 46, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), 36, 46, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new TypefaceSpan("sans-serif"), 36, 46, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

Development

This extension is developed using zem, Zeplin Extension Manager. zem is a command line tool that lets you quickly create, test and publish extensions.

To learn more about creating Zeplin extensions, see documentation.