【Kotlin】ChatGPT のようなメッセージングアプリのスクロールする吹き出し部分にローディングインジケーターを実装する

 

🎞️ ローディングインジケーターの作成

まずは、簡単にテキストで「読み込み中」を表示するViewを作ります。

JetpackCompose なら簡単に実装できます。




こんな無限ループでさえ、Jetpack Compose はメモリーリークを起こしません。きちんと捨ててます。

上の動画内コードから抜粋。


  val texts = listOf("○○○", "️●○○", "️●●○", "️●●●", "️●●○", "️●○○")
  var dots by remember { mutableStateOf("") }

  LaunchedEffect(Unit) {
    while (true) {
      texts.indices.forEach { index ->
        delay(500)
        dots = texts[index]
      }
    }
  }

これを LazyColumn の item の表示に使います。

 

🎞️ Flow<List<Item>> の一時的な付け替え

まず、ローディング表示のよくあるパターン。

リクエストの開始時に _loading を true に、レスポンス取得時に false にすることで List<Item> を更新します。


private val _loading = MutableStateFlow(false)
val loading = _listening.asStateFlow()

val items: Flow<List<Item>> = _loading.flatMapLatest { loading ->
  repository.items
}

これを少し変更します。

List<Item> は、レスポンスが帰ってくるまで変化がないですが、この間にダミーの「読み込み中を表す Item」を最後に追加しておきます。

もちろん読み込みが終われば元に戻す。


val items: Flow<List<Item>> = _loading.flatMapLatest { loading ->
  repository.items.map { list ->
    list.toMutableList().apply {
      if (loading) add(dummyLoadingItem)
    }.toList()
  }
}

あとは、各メッセージを表示する Composable で Item を確認して表示を切り替えれば良いです。

 

🎞️ 出来上がり



👉 【Kotlin】Flow flatMap* を ネストするか チェインするか【coroutine】 hatena-bookmark

クリップボードにコピーしているテキストのコードポイントや Unicode/UTF-16 エスケープシーケンスを確認するスクリプト

クリップボードにコピーした以下のような文字

の構成とIDEで使いやすいエスケープシーケーンスを確認します。

Python や Android Studio エディター上で絵文字の編集が捗ると思って作ってみました。

クリップボードは生の絵文字データを保持できるので便利です。

UTF-16 サロゲートペア部分はもっと厳密に計算してもいいかもしれません。


【Kotlin】絵文字を含む Unicode 文字列の文字数をカウントする方法と文字ごとの構成要素

絵文字 は AndroidStudio 上で扱いづらいですよね。

例えば、


"😀😍"

という2つの絵文字は、


"\uD83E\uDD78" + "\uD83D\uDC3B\u200D\u2744\uFE0F"

と書く方が編集しやすいです。（しかし分かりづらい。）

絵文字をコピーして Android Studio 上でペーストすると、

\uXXXX\uXXXX

のような「UTF-16 エスケープシーケンス」に置き換わりますよね。

（しかし置き換わらない場合もある。）

👉 Python vs Kotlin Unicode Escape Sequence (エスケープシーケンス) の記述 hatena-bookmark

 

😀 文字を数える

検証するために文字列データを作ります。

絵文字も新旧バージョンのものを含めます。

15文字です。

比較的に新しい Unicode Emoji 15.1 の2つの絵文字は、今現在、まともに見たことがありません。

このデータの文字数をカウントするのは、


println(Regex("\\X").findAll(data).count())
// 15

というかんじでしょうか。

Unicode extended grapheme clusters are supported by the grapheme cluster matcher \X.

👉 2.2 Extended Grapheme Clusters and Character Classes with Strings hatena-bookmark
👉 Unicord support - Pattern  |  Android Developers hatena-bookmark

強く開発環境に影響されると思いますので、各バージョン安定版最新に更新して揃えておくべきでしょう。


android {
  // ...
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_17
    targetCompatibility JavaVersion.VERSION_17
  }

  kotlinOptions {
    jvmTarget = JavaVersion.VERSION_17.toString()
  }
}

 

😀 文字の構成（要素）を確認する

人間が見ている文字は内部的には複数の要素から構成されています。

絵文字周りで開発している方にはどこかで見たようなすごく便利な表です。

文字列を渡せば簡単に確認できるようにメソッドにしておきます。

先ほどの1文字ごとに分割したあとにその内部を要素に分割して表示します。

data は、先述の15文字を使ってみました。


dump(data)

AndroidStudio のデバッグウィンドウやターミナルでも表示できない絵文字はありますが、内部的には問題なく処理できてるように見えます。

 

😀 まとめ

今回、新しくはっきり認識できたことは、

kotlin の String.length は、


その文字(列)の Char (/uXXXX) の数を表している。

ということ。コードポイントの数ではない。

Char は、コードポイントを 内部的な UTF-16サロゲートペア 分割されたあとの要素。


println("👩‍👧‍👦".length)
// 8

👉 kotlin/Char.kt at 924c28507067cbfbf78a6509ea89eabe496e34ca · JetBrains/kotlin · GitHub hatena-bookmark



👉 絵文字が意図しない白黒で表示される ➡️ - Unicode Variation Selector hatena-bookmark