Styling Text with Jetpack Compose

Links

https://developer.android.com/reference/kotlin/androidx/ui/text/AnnotatedString
https://developer.android.com/reference/kotlin/androidx/ui/text/InlineTextContent
https://github.com/tsuyosh/JetpackComposeTextDemo
https://www.youtube.com/watch?v=U5BwfqBpiWU
https://joebirch.co/android/exploring-jetpack-compose-text/

Transcript

1. Jetpack Composeでテキストを装飾する話
   Potatotips #70
   Tsuyoshi Uehara
   1
   

   View Slide

2. ⾃⼰紹介
   お名前: Tsuyoshi Uehara
   Twitter: @uecchi
   Github: @tsuyosh
   2
   

   View Slide

3. 今回のお題
   Jetpack Composeで装飾つきのテキストを表⽰する
   3
   

   View Slide

4. Jetpack Composeとは?
   Googleで絶賛開発中のAndroidの新しいUI Toolkit
   全てKotlinで実装
   宣⾔的にUIを構築することができる
   最新バージョンは0.1.0-dev14
   Android Studio 4.2 Canary簡単に試せます
   4
   

   View Slide

5. その1: テキスト全体を装飾
   テキスト全体にスタイルを適⽤する場合はText関数の引数に渡す
   @Composable
   fun StyledGreeting(name: String) {
   Text(
   text = "Hello $name!",
   color = Color.Green,
   fontSize = 30.sp,
   fontFamily = FontFamily.Cursive,
   fontStyle = FontStyle.Italic,
   fontWeight = FontWeight.Bold
   )
   }
   5
   

   View Slide

6. その2: テキストの⼀部を装飾
   テキストの⼀部を装飾したい場合、AnnotatedStringクラスを使います.
   従来のFrameworkではSpannedに相当
   @Composable
   fun StyledGreeting2(name: String) {
   val greetingText = annotatedString {
   pushStyle(SpanStyle(color = Color.Green))
   append("Hello ")
   //
   前にpush
   したstyle
   は引き継がれる
   pushStyle(SpanStyle(
   fontSize = 40.sp,
   // Snip fontFamily, fontStyle, fontWeight
   fontSynthesis = FontSynthesis.All,
   textDecoration = TextDecoration.Underline
   ))
   append("$name!")
   pop() //
   直近でpush
   したstyle
   はpop
   できる
   }
   Text(text = greetingText, fontSize = 30.sp)
   }
   6
   

   View Slide

7. View Slide

8. その3: テキスト内にカスタム絵⽂字(画像)を表⽰ 1/3
   従来のImageSpanの様にテキスト内にカスタム絵⽂字(画像)を表⽰したい場合は
   InlineTextContentクラスを使います。
   @Composable
   fun StyledGreeting3(name: String) {
   val inlineContentId = "InlineContent"
   val greetingText = annotatedString {
   append("Hello $name!")
   // inline content
   を挿⼊
   appendInlineContent(id = inlineContentId, alternateText = ":droid:")
   }
   // snip
   }
   8
   

   View Slide

9. その3: テキスト内にカスタム絵⽂字(画像)を表⽰ 2/3
   inlineContent: Map
   を定義してText関数に渡します。
   @Composable
   fun StyledGreeting3(name: String) {
   val inlineContentId = "InlineContent"
   val greetingText = // snip
   val inlineContent = mapOf(
   inlineContentId to InlineTextContent(
   Placeholder(
   width = 30.sp,
   height = 30.sp,
   placeholderVerticalAlign = PlaceholderVerticalAlign.Center
   )
   ) { alternateText ->
   //
   このlambda
   はComposable
   関数
   CustomEmojiImage(imageResId = R.drawable.ic_android_robot)
   }
   )
   Text(text = greetingText, fontSize = 30.sp, inlineContent = inlineContent)
   } 9
   

   View Slide

10. その3: テキスト内にカスタム絵⽂字(画像)を表⽰ 2/3
    CustomEmojiImageは普通にImageを表⽰するだけ
    @Composable
    fun CustomEmojiImage(imageResId: Int) {
    Image(
    modifier = Modifier.fillMaxSize(),
    asset = vectorResource(id = imageResId),
    contentScale = ContentScale.FillWidth
    )
    }
    10
    

    View Slide

11. まとめ
    Text関数でテキスト全体のスタイルを指定できる
    AnnotatedStringでテキストの⼀部を装飾できる
    InlineTextContentで画像やカスタム絵⽂字もテキスト内で表⽰できる(⼀番欲しかったも
    の)
    サンプルコードはこちら
    https://github.com/tsuyosh/JetpackComposeTextDemo
    11
    

    View Slide

12. Thank you for listening
    12
    

    View Slide

13. References
    Jetpack Compose(Youtubeの動画)
    Exploring Jetpack Compose: Text
    13
    

    View Slide