Jetpack Compose
Android10以下のComposeで Modifier.imePadding() が効かない事があります。 Issueが既に立っていて、調べた原因は以下に書いたので、そちらを見てもらっても良いです。 https://issuetracker.google.com/issues/266331465 修正方法 Activityに android:wind…
変更点 Modifierのパフォーマンスが向上したのは以下の開発者ブログの通りです。 https://android-developers.googleblog.com/2023/08/whats-new-in-jetpack-compose-august-23-release.html Modifierには Modifier.composed {} という、ステートフルなModif…
不具合である事が確認できました。 https://issuetracker.google.com/issues/270656235 movableContentOfとは movableContentOf は 1.2.0-alpha03 で追加されたAPIです。 https://developer.android.com/jetpack/androidx/releases/compose-ui#1.2.0-alpha03…
以下の記事に更に下のバーを付けたバージョン。 https://matsudamper.hatenablog.com/entry/2022/07/27/212056 Pagerとかのスクロールに合わせてタブのバーを移動させます。 imports import androidx.annotation.FloatRange import androidx.compose.animati…
以下のように、ページをスワイプするたびにイモムシみたいに動くインジゲータを作成します。 横幅は大きくなったり小さくなったり小さくなったりします。offsetは横幅が増加している時は動かず、小さくなっている時にだけ、小さくなっている分だけ進むことで…
compose version: 1.4.0 中国語、日本語、絵文字等が表示できません。自前でダウンロードしてきて読み込めば表示できます。 適当にダウンロードしてきました。 https://fonts.google.com/noto/specimen/Noto+Sans+JP import androidx.compose.runtime.Compos…
環境 androidx.compose:compose-bom:2023.03.00 androidx.navigation:navigation-compose:2.5.3 再現手順 全ての再現コードは以下の通り。 https://github.com/matsudamper/Navigation-TalkBack-Crash TalkBackやBitwaden等の、UI要素にアクセスするユーザー…
リリースノートに無いものの、 1.5.0-alpha02 で修正されていた。
バージョン kotlin.version=1.8.10 compose.version=1.3.1 問題 以下のGoogle公式のBackspaceでページを戻るプラグインをCompose Multiplatform JS Wasmで使用していると、TextFieldでBackspaceを押すと前のページに戻ってしまいます。 https://chrome.googl…
画像がスクロールするバナーを作ります。 Preview Code Column { ImageBannerPagerWithIndicator( modifier = Modifier .fillMaxWidth() .heightIn(max = 200.dp), scrollMills = 2000, activeColor = androidx.compose.ui.graphics.Color.Yellow, inActiveC…
こんな感じのNumber Pickerを作りました。 State まずは無難にStateの定義。 State経由でPositionの変化を受け取ります。 @Composable public fun rememberPickerState(): PickerState { return remember { PickerState() } } public class PickerState { pu…
Jetpack Compose Webを使いたくてIntelliJのNew Projectでテンプレートから作成しましたが、 Kotlin1.6+Compose1.1 だった為、 Kotlin1.7+Compose1.2 に上げた時に問題が発生しました。 これは開発では問題なくて ./gradlew jsBrowserProductionWebpack 等で…
rootのbuild.gradleに以下を追加する。 plugins { id("io.gitlab.arturbosch.detekt") version("1.22.0-RC2") } allprojects { apply plugin: "io.gitlab.arturbosch.detekt" dependencies { configurations.maybeCreate("detektPlugins") detektPlugins("co…
Columnの中の途中のコンテンツを消す時に、いきなり高さが0になるのではなく、アニメーションさせて消します。 これは、 AnimatedVisibility を使用すればいいのですが、中のコンテンツを表示させるためのものがnullableであり、nullになったら消したい場合…
作るもの 収まる場合は等幅 収まらない場合は横スクロールさせる。なおかつ等幅 使用するもの Jetpack Composeは1度しかmeasureを呼ぶ事ができない制約がありますが、レイアウトにとある高さを与えた場合、無限の横幅があると仮定してレイアウトが変わらない…
はじめに Jetpack Composeは変更があった部分だけ、再計算(ReComposition) されます。どのようなときにReCompositionされて、どのようなときにCompositionがSkipされるのかを知っていると、最適なパフォーマンスを得られる手がかりになります。 Jetpack Comp…
派生Stateである DerivedState を作成する derivedStateOf の使い所についてです。 基本的な使い方 rememberの中で derivedStateOf を使います。その中で State を読み込みます。 これにより、 Stateの counter1 が変化した時にだけ計算が行われます。 var c…
とあるLambdaの中で読み込まれたStateObjectを把握します。 環境 Jetpack Compose Desktopですが、Androidでも動きは同じはずです。 Runtime 1.1 コード Snapshot.observe で読み込まれたStateObjectを把握する事ができます。 derivedStateOf の内部で使われ…
Composableの状態 Composable関数には3つの状態があります。 State1 State2 State3 skippable ○ restartable ○ ○ https://github.com/androidx/androidx/blob/403b6d0032c289ed6e65a1c75f137c07aedd220f/compose/compiler/design/compiler-metrics.md skippa…
LayoutInspectorを使って、Recomposeされているタイミングと場所を把握します。 LayoutInspectorを開きます。 設定 Show Recomposition Counts にチェックを入れます。 Show Recomposition Counts が無い場合は compose runtime のバージョンが 1.2 以上が必…
従来のAndroidのViewでは、プレビュー中なことは isInEditMode でわかります。これのCompose版です。 コード 以下でわかります。 val runningInPreview = LocalInspectionMode.current 使い所 GoogleMapは記事を書いている現状で、プレビューが働かないので…
こちらで紹介したので 0.3.0-build150 のバージョンでしたが、 LocalAppWindow が無くなったので、代わりにWindowに与える引数の、WindowStateを使います。 https://matsudamper.hatenablog.com/entry/2021/02/08/025214 コード Compose Desktopのバージョン…
以下のようなボタンを作成します。 四角の中がボタンが押せる範囲 rippleは円形の中だけ 実装 clickable と indication を使用します。 interactionSource を共有し、rippleを表示させたくない範囲は indication を null にします。 @Preview @Composable pu…
概要 CoordinatorLayoutのenterAlwaysを作成します。 必要なもの等 スクロールを検知して止めたりする レイアウトを移動させる 影の制御 Compose 解説は末尾でやります。 完成品 @Composable public fun HeaderEnterAlwaysColumn( modifier: Modifier = Modi…
テキストのベースラインとアイコン等を下部に揃えます。 ベースラインではなくて、ただ単純に要素の下部を揃えたい場合は Row(verticalAlignment = Alignment.Bottom) で十分です。 テキストのベースラインを揃える まずテキストのベースラインを揃えるには …
Usecase デザイン上、1行で表示させたいが、デバイスによっては横幅に収まらない。しかし改行をさせたくないものがあったので作りました。 上の様な感じではなく、下のように表示したい場合に使用します。 両方とも文字サイズ30spを使用し、表示できるデバイ…
env composeOptions { kotlinCompilerVersion "1.5.10" kotlinCompilerExtensionVersion "1.0.0-rc01" } code 2つ目のViewを押すと called が2回呼ばれています。 TestViewをRoot関数の外に出すと1回だけになりました。 何故か更新の無いはずのRowの最初のVi…
このような動的に変更されるtimeがあります。 class TagViewModel(private val coroutineScope: CoroutineScope) { val time: MutableStateFlow<String> = MutableStateFlow("") init { coroutineScope.launch(Dispatchers.Default) { while (isActive) { time.value</string>…
※追記 デバッグビルドと本番ビルド、端末ごとにパフォーマンスが大きく異る事がわかったので、パフォーマンスが悪いのはそれのせいかもしれません。(特に自分はPixel5でパフォーマンスが悪かったです。Pixel3は問題なかったですが。) 前提 rc01が出ています…
自分の観測したものだけですが、記述します。 バージョン 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…
