アプリ開発備忘録

PlayStationMobile、Android、UWPの開発備忘録

Jetpack Compose

【Jetpack Compose】CompositionのSkippableとLayoutフェーズでのパフォーマンス最適化

はじめに Jetpack Composeは変更があった部分だけ、再計算(ReComposition) されます。どのようなときにReCompositionされて、どのようなときにCompositionがSkipされるのかを知っていると、最適なパフォーマンスを得られる手がかりになります。 Jetpack Comp…

【Jetpack Compose】derivedStateOfとremember(key)の使い所

派生Stateである DerivedState を作成する derivedStateOf の使い所についてです。 基本的な使い方 rememberの中で derivedStateOf を使います。その中で State を読み込みます。 これにより、 Stateの counter1 が変化した時にだけ計算が行われます。 var c…

【Deep Jetpack Cpmpose】ReadされたStateObjectを把握する

とあるLambdaの中で読み込まれたStateObjectを把握します。 環境 Jetpack Compose Desktopですが、Androidでも動きは同じはずです。 Runtime 1.1 コード Snapshot.observe で読み込まれたStateObjectを把握する事ができます。 derivedStateOf の内部で使われ…

【Jetpack Cpmpose】スキップ/起動可能性と@NonRestartableComposable【パフォーマンス最適化】

Composableの状態 Composable関数には3つの状態があります。 State1 State2 State3 skippable ○ restartable ○ ○ https://github.com/androidx/androidx/blob/403b6d0032c289ed6e65a1c75f137c07aedd220f/compose/compiler/design/compiler-metrics.md skippa…

【Jetpack Compose Android】LayoutInspectorでRecomposeの状況を見る

LayoutInspectorを使って、Recomposeされているタイミングと場所を把握します。 LayoutInspectorを開きます。 設定 Show Recomposition Counts にチェックを入れます。 Show Recomposition Counts が無い場合は compose runtime のバージョンが 1.2 以上が必…

【Jetpack Compose】プレビュー画面では別のものを表示する【isInEditMode】

従来のAndroidのViewでは、プレビュー中なことは isInEditMode でわかります。これのCompose版です。 コード 以下でわかります。 val runningInPreview = LocalInspectionMode.current 使い所 GoogleMapは記事を書いている現状で、プレビューが働かないので…

【Compose Desktop】フレームなしウィンドウを移動させる【1.1.1】

こちらで紹介したので 0.3.0-build150 のバージョンでしたが、 LocalAppWindow が無くなったので、代わりにWindowに与える引数の、WindowStateを使います。 https://matsudamper.hatenablog.com/entry/2021/02/08/025214 コード Compose Desktopのバージョン…

【Jetpack Compose】クリック範囲とrippleの範囲を別にする

以下のようなボタンを作成します。 四角の中がボタンが押せる範囲 rippleは円形の中だけ 実装 clickableの引数を見れば明確で、実装時に悩むことはありませんでしたが、以下のようにします。 interactionSource を共有し、rippleを表示させたくない範囲は in…

【Jetpack Compose】CoordinatorLayoutのenterAlwaysを作る

概要 CoordinatorLayoutのenterAlwaysを作成します。 必要なもの等 スクロールを検知して止めたりする レイアウトを移動させる 影の制御 Compose 解説は末尾でやります。 完成品 @Composable public fun HeaderEnterAlwaysColumn( modifier: Modifier = Modi…

【Jetpack Compose】テキストのベースラインとその他の要素の下部を合わせる

テキストのベースラインとアイコン等を下部に揃えます。 ベースラインではなくて、ただ単純に要素の下部を揃えたい場合は Row(verticalAlignment = Alignment.Bottom) で十分です。 テキストのベースラインを揃える まずテキストのベースラインを揃えるには …

【Jetpack Compose】横幅に応じてLayoutをScaleさせる

Usecase デザイン上、1行で表示させたいが、デバイスによっては横幅に収まらない。しかし改行をさせたくないものがあったので作りました。 上の様な感じではなく、下のように表示したい場合に使用します。 両方とも文字サイズ30spを使用し、表示できるデバイ…

【Jetpack Compose】@ComposableをInner関数で使用しないほうが良い

env composeOptions { kotlinCompilerVersion "1.5.10" kotlinCompilerExtensionVersion "1.0.0-rc01" } code 2つ目のViewを押すと called が2回呼ばれています。 TestViewをRoot関数の外に出すと1回だけになりました。 何故か更新の無いはずのRowの最初のVi…

【差分計算の仕組み】@Composableの引数にListを取ると差分計算がされない。 【Stable, Immutable】

このような動的に変更されるtimeがあります。 class TagViewModel(private val coroutineScope: CoroutineScope) { val time: MutableStateFlow<String> = MutableStateFlow("") init { coroutineScope.launch(Dispatchers.Default) { while (isActive) { time.value</string>…

【Android】Jetpack Composeの画像読み込みと加工のバットプラクティス

※追記 デバッグビルドと本番ビルド、端末ごとにパフォーマンスが大きく異る事がわかったので、パフォーマンスが悪いのはそれのせいかもしれません。(特に自分はPixel5でパフォーマンスが悪かったです。Pixel3は問題なかったですが。) 前提 rc01が出ています…

Jetpack Compose Desktop 0.3->0.4のマイグレーション

自分の観測したものだけですが、記述します。 バージョン from: 0.3.0-build152 to: 0.4.0-build168 build.gradle.kts 0.3.0 compose.desktop { application { mainClass = "MainKt" nativeDistributions { targetFormats(TargetFormat.Dmg, TargetFormat.Ms…

フレームなしウィンドウをダブルクリックで全画面化する【Jetpack Compose Desktop】

バージョン情報 plugins { kotlin("jvm") version "1.4.30" id("org.jetbrains.compose") version "0.3.0-build150" } 本文 フレームなしウィンドウを作成してウィンドウを移動させるまで【Jetpack Compose Desktop】 の続きになります。 https://matsudampe…

フレームなしウィンドウを作成してウィンドウを移動させるまで【Jetpack Compose Desktop】

バージョン この記事は古いです、Composeのバージョン 1.1.x 以降のコードはこちら。 https://matsudamper.hatenablog.com/entry/2022/06/13/032259 今回紹介するバージョン plugins { kotlin("jvm") version "1.4.30" id("org.jetbrains.compose") version …

Listを作成する【Jetpack Compose (Desktop)】

バージョン情報 0.3.0 で LazyColumnFor が無くなって、LazyColumnに統合されたようなので、そちらを使用します。 plugins { kotlin("jvm") version "1.4.30" id("org.jetbrains.compose") version "0.3.0-build150" } 古い情報はこちら。 https://matsudamp…

ネットワークからの画像読み込み【Jetpack Compose (Desktop)】

バージョン情報 plugins { kotlin("jvm") version "1.4.20" id("org.jetbrains.compose") version "0.2.0-build132" } 以下のようにImageBitmapに変換して返す関数を作成しました。ついでにキャッシュもしてみました。 object ImageUtil { private val cache…

@ComposableのライフサイクルとCoroutine【Jetpack Compose (Desktop)】

バージョン情報 plugins { kotlin("jvm") version "1.4.20" id("org.jetbrains.compose") version "0.2.0-build132" } 注釈 0.3.0-build150 CompositionLifecycleObserver は RememberObserver に名前が変わりました。 ライフサイクル ライフサイクルは以下…

Listを作成する(deprecate:0.2.0)【Jetpack Compose (Desktop)】

バージョン情報 plugins { kotlin("jvm") version "1.4.20" id("org.jetbrains.compose") version "0.2.0-build132" } 0.3.0 で LazyColumnFor が無くなって、LazyColumnに統合されたようなので、最新情報はコチラを見てください。 https://matsudamper.hate…

UIを組むためのDSLとデータの持ち方の考え方【Jetpack Compose (Desktop)】

バージョン情報 plugins { kotlin("jvm") version "1.4.20" id("org.jetbrains.compose") version "0.2.0-build132" } 考え方 普通のKotlinの書き方と全く異なります。Kotlin-Nativeで freeze というものがあるのと同じくらいには違います。Kotlin-NativeやK…

Jetpack Compose Desktopに入門【背景+スタートアップ編】

バージョン情報 plugins { kotlin("jvm") version "1.4.20" id("org.jetbrains.compose") version "0.2.0-build132" } Jetpack Composeに入門してみる Android開発者(Gradleが触れる) AndroidのJetpack Composeは触ったことがない 動機 モダンなJavaのGUI環…