【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>> の一時的な付け替え

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

リクエストの開始時に _loadingtrue に、レスポンス取得時に 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


【Android Studio Flamingo】dependencies をバージョンアップデートするときに確認するべき3つの相性

ソフトウェアの開発において、依存関係は重要な要素の一つです。一つのライブラリが別のライブラリに依存している場合、最新バージョンのアップデートを行う際には、注意が必要です。

今回は、依存関係をアップデートする際に留意しておくべきことについて解説します。

で、[File] - [Project Structure] からのこの画面。

This project uses Gradle Version Catalogs. There are some limitations. Learn more.

【Android Studio Flamingo】dependencies をアップデートするときに確認しておくべきこと

[Suggestions] 画面だけで完全に更新できませんよね。

「プラグイン、ライブラリ同士の互換性は考慮されていないものがある。」

「提案されない表示されないライブラリがある。」

ということで、どこに注意しながら新しいものに更新していくとスムーズに進むか、という話です。

 

🔗 Android Studio と Android Gradle Plugin

Android Studio は、Android アプリ開発に必要な開発環境を提供する統合開発環境です。

Android Gradle Plugin (AGP) は、Android Studio のビルドシステムに使用されるツールであり、ビルドプロセスを自動化するために必要です。

Android Studio と Android Gradle Plugin
👉 Android Gradle plugin and Android Studio compatibility - Android Studio Flamingo | 2022.2.1  |  Android Developers hatena-bookmark

Android Studio で使用している Android Gradle Plugin のバージョンを確認するには、プロジェクトの build.gradle ファイルを開き、以下のように dependencies ブロック内に記述されている AGP のバージョン番号を確認します。


dependencies { 
  classpath 'com.android.tools.build:gradle:x.y.z' 
  // ... 
}

または、build.gradle に記述がない Version Catalog 記述の Android Gradle Plugin のバージョンは、以下の、どちらかのプラグインID のバージョン(共通) です。


com.android.application

com.android.library

👉 【Plugin DSL】Android Gradle Plugin のバージョンを調べる方法 hatena-bookmark
👉 【Plugin DSL】「com.android.tools.build:gradle」の記述は不要? hatena-bookmark

Gradle Version Catalogs では以下のようになります。


# libs.versions.toml 

[versions]
android-gradle-plugin = "8.0.1"

[plugins]
android-application = { id = "com.android.application", version.ref = "android-gradle-plugin" }


// buid.gradle

plugins {
  alias libs.plugins.android.application
}

また、最新の AGP バージョンを確認するには、Google's Maven Repository を参照します。
Google's Maven Repository
👉 com.android.application.com.android.application.gradle.plugin - Google's Maven Repository hatena-bookmark

 

🔗 Android Gradle Plugin と Gradle

Gradle は、オープンソースのビルドツールであり、Java や Kotlin、Groovy などのプログラミング言語に対応しています。Android Studio のビルドシステムには、Gradle が採用されています。

AGP は、Gradle に依存しており、AGP のバージョンアップに伴い、Gradle のバージョンもアップデートする必要があります。

また、Gradle のバージョンアップには、Android Studio のバージョンアップも伴う場合がありますので、注意が必要です。

Android Gradle Plugin は Gradle に依存しているため、AGP をアップデートする場合には、Gradle も同時にアップデートする必要があります。

Android Gradle Plugin と Gradle
👉 Update Gradle - Android Gradle plugin release notes  |  Android Studio  |  Android Developers hatena-bookmark

Gradle のバージョンを確認するには、プロジェクトの gradle/wrapper/gradle-wrapper.properties ファイルを開き、以下のように distributionUrl に記述されている Gradle のバージョン番号を確認します。


distributionUrl=https\://services.gradle.org/distributions/gradle-8.1.1-bin.zip

また、最新の Gradle バージョンを確認するには、Gradle 公式サイトの Gradle Distributions を参照します。
Gradle Distributions
👉 Gradle Distributions hatena-bookmark

 

🔗 Kotlin と Jetpack Compose Compiler

Kotlin は、Android アプリ開発に必要なプログラミング言語の一つです。Jetpack Compose Compiler は、Kotlin をベースにした Jetpack Compose ライブラリのコンパイラです。

Jetpack Compose は、Android のユーザーインターフェースを作成するための新しい方法を提供するライブラリであり、Kotlin と密接に関連しています。

https://developer.android.com/jetpack/androidx/releases/compose-kotlin#pre-release_kotlin_compatibility
👉 Compose to Kotlin Compatibility Map  |  Android Developers hatena-bookmark

Jetpack Compose Compiler のバージョンをアップデートする場合には、Kotlin のバージョンも確認し、必要に応じてアップデートする必要があります。

Kotlin と Jetpack Compose Compiler の依存関係を確認するには、以下のように Kotlin と Compose Compiler のバージョン番号を確認します。


# libs.versions.toml 

[versions]
compose-compiler = "1.4.7"
kotlin = "1.8.21"

[plugins]
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
kotlin-kapt = { id = "org.jetbrains.kotlin.kapt", version.ref = "kotlin" }


// build.gradle

plugins {
  alias libs.plugins.kotlin.android  // 'kotlin-android'
  alias libs.plugins.kotlin.kapt     // 'kotlin-kapt'
}

android {
  composeOptions {
    kotlinCompilerExtensionVersion libs.versions.compose.compiler.get()
  }
}

また、最新の Kotlin と Jetpack Compose Compiler のバージョンを確認するには、それぞれ以下を参照します。

👉 Maven Repository: org.jetbrains.kotlin » kotlin-gradle-plugin hatena-bookmark
👉 androidx.compose.compiler.compiler - Google's Maven Repository hatena-bookmark

 

🔗 まとめ

Android Studio のビルドシステムには、Android Gradle Plugin が使用されており、AGP は Gradle に依存しています。

また、Kotlin と Jetpack Compose Compiler、そして SDK のライブラリ同士にも依存関係があります。

最新バージョンにアップデートする際には、それらのつながりを確認し、必要に応じて一括でアップデートすることをおすすめします。

コアな部分は Stable 最新バージョンで揃える、とすると、以下が、今現在ベストでしょう。


Android Studio
Flamingo | 2022.2.1

  ↕︎

Android Gradle Plugin
8.0.1

  ↕︎

Gradle
8.1.1


Kotlin
1.8.21

  ↕︎

Jetpack Compose Compiler
1.4.7

すぐ忘れるので libs.versions.toml にコメントで貼りつける。


[versions]
# Android Studio - AGP - Gradle
# Kotlin - Compose Compiler
#
# Android Studio version	Required plugin version
# Giraffe | 2022.3.1	3.2-8.1
# Flamingo | 2022.2.1	3.2-8.0
# https://developer.android.com/studio/releases#android_gradle_plugin_and_android_studio_compatibility
#
# Plugin version	Minimum required Gradle version
# 8.2	8.1
# 8.1	8.0
# 8.0	8.0
# https://developer.android.com/studio/releases/gradle-plugin#updating-gradle
#
# Android Studio :
# https://developer.android.com/studio
#
# Android Gradle Plugin :
# https://maven.google.com/web/index.html#com.android.application:com.android.application.gradle.plugin
#
# Gradle :
# https://services.gradle.org/distributions/
android-gradle-plugin = "8.0.1"

# Compose Compiler Version	Compatible Kotlin Version
# 1.4.7	1.8.21
# 1.4.6	1.8.20
# 1.4.5	1.8.20
# 1.4.4	1.8.10
# https://developer.android.com/jetpack/androidx/releases/compose-kotlin#pre-release_kotlin_compatibility
#
# compose-compiler :
# https://maven.google.com/web/index.html?authuser=0#androidx.compose.compiler:compiler
#
# kotlin :
# https://mvnrepository.com/artifact/org.jetbrains.kotlin/kotlin-gradle-plugin
# https://central.sonatype.com/artifact/org.jetbrains.kotlin/kotlin-gradle-plugin/
compose-compiler = "1.4.7"
kotlin = "1.8.21"

コメント内URLからリンクをブラウザを開くのは、⌘ (command) + click で。



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

一部の絵文字が白黒の記号と表示される場合があります。

カラーの絵文字と思いきや白黒。


Text("\u2B06\u27A1\u2B07\u2B05\u2195")

直接コードに絵文字埋め込むと意図通りに表示される。


// ブラウザ上でもうまく表示されないものがある。
Text("⬆️➡️⬇️⬅️↕️")

コードはわかりやすく Android Jetpack Compose にしています。

IDEのエディター上からコード内に直接絵文字を書くことができる感じもありますが、編集時にイラッとすること多いので直接書きたくありません。

これは、デバイスやOSやアプリが使用しているフォントだけに依るものなのでしょうか。

私の端末では、白黒とカラー両方の矢印を見たような気がする。

 

➡️ 調べてみる

この記事。

👉 Emoji displayed as monochrome symbol? 🤔 The Unicode variation selector hatena-bookmark

まとめると以下。

一部の記号は、意図しない白黒、またはカラー絵文字として表示される。

Unicode Variation Selector を使うとある程度制御できる。

Unicode Variation Selector を使用しない場合はシステム次第。

絵文字ピッカーには Unicode Variation Selector が含まれないものもある。

Mac の絵文字ピッカーや Emojipedia は Unicode Variation Selector が含まれています。

Unicode Variation Selector には  U+FE0E (VS15)と U+FE0F(VS16) が定義されている。

VS15 を追加すると白黒テキスト、VS16 はカラー絵文字が表示されます。

ここに挙げられている、Macの絵文字ピッカー (Control + Command + Space) でみると以下。右クリックで文字情報見れます。


⬆️
up arrow
Unicode: U+2B06 U+FE0F, UTF-8: E2 AC 86 EF B8 8F

⬇️
down arrow
Unicode: U+2B07 U+FE0F, UTF-8: E2 AC 87 EF B8 8F

➡️
right arrow
Unicode: U+27A1 U+FE0F, UTF-8: E2 9E A1 EF B8 8F

⬅️
left arrow
Unicode: U+2B05 U+FE0F, UTF-8: E2 AC 85 EF B8 8F

↕️
up-down arrow
Unicode: U+2195 U+FE0F, UTF-8: E2 86 95 EF B8 8F


⬆︎
UPWARDS BLACK ARROW
Unicode: U+2B06 U+FE0E, UTF-8: E2 AC 86 EF B8 8E

⬇︎
DOWNWARDS BLACK ARROW
Unicode: U+2B07 U+FE0E, UTF-8: E2 AC 87 EF B8 8E

➡︎
BLACK RIGHTWARDS ARROW
Unicode: U+27A1 U+FE0E, UTF-8: E2 9E A1 EF B8 8E

⬅︎
LEFTWARDS BLACK ARROW
Unicode: U+2B05 U+FE0E, UTF-8: E2 AC 85 EF B8 8E

⬍
UP DOWN BLACK ARROW
Unicode: U+2B0D, UTF-8: E2 AC 8D

同様に、以下からコピーした絵文字も Variation Selector きちんと入ってます。

👉 📙 Emojipedia — 😃 Home of Emoji Meanings 💁👌🎍😍 hatena-bookmark

入ってないツールや絵文字サイトもありますので注意です。

 

➡️ 試してみる

String がどうなってるか拡張関数を作っておきます。



これを使って詳細見てみます。


"⬆➡⬇⬅↕".printUnicodeEscapeSequences()

"⬆︎➡︎⬇︎⬅︎↕︎".printUnicodeEscapeSequences()

"⬆️➡️⬇️⬅️↕️".printUnicodeEscapeSequences()

"⬆️".printUnicodeEscapeSequences()

"➡️".printUnicodeEscapeSequences()

"⬇️".printUnicodeEscapeSequences()

"⬅️".printUnicodeEscapeSequences()

"↕️".printUnicodeEscapeSequences()

結果。


⬆➡⬇⬅↕
\u2B06\u27A1\u2B07\u2B05\u2195

⬆︎➡︎⬇︎⬅︎↕︎
\u2B06\uFE0E\u27A1\uFE0E\u2B07\uFE0E\u2B05\uFE0E\u2195\uFE0E

⬆️➡️⬇️⬅️↕️
\u2B06\uFE0F\u27A1\uFE0F\u2B07\uFE0F\u2B05\uFE0F\u2195\uFE0F

⬆️
\u2B06\uFE0F

➡️
\u27A1\uFE0F

⬇️
\u2B07\uFE0F

⬅️
\u2B05\uFE0F

↕️
\u2195\uFE0F

 

➡️ まとめ

異体字セレクタ (いたいじセレクタ、英: Variation Selectors) は、Unicode および ISO/IEC 10646 (UCS) における、文字の字体をより詳細に指定するためのセレクタ (選択子) である。

👉 異体字セレクタ - Wikipedia hatena-bookmark

矢印の場合カラー絵文字をある程度強制したい場合の Kotlin 文字列 Unicode 記述は、

Unicode Variation Selector\uFE0F (VS16) を文字シンボルの後につける。」


⬆️➡️⬇️⬅️↕️
\u2B06\uFE0F\u27A1\uFE0F\u2B07\uFE0F\u2B05\uFE0F\u2195\uFE0F

Jetpack Compose で書くと以下。


Text("\u2B06\uFE0F\u27A1\uFE0F\u2B07\uFE0F\u2B05\uFE0F\u2195\uFE0F")

逆に、白黒にしたい場合は、\uFE0E (VS15) をつければよい。

別に、layout.xml だろうが strings.xml だろうが同じ。

あと、ちなみに、いつも話題に上がる国旗とか。


🇯🇵
\uD83C\uDDEF\uD83C\uDDF5

👨‍👩‍👧‍👧
\uD83D\uDC68\u200D\uD83D\uDC69\u200D\uD83D\uDC67\u200D\uD83D\uDC67

なげえ。

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